How to use ESLint to check TypeScript code

One might think that JavaScript is very flexible and therefore requires code review. TypeScript already checks for a lot of problems at compile time, so why code check?

TypeScript focuses on type checking, not code style. When there are more and more people in the team, the same logic may be written differently by different people:

• Should the indent be four Spaces or two Spaces?
• Should it be disabled?var?
• Whether the interface name should start withIAt the beginning?
• Whether it should be mandatory= = =Rather than= =?

These are issues that TypeScript doesn’t care about, but affect the efficiency, understandability, and maintainability of collaborative development.

Here’s a concrete example:

var myName = 'Tom';

console.log(`My name is ${myNane}`);
console.log(`My name is ${myName.toStrng()}`);Copy the code

Can you see any errors in the above code?

When TSC is compiled and ESLint is checked, the following error message is reported:

let myName = 'Tom'; Eslint (no-var) console.log(' My name is ${myNane} '); // Unexpected var, use let or const int.eslint (no-var) console.log(' My name is ${myNane} '); // Cannot find name 'myNane'. Did you mean 'myName'? // ESLint reports an error message: // 'myNane' is not defined.esLint (no-undef) console.log(' My name is ${myName.tostrng ()} '); // Property 'toStrng' does not exist on type 'string'. Did you mean 'toString'?Copy the code

In the above example, we used var to define a variable, but ES6 has the more advanced syntax let and const, which can be checked by ESLint to indicate that we should use let or const instead of var.

TSC and ESLint can check for undefined variables myNane.

Because ESLint does not know which methods exist for myName, it does not check for misspelled toString.

Thus, ESLint can find errors that TSC doesn’t care about and check for potential problems, so code checking is very important.

ESLint can be installed in the current project or in a global environment, and since code checking is an important part of the project, we would typically install it in the current project. You can run the following script to install:

npm install --save-dev eslintCopy the code

Since ESLint uses Espree for syntax parsing by default, some TypeScript syntax is not recognized. We need to install @typescript-esLint /parser instead of the default parser. Don’t forget to install TypeScript as well:

npm install --save-dev typescript @typescript-eslint/parserCopy the code

Next you need to install the corresponding @typescript-esLint /eslint-plugin, which supplements the ESLint default rules by providing additional rules for TS syntax.

npm install --save-dev @typescript-eslint/eslint-pluginCopy the code

With the configuration file created, let’s create a TS file to see if we can check it with ESLint.

Create a new file named index.ts and copy the following into it:

var myName = 'Tom';

type Foo = {};Copy the code

Then execute the following command:

./node_modules/.bin/eslint index.tsCopy the code

The following error message is displayed:

/path/to/index.ts 1:1 error Unexpected var, use let or const instead no-var 3:6 error Use an `interface` instead of a `type` * * @typescript-eslint/consistent-type-definitions * 2 problems (2 errors, 0 warnings) 2 errors and 0 warnings potentially fixable with the `--fix` option.Copy the code

The preceding command output shows that the two rules have taken effect. Use interface in preference to type.

Note that we use./node_modules/.bin/eslint instead of the global ESLint script, because code checking is an important part of the project, so we would normally install it in the current project.

However, it is inconvenient to execute such a long script at a time. We can simplify this step by adding a script to package.json to create an NPM script:

{
    "scripts": {
        "eslint": "eslint index.ts"
    }
}Copy the code

Simply execute NPM run ESLint.

Integrating ESLint checking into the editor allows you to detect errors during development and even fix them automatically when you save, greatly increasing development efficiency.

To integrate ESLint checking with VSCode, you need to install the ESLint plugin, click the “extend” button, search for ESLint, and install it.

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

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript"
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}Copy the code

Then open another.ts file and move the mouse pointer to the red prompt, you can see this error message:

We can also turn on auto-repair on save by configuring:

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}Copy the code

After saving the file, it can be automatically fixed as:

let myName = 'Tom';

interface Foo {}Copy the code

There are too many ESLint native rules and @typescript-eslint/eslint-plugin rules, and some of the native rules don’t support typescript well and need to be disabled.

Here I recommend using the TypeScript version of the AlloyTeam ESLint rule, which already provides a complete set of configuration rules and is completely compatible with Prettier (eslint-config-alloy does not contain any code format rules, Coding formatting is left to Prettier, a more professional Prettier.

Installation:

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloyCopy the code

Create.eslintrc.js in your project root directory and copy the following contents into the file:

module.exports = { extends: [ 'alloy', 'alloy/typescript', ], env: {// Your environment variables (including several predefined global variables) // Your environments (which contains several predefined global variables) // // browser: true, // node: true, // mocha: true, // jest: true, // jquery: true }, globals: {// Your global variables (setting to false means it's not allowed to be reassigned) // Your global variables (setting to false means it's not allowed to be reassigned) // // myGlobal: false}, rules: {// Customize your rules}};Copy the code

For more information, refer to the AlloyTeam ESLint rule

npm install --save-dev eslint-plugin-reactCopy the code

{
    "files.eol": "\n",
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}Copy the code

You are running global ESLint, you need to run./node_modules/.bin/eslint instead.

The first parameter can start with an underscore, see github.com/Microsoft/T…

• Chapter one: Engineering
• Next chapter: Compile options