TSLint errors on VS Code using SPFx default rules

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.

Update SPFx 1.6.0

SPFx 1.6.0 now includes the tslint.json file at the root, so this workaround is no longer required.

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 in 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.

Happy coding!