Login/Register
How can I synchronise eslint or setup similar tslint and prettier with typescript?
Asked Answered
Solved typescriptvisual-studio-codeeslintprettier
P

2

1

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:

  1. How can I configure/synchronise eslint on typescript files?
  2. How can I configure this eslint configuration on vscode? (I was using webstorm before this but I want to use vscode)
  3. How can I configure prettier with eslint with Typescript in VSCode?
Patency answered 10/11, 2018 at 16:21 Comment(0)
S
5

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:

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"
  ]
}
Siesta answered 10/11, 2018 at 21:15 Comment(2)
Thanks @Josh. I've added all these to my project. I wanted to know if there is a way to extend existing eslint rules to tslint but I don't think there is. I'll have to use separate tslint.json file – Patency
Gotcha. Yeah, there's no way to do that now 🙁 but there's some discussion on GitHub around how TSLint could! github.com/palantir/tslint/issues/1576 – Siesta
P
0

Q1 2020, the need for synchronization might not be so relevant, considering the engineering comment included with VSCode 1.42:

TSLint to ESLint migration

VS Code is mostly written in TypeScript. In addition to the compiler, we use linting to enforce certain style and engineering rules.
In the past, we have used TSLint for that task, but roughly a year ago, the maintainers of TSLint announced its deprecation in favor of ESLint.

This milestone we have migrated to ESLint - that includes our lint-configuration and our custom rules.

Penknife answered 29/1, 2020 at 17:39 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.