TypeScript code check

catalogue

Code check

What is code checking §

Why code checking is required §

Using ESLint in TypeScript §

Install ESLint §

Create profile §

Check a ts file §

Check the ts file of the whole project §

Integrate ESLint check in VSCode §

Fix formatting errors using Prettier §

Use the ESLint configuration of AlloyTeam §

Checking tsx files using ESLint §

Troubleshootings§

Cannot find module '@typescript-eslint/parser'§

VSCode does not display the error message of ESLint §

Why are some variables defined (such as using   enum   The defined variable) is not used, but ESLint does not report an error? §

After enabling noUnusedParameters, only the second parameter is used, but the first parameter must be passed in, which will report an error §

Code check

In January 2019, TypeScirpt officially decided to fully adopt ESLint   As a tool for code checking, and created a new project   typescript-eslint , provides a parser for TypeScript files   @typescript-eslint/parser   And related configuration options   @typescript-eslint/eslint-plugin   Wait. The previous two lint solutions will be discarded:

  • typescript-eslint-parser   Maintenance stopped
  • TSLint   The migration tool will be provided, and the maintenance of TSLint will be stopped after the function of typescript eslint is complete enough (once we consider eslint feature complete w.r.t. TSLint, we will reduce TSLint and help users migrate to eslint) 1)

To sum up, the current and future code checking scheme for TypeScript is   typescript-eslint.

What is code checking §

Code checking is mainly used to find code errors and unify code style.

In JavaScript projects, we generally use   ESLint   It greatly enriches the scope of application and collocation through the plug-in feature   typescript-eslint   After that, it can even be used to check TypeScript code.

Why code checking §

Some people think that JavaScript is very flexible, so it needs code checking. While TypeScript can check many problems at the compilation stage, why do you need code checking?

Because TypeScript focuses on type checking rather than code style. When more and more people on the team write the same logic, it may be very different for different people:

  • Should the indentation be four spaces or two spaces?
  • Should it be disabled   var?
  • Should the interface name be   I   start?
  • Should it be mandatory  ===  instead of  ==?

TypeScript will not pay attention to these problems, but it will affect the efficiency, code understandability and maintainability of multi person collaborative development.

Let's take a specific example:

var myName = 'Tom';

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

Can you see any errors in the above code?

After compiling with tsc and checking with eslint respectively, the error message is as follows:

var myName = 'Tom';
// eslint error message:
// Unexpected var, use let or const instead.eslint(no-var)

console.log(`My name is ${myNane}`);
// tsc error message:
// Cannot find name 'myNane'. Did you mean 'myName'?
// eslint error message:
// 'myNane' is not defined.eslint(no-undef)
console.log(`My name is ${myName.toStrng()}`);
// tsc error message:
// Property 'toStrng' does not exist on type 'string'. Did you mean 'toString'?
Existing problemstsc   Whether an error is reportedeslint   Whether an error is reported
Should use   let   or   const   instead of   var
myName   It was written by mistake   myNane
toString   It was written by mistake   toStrng✅️

In the above example, we used   var   To define a variable, but there is a more advanced syntax in ES6   let   and   Const, you can pass   eslint   Check it out and prompt us that we should use it   let   or   const   instead of   var.

For undefined variables   myNane,tsc   and   eslint   Can be checked out.

because   eslint   Unrecognized   myName   What methods exist, so for spelling errors   toString   Didn't check it out.

Thus, eslint   Can find some   tsc   I don't care about errors and check out some potential problems, so code checking is still very important.

Using ESLint in TypeScript §

Install ESLint §

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

npm install --save-dev eslint

Because ESLint is used by default   Espree   For syntax parsing, some syntax of TypeScript cannot be recognized, so we need to install it   @typescript-eslint/parser , instead of the default parser, don't forget to install it at the same time   typescript:

npm install --save-dev typescript @typescript-eslint/parser

Next, you need to install the corresponding plug-in   @typescript-eslint/eslint-plugin   As a supplement to the eslint default rules, it provides some additional rules applicable to ts syntax.

npm install --save-dev @typescript-eslint/eslint-plugin

create profile §

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

When running ESLint to check a file, it will first try to read the configuration file in the directory of the file, and then look up level by level to merge the found configuration as the configuration of the currently checked file.

We create one at the root of the project  . eslintrc.js, as follows:

module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    rules: {
        // var is prohibited
        'no-var': "error",
        // interface is preferred over type
        '@typescript-eslint/consistent-type-definitions': [
            "error",
            "interface"
        ]
    }
}

In the above configuration, we have specified two rules, where   no-var   Is the native rule of ESLint, @ typescript ESLint / consistent type definitions   yes  @ typescript-eslint/eslint-plugin   New rules.

The value of the rule is generally an array (in the above example)  @ Typescript eslint / persistent type definitions), where the first item is   off,warn   or   error   The following items are other configurations of the rule.

If there is no other configuration, the value of the rule can be abbreviated as the first item in the array (in the above example)   no-var).

The meanings of shutdown, warning and error reporting are as follows:

  • Close: disable this rule
  • Warning: error message will be output during code check, but exit code will not be affected
  • Error reporting: when an error is found, not only the error message will be output, but also the exit code will be set to 1 (generally, if the exit code is not 0, it indicates an error in execution)

Check a ts file §

After creating the configuration file, let's create a ts file to see if we can check it with ESLint.

Create a new file   index.ts, copy the following contents:

var myName = 'Tom';

type Foo = {};

Then execute the following command:

./node_modules/.bin/eslint index.ts

You will get the following error message:

/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.

The above results show that the two rules just configured are effective: prohibit use   var; preferred   interface   instead of   type.

It should be noted that we use  ./ node_modules/.bin/eslint, not global   eslint   Script, because code checking is an important part of the project, we usually install it in the current project.

However, it is inconvenient to execute such a long script every time. We can   package.json   Add a   script   To create an npm script to simplify this step:

{
    "scripts": {
        "eslint": "eslint index.ts"
    }
}

Just execute   npm run eslint   Just.

Check the ts file for the entire project §

Our project source files are generally placed in   src   Directory, so you need to   package.json   Medium   eslint   The script checks a directory instead. because   eslint   The default is not to check  . ts   Suffix file, so you need to add parameters  -- ext .ts:

{
    "scripts": {
        "eslint": "eslint src --ext .ts"
    }
}

Execute at this time   npm run eslint   It will be checked   src   All in the directory  . ts   Suffix file.

Integrating ESLint checking in VSCode §

Integrating ESLint check in the editor can find errors in the development process, and even automatically repair errors when saving, which greatly increases the development efficiency.

To integrate ESLint check in VSCode, we need to install the ESLint plug-in, click the "extension" button, search ESLint, and then install it.

The ESLint plug-in in VSCode does not check by default  . ts   For suffix, you need to create a configuration file in "file = > Preferences = > Settings = > workspace" (you can also create a configuration file in the project root directory)  . vscode/settings.json), add the following configuration:

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

Then open another one  . ts   File, move the mouse to the red prompt, and you can see the error message:

We can also turn on the function of automatic repair when saving by configuring:

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

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

let myName = 'Tom';

interface Foo {}

Fix formatting errors using Prettier §

ESLint contains some code format checks, such as spaces, semicolons, etc. But there is a more advanced tool in the front-end community that can be used to format code, that is   Prettier.

Prettier focuses on code formatting, reorganizes the code format through syntax analysis, and keeps everyone's code in the same style.

First you need to install Prettier:

npm install --save-dev prettier

Then create a   prettier.config.js   File, which contains prettier configuration items. Prettier has few configuration items. Here I recommend a configuration rule for your reference:

// prettier.config.js or .prettierrc.js
module.exports = {
    // One line can be up to 100 characters
    printWidth: 100,
    // Indent with 4 spaces
    tabWidth: 4,
    // Use spaces instead of indents
    useTabs: false,
    // A semicolon is required at the end of the line
    semi: true,
    // single quotes 
    singleQuote: true,
    // The key of the object is quoted only when necessary
    quoteProps: 'as-needed',
    // jsx does not use single quotes, but double quotes
    jsxSingleQuote: false,
    // Comma is not required at the end
    trailingComma: 'none',
    // Spaces are required at the beginning and end of braces
    bracketSpacing: true,
    // The inverse angle brackets of jsx tags need to wrap
    jsxBracketSameLine: false,
    // When the arrow function has only one parameter, parentheses are also required
    arrowParens: 'always',
    // The format range of each file is the whole content of the file
    rangeStart: 0,
    rangeEnd: Infinity,
    // You do not need to write @ prettier at the beginning of the file
    requirePragma: false,
    // There is no need to automatically insert @ prettier at the beginning of the file
    insertPragma: false,
    // Use default line break criteria
    proseWrap: 'preserve',
    // Determines whether html should be folded or not according to the display style
    htmlWhitespaceSensitivity: 'css',
    // Line breaks use lf
    endOfLine: 'lf'
};

Next, install the Prettier plug-in in VSCode and modify it  . vscode/settings.json:

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

This enables automatic formatting and automatic repair of ESLint errors when saving files.

It should be noted that since ESLint can also check some code format problems, we will generally disable the rules related to code format in ESLint when used with Prettier, otherwise there will be conflicts.

Use the ESLint configuration of AlloyTeam §

ESLint native rules and  @ typescript-eslint/eslint-plugin   There are too many rules, and some native rules are not well supported in TypeScript and need to be disabled.

I recommend it here   TypeScript version in AlloyTeam ESLint rule , it has provided us with a complete set of configuration rules and is fully compatible with Prettier (eslint config alloy does not contain rules of any code format, and the problem of code format is left to more professional Prettier).

Installation:

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy

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

module.exports = {
    extends: [
        'alloy',
        'alloy/typescript',
    ],
    env: {
        // Your environment variables (including multiple predefined global variables)
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // Your global variable (set to false to indicate that it is 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
        // Customize your rules
    }
};

For more usage, please refer to   AlloyTeam ESLint rule

Checking tsx files using ESLint §

If you need to support checking tsx files at the same time, you need to make some adjustments to the above steps:

install   eslint-plugin-react §

npm install --save-dev eslint-plugin-react

Add scripts.eslint in package.json  . tsx   suffix §

{
    "scripts": {
        "eslint": "eslint src --ext .ts,.tsx"
    }
}

New typescriptreact check in VSCode configuration §

{
    "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"
}

Use TypeScript React version in AlloyTeam ESLint rule §

TypeScript React version in AlloyTeam ESLint rule

Troubleshootings§

Cannot find module '@typescript-eslint/parser'§

You are running global eslint and need to run it instead  ./ node_modules/.bin/eslint.

VSCode does not display the error message of ESLint §

  1. Check whether the configuration in "file = > Preferences = > Settings" is correct
  2. Check that the necessary npm packages are installed
  3. inspect  . eslintrc.js   Is there any configuration
  4. Check whether the file is in  . eslintignore   in

If none of the above steps works, you can configure it in file = > Preferences = > settings   "eslint.trace.server": "messages", press   Ctrl+Shift+U   Open the output panel and select ESLint output to view the specific error.

Why are some variables defined (such as using   enum   The defined variable) is not used, but ESLint does not report an error? §

Because this kind of variable definition checking cannot be supported. Recommended in   tsconfig.json   Add the following configuration to make   tsc   The compilation process can check that unused variables are defined:

{
    "compilerOptions": {
        "noUnusedLocals": true,
        "noUnusedParameters": true
    }
}

After enabling noUnusedParameters, only the second parameter is used, but the first parameter must be passed in, which will report an error §

The first parameter can start with an underscore, refer to   with --noUnusedParameters how can i skip uneeded parameters · Issue #9458 · microsoft/TypeScript · GitHub

Tags: Javascript node.js TypeScript

Posted on Mon, 11 Oct 2021 15:35:21 -0400 by Asperon