How do I disable trailing-comma tslint rule in SPFx scaffolding?

Question

I ran the current Yeoman SharePoint generator, and got the following ts-lint file in the config directory (with a few minor tweaks added).

From what I can tell the trailing-comma rule should be disabled (it's set to false), but it's not. I'm still getting red squigglies when I don't have a trailing comma.

What am I missing? Thanks! :-)

  "$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
  // Display errors as warnings
  "displayAsWarning": true,
  // The TSLint task may have been configured with several custom lint rules
  // before this config file is read (for example lint rules from the tslint-microsoft-contrib
  // project). If true, this flag will deactivate any of these rules.
  "removeExistingRules": true,
  // When true, the TSLint task is configured with some default TSLint "rules.":
  "useDefaultConfigAsBase": false,
  // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
  // which are active, other than the list of rules below.
  "lintConfig": {
    // Opt-in to Lint rules which help to eliminate bugs in JavaScript
    "rules": {
      "class-name": false,
      "export-name": false,
      "forin": false,
      "label-position": false,
      "member-access": true,
      "no-arg": false,
      "no-console": false,
      "no-construct": false,
//      "no-duplicate-switch-case": true,
      "no-duplicate-variable": true,
      "no-eval": false,
      "no-function-expression": true,
      "no-internal-module": true,
      "no-shadowed-variable": true,
      "no-switch-case-fall-through": true,
      "no-unnecessary-semicolons": true,
      "no-unused-expression": true,
      "no-use-before-declare": true,
      "no-with-statement": true,
      "semicolon": true,
      "trailing-comma": false,
      "typedef": false,
      "typedef-whitespace": false,
      "use-named-parameter": true,
      "typeof-compare": true,
      "variable-name": false,
      "whitespace": false
    }
  }
}

Answer 1

https://joelfmrodrigues.wordpress.com/2017/12/06/tslint-spfx/

I like to use the TSLint extension on Visual Studio Code to immediately flag errors. This is very useful as you can see them before you save and wait for a build task to flag them. What I don’t like, is that the TSLint config file (tslint.config) is generated inside the config folder by the SPFx Yeoman generator.

When you open a project folder with Visual Studio Code, TSLint (assuming that it’s installed) will by default look for a tslint.config file at the root of that folder and use that configuration to display information on the Problems window.

Guess what? If the file is not there, TSLint won’t display any issues, which is the default for any SharePoint Framework solution.

If you thought that the solution is to simply copy the file from the config folder to the root folder, so that TSLint works on VS Code and also on the gulp task, shame on you 🙂 duplication is never the solution for a developer 🙂

Fortunately TSLint supports that (and a lot more if you look at the documentation), so in order to solve the problem you simply need to tell TSLint where to find the correct configuration.

For the following to work, you need the TSLint extension for VS Code and TSLint installed globally (npm install -g tslint).

Start by creating an empty tslint.json file at the root folder of your SPFx project.

TSLint will load this file automatically as it uses the expected config name

Then simply add a rulesDirectory property to it that instructs TSLint to get the correct config options from the config folder created by the Yeoman generator

{ "rulesDirectory": "./config" }

That’s it! Now close and reopen VS Code and you should see warnings and errors on the Problems window.