preface

As projects grow, even the smallest error can lead to a page exception that not only affects user usage, but also wastes a lot of time debugging, so using code inspection tools allows programmers to find problems while coding rather than during execution.

The introduction of Eslint

ESLint is an open source JavaScript code checking tool created by Nicholas C. Zakas in June 2013. Code review is a static analysis that is often used to find problematic patterns or code and is not dependent on specific coding styles. Most programming languages have code checks, and compilers typically have built-in checks.

JavaScript is a dynamic, weakly typed language that is prone to error in development. Because there is no compiler, it is often necessary to debug during execution to find JavaScript code errors. Things like ESLint allow programmers to find problems while coding rather than during execution.

The original purpose of ESLint was to allow programmers to create their own detection rules. All rules in ESLint are designed to be pluggable. ESLint’s default rules are no different from other plugins, and the rules themselves and tests can rely on the same schema. ESLint has some rules built in to make it easier for people to use, although you can customize the rules as you go along.

ESLint is written in Node.js, which allows for a fast runtime environment and easy installation

Eslint configuration

Step 1: The next package

npm i -D eslint

Step 2: In the projectThe root directoryRun,npx eslint --initInstall plug-ins as prompted

Step 3: What modules will your project use

Step 4: What framework do you use for your project

Step 5: Prompt whether to use typescript

Step 6: Prompt which environment to run browser or Node

Step 7: Define your code style

Step 8: Define a style guide

Step 9: Configure the file format

Step 10: Demote

Step 11: Whether to install using NPM

Set up automatic save formatting in vscode

In the project root directory, add the configuration file:.vscode\settings.json, which reads as follows:

{
    "eslint.enable": true,
        "eslint.run": "onType",
        "eslint.options": {
            "extensions": [
                ".js",
                ".vue",
                ".jsx",
                ".tsx"
            ]
        },
        "eslint.alwaysShowStatus": true
}
Copy the code

The ESLint setup is complete at this point, but ESLint does not drill into JSX code to format, so additional tools are required.

Configuring – Importing prettier-now

The first step:

Install the vscode plugin prettier-now

Step 2: Supplementary configuration

. Vscode \ Settings. In json

{ "eslint.run": "onType", "eslint.options": { "extensions": [".js", ".vue", ".jsx", ".tsx"] }, "editor.codeActionsOnSave": { "source.fixAll.eslint": True}, // Editor Settings - do formatting "editor.formatOnSave" when saving: True, // Editor Settings - default prettier now formatting // If prettier is used, DefaultFormatter :"remimarsal. Prettier -now", // indent "prettier. UseTabs ": False, // Indent "prettier. TabWidth "instead of TAB: // If you use Prettier, you cannot select it, causing it to conflict with the default configuration of ESLint // You can find many files in Baidu:  https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC "prettier.spaceBeforeFunctionParen": True, / / the react JSX let > with the end tag "prettier. JsxBracketSameLine" : true, "prettier. BracketSpacing" : False, // Remove the space "prettier.semi": false, // do not add; "Prettier.singlequote ": true, // Use single quotes" prettier.trailingcomma ": "None ", // Do not follow comma," prettier.printwidth ": 80, // wrap each row over 80 columns // in.js, write div press TAB to automatically complete "emmet.includeLanguages": {"javascript": "javascript"}}Copy the code

When you save Ctrl+S formatting when esLint is configured with this project you can check in the user area to see if you have configured it

Eslintrc.js rules: ‘no-use-before-define’: ‘off’