genox.ch

17.9.2019
Filed under [object Object]
694b0465-0d58-4cf4-8f79-be68a31c4b37

TSlint, Prettier, autosave, autofix: A drama in VSCode

Something peculiar that bugged me for a while now. Depending on your setup, it can happen that VScode's autosave collides with TSLint and Prettier doing autofixing. You think it should work, but it doesn't. You read half a year of old github issue entries, just to find out that apparantly everybody could have a similar problem. But most certainly they don't. Sounds complicated? Yup, and it's fucking annoying.

This is what works for me:

The only plugin I have installed in VSCode is TSLint. "TSLint". Not "TSLint (deprecated)"…

TSLint is configured using a project specific tslint.json in the root directory. The settings are modified to accomodate some of NextJS' TS preferences and my personal taste options.

tslint.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "defaultSeverity": "error",
  "extends": ["tslint-config-airbnb", "tslint-react", "tslint-config-prettier"],
  "jsRules": {},
  "rules": {
    "variable-name": [false],
    "semicolon": [true, "always", "ignore-bound-class-methods"],
    "trailing-comma": [
      true,
      {
        "multiline": {
          "objects": "always",
          "arrays": "always",
          "functions": "never",
          "typeLiterals": "ignore"
        }
      }
    ],
    "jsx-no-lambda": [false],
    "import-name": [false],
    "prettier": true
  },
  "rulesDirectory": ["tslint-plugin-prettier"]
}

Note the "tslint-config-prettier" module and "tslint-plugin-prettier". Don't worry about ".prettierrc".

Now, whenever tslint is being run, it includes prettier's formatting rules for source code feedback in the editor, as well as when fixing all fixable issues on save. Hip hip hooray!

The problem was in my case, that I still had the Prettier plugin installed in vscode. In which case a) you get weird delays and performance issues and b) autosave in combination with autofix doesn't work. You can test this by disabling autosave and seeing if your autofix works on a manual save.

Well, I hope this helps someone.

1