How can I synchronise eslint or setup similar tslint and prettier with typescript?

Question

I've an existing React/Redux project and I've started using typescript in my project. I've already setup my eslint configuration for the project which extends the airbnb eslint configurations. My eslint is as follows:

module.exports = {
  "parser": "babel-eslint",
  "extends": [
    "airbnb",
    "plugin:flowtype/recommended"
  ],
  "plugins": [
    "react",
    "jsx-a11y",
    "flowtype"
  ],
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "globals": {
    "__DEV__": true,
    "__SERVER__": true,
    "__": true,
    "define": true,
    "describe": true,
    "expect": true,
    "require": true,
    "test": true,
  },
  "ecmaFeatures": {
    "arrowFunctions": true,
    "binaryLiterals": true,
    "blockBindings": true,
    "classes": true,
    "defaultParams": true,
    "destructuring": true,
    "forOf": true,
    "generators": true,
    "modules": true,
    "objectLiteralComputedProperties": true,
    "objectLiteralDuplicateProperties": true,
    "objectLiteralShorthandMethods": true,
    "objectLiteralShorthandProperties": true,
    "octalLiterals": true,
    "regexUFlag": true,
    "regexYFlag": true,
    "spread": true,
    "superInFunctions": true,
    "templateStrings": true,
    "unicodeCodePointEscapes": true,
    "globalReturn": true,
    "jsx": true
  },
  "rules": {
    // Strict mode
    "strict": [
      2,
      "never"
    ],
    // Code style
    "quotes": [
      2,
      "single"
    ],
    "arrow-parens": [
      2,
      "as-needed"
    ],
    // Key Spacing
    "key-spacing": 0,
    // Best practices
    "block-scoped-var": 1,
    "dot-notation": 1,
    "no-confusing-arrow": 1,
    "no-else-return": 1,
    "no-eval": 1,
    "no-extend-native": 1,
    "no-extra-bind": 1,
    "no-lone-blocks": 1,
    "no-loop-func": 1,
    "no-multi-spaces": 0,
    "no-param-reassign": [
      "error",
      {
        "props": false
      }
    ],
    "vars-on-top": 1,
    "max-statements": [
      1,
      20
    ],
    "no-underscore-dangle": 0,
    "no-undef": 1,
    "no-unused-vars": 1,
    "indent": [
      1,
      2,
      {
        "SwitchCase": 1
      }
    ],
    //React specific rules
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ],
    "react/forbid-prop-types": 0,
    "react/no-unused-prop-types": 1,
    //Overwriting airbnb stylings
    "array-bracket-spacing": 0,
    "comma-dangle": [
      2,
      "always-multiline"
    ],
    "func-names": 0,
    "jsx-quotes": [
      2,
      "prefer-double"
    ],
    "max-len": [
      2,
      200,
      2,
      {
        "ignoreUrls": true,
        "ignoreComments": false
      }
    ],
    "no-console": 0,
    "one-var": 0,
    "prefer-const": 1,
    "react/jsx-no-bind": 1,
    "react/require-default-props": 0,
    "space-in-parens": 0,
    "spaced-comment": 0,
    "no-multi-assign": 0,
    //Import rules
    "import/extensions": [
      2,
      {
        "js": "never"
      }
    ],
    "import/no-unresolved": 0,
    "import/no-extraneous-dependencies": 0,
    "import/no-named-as-default-member": 0,
    "import/first": 0,
    //Keeping below till idea supports these codestyles
    "object-curly-spacing": 0
  },
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": true
  },
  "settings": {
    "flowtype": {
      "onlyFilesWithFlowAnnotation": true
    },
    "import/resolver": "webpack"
  }
};

Now, as I'm using typescript, I want this eslint configuration to work on my typescript files as well (or similar tslint) but I don't want to create any other tslint file because then if I'll need to update then I'll have to update at 2 places. Also, I'd want to add prettier in VSCode. So, my questions are:

How can I configure/synchronise eslint on typescript files?
How can I configure this eslint configuration on vscode? (I was using webstorm before this but I want to use vscode)
How can I configure prettier with eslint with Typescript in VSCode?

Josh Josh · Accepted Answer · 2018-11-10T21:15:11

Answering the three bullets in order...

1. ESLint vs TSLint

Now that you're on TypeScript it'd be a good idea to switch to TSLint over ESLint. TSLint benefits from access to much richer type information using the TypeScript APIs, so its rules can be more powerful than ESLint's. For example, it has rules that can stop you from accidentally mishandling Promises, improperly comparing wrong types of variables, or iterating over arrays the wrong way.

See http://palantir.github.io/tslint for documentation and http://palantir.github.io/tslint/rules for the list of rules you can enable. There are a couple few projects that can fill in the gap for TSLint, as ESLint has some more rules, mainly:

https://www.npmjs.com/package/tslint-eslint-rules directly bridges the gap, approximately
http://npmjs.com/package/tslint-microsoft-contrib has a bunch of more library-specific rules

2. VS Code configuration

VS Code has an extension for ESLint and an extension for TSLint. Whichever you end up choosing, you can install that extension and it'll pick up on whichever configuration your project has.

It's also a good idea to add a .vscode/settings.json file to fine-tune your project's behavior in VS Code. Specifically for TSLint, at least this setting tends to help:

{
    "tslint.alwaysShowRuleFailuresAsWarnings": true
}

That will tell VS Code to always show TSLint rules with green squigglies instead of red, so you can tell what's a TypeScript complaint (red) verses a TSLint complaint (green).

3. Prettier

Great choice! Both ESLint and TSLint have default rulesets available that you can extend from to disable all lint rules that might conflict with or otherwise be redundant with Prettier.

For ESLint, see this page: https://prettier.io/docs/en/eslint.html. In summary, you can either use eslint-plugin-prettier to have ESLint run Prettier itself, or use the eslint-config-prettier package to disable ESLint's formatting rules.

In your .eslintrc.json:

{
  "extends": ["prettier"]
}

For TSLint, only tslint-config-prettier is available, which you can use to disable TSLint's formatting rules. https://www.npmjs.com/package/tslint-config-prettier.

In your tslint.json, you can extend from the tslint-config-prettier package:

{
  "extends": [
    "tslint-config-prettier"
  ]
}

How can I synchronise eslint or setup similar tslint and prettier with typescript?

2 Answers

1. ESLint vs TSLint

2. VS Code configuration

3. Prettier

TSLint to ESLint migration