In January 2019, TypeScript officially decided to fully adopt ESLint, and later released the typescript-ESLint project to address TypeScript and ESLint compatibility issues in a central way. Both previous Lint solutions will be deprecated:

  • typescript-eslint-parserMaintenance stopped
  • At the completion ofESLintFunction will be deprecatedTSLintAnd help users migrate toESLint

– TS official switch to ESLint:

  1. There are some framework issues with the way TSLint executes rules that affect performance, and fixing these issues can break existing rules.
  2. ESLint performs better, and the community generally has ESLint’s rule configurations (such as those for React and Vue) rather than TSLint’s rule configurations.

Why do you need ESLint when you already have TypeScript?

While ts compilers do type checking and language conversions, ESLint keeps code style consistent. Their functions overlap, but they also have their own responsibilities.

However, ESLint has some problems dealing with TS code? Because both the TS compiler and ESLint convert code to an AST (abstract syntax tree) before starting their respective work, the two syntax trees are incompatible. In this case, we can use the typescript-ESLint project, which provides esLint with a compiler dedicated to parsing TS code to address typescript and ESLint compatibility issues.

Use ESLint in TypeScript

The installation

npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
Copy the code

@typescript-eslint/ Parser provides parsers for ESLint. (Don’t forget to install typescript as well.) @typescript-esLint /eslint-plugin This comples esLint’s default rules by providing some additional rules that apply to TS syntax.

Creating a Configuration file

ESLint requires a configuration file to determine which rules to check. The name of the configuration file is usually.eslintrc.js or.eslintrc.json.

// .eslintrc.json
{
  "parser": "@typescript-eslint/parser"."plugins": ["@typescript-eslint"]."parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": ["plugin:@typescript-eslint/recommended"]."rules": { "@typescript-eslint/no-inferrable-types": "off"}}Copy the code

The value of rules is typically an array, where the first entry is one of off, WARN, or ERROR, indicating shutdown, warning, and error. The following items are other configurations of the rule.

If nothing else is configured, you can shorten the value of the rule to the first item in the array (@typescript-eslint/no-inferrable-types in the example above).

The meanings of OFF, WARN, and ERROR are as follows:

  • off: Disables this rule
  • warn: Output error message during code review, but will not affectexit code
  • error: When an error is found, not only error information but alsoexit codeIs set to1(generalexit codeDon’t for0An error occurred during execution.)

Check the ts/ JS file for the entire project

// package.json{..."script": {..."lint": "eslint src --ext .js,.ts"}}Copy the code
npm run lint
Copy the code

Integrate ESLint checks into VSCode

To install the ESLint plugin, click the “Extensions” button, search for ESLint, and then install it.

The ESLint plugin in VSCode does not check the.ts suffix by default, so in file => Preferences => Settings => Workspace (you can also create a configuration file.vscode/settings.json in the project root directory), add the following configuration:

{..."eslint.validate": [
    "javascript"."javascriptreact"."vue"."html"."typescript"]}Copy the code

Compare babel-esLint to typescript-esLint

  • babel-eslint:supportTypeScriptNo additional syntax checks, discardTypeScript, type checking is not supported.
  • typescript-eslint:Based on theTypeScript 的 AST, supports the creation of rules based on type information (tsconfig.json)

The underlying mechanisms are different, so don’t use them together. The Babel architecture recommends babel-esLint, otherwise use typescript-esLint.

TypeScript project series

  • Unused TypeScript? Namespace.
  • TS efforts: Announcement of merger
  • How do I introduce external libraries into TypeScript?
  • Get started quickly, tsconfig (file options)
  • Get started quickly, tsconfig (compile options)
  • Should you learn a more efficient way to build TS (engineering introduction)
  • TS compiler! From ts – loader to Babel
  • Code review tool! From TSLint to ESLint
  • TS single test tool! Ts – jest and Babel/jest