ES6 Specification Eslint

In the team's project development process, the proportion of the time that the code maintains is more often than the new function development. So writing code that conforms to the team coding specification is critical, not only to avoid basic grammatical errors, but also to make the code readable, after all:

The program is written to a person, but occasionally the computer executes it. --donald Knuth

This article will explain how to work with the eslint extension in Vscode to practice the front-end coding specification within the team.

Front End Coding Specification

Eslint Full configuration file what is Eslint

Eslint (Chinese site) is an Open-source JavaScript code checking tool, written using Node.js, created by Nicholas C. Zakas in June 2013. Eslint's intention is to allow programmers to create their own detection rules so that they can identify problems in the coding process rather than in the process of execution. All of Eslint's rules are designed to be pluggable, and for ease of use, Eslint has built-in rules that can also be added to custom rules. Installing Eslint Extensions Installation Environment

Vscode V1.11.1

Windows installation eslint extension

First, open the Vscode extension panel and search the Eslint extension, and then click Install

After installation, click Reload to activate the extension, but for the extension to work, we also need to do the Eslint installation configuration first. Install Eslint

If you just want Eslint to be part of your project building system, we can install it locally at the project root:

$ NPM Install Eslint--save-dev

If you want to make eslint applicable to all your projects, we recommend that you use a global installation, and that any eslint plug-ins or shared configurations you use will have to be installed globally after you use the global installation eslint.

Here we use the global installation:

$ NPM install-g Eslint

After installation, we use the Eslint--init command to generate a configuration file in the user's directory (or generate it in any location you like).

We select the custom code style in the first option and then select it as needed.

When the setup is complete, we'll get a profile with a. eslintrc.js file name:

Module.exports = {
    "env": {
        "browser": True,
        "Commonjs": True,
        "Es6": True
    },
    "extends": " Eslint:recommended ",
    " Parseroptions ": {
        " sourcetype ":" Module "
    },
    " rules ": {
        " indent ": [
            "Error",
            4
        ],
        "Linebreak-style": [
            "Error",
            "Windows"
        ],
        "quotes": [
            " Error ",
            " single "
        ],
        " semi ": [
            " Error ",
            " never "
        ]
    }
};

Configure Eslint

After the configuration file is generated, we can then make custom modifications, where we only sketch out the commonly used configuration items and complete configurable items to access the official document configuration Environment

The env attribute can be used in the configuration file that is generated earlier to specify the environment to enable and set it to true to ensure that when code detection does not identify the predefined global variables of these environments as undefined variables and error:

"env": {
    "browser": True,
    "Commonjs": True,
    "Es6": True,
    "jquery": True
}

Set Language Options

By default, Eslint supports ECMAScript 5 syntax, and if you want to enable support for other versions of ECMAScript and JSX, Eslint allows you to use the Parseroptions attribute to specify the JavaScript language options you want to support, not You may need to install eslint-plugin-react and other plug-ins yourself.

"Parseroptions": {
    "ecmaversion": 6,
    "sourcetype": "Module",
    "Ecmafeatures": {
        "jsx": True
    }
}

Configuration Rules

In the configuration file above, the "extends": "eslint:recommended" option indicates that the recommendation rule is enabled, and we can also use rules to add custom rules based on the recommended rule. The first value of each rule is the level of error that is displayed after the rule is detected:

Off or 0-close the rule

"Warn" or 1-treat the rule as a warning

"Error" or 2-treat the rule as an error

"Rules": {
    "indent": [
        "Error",
        4
    ],
    "Linebreak-style": [
        "Error",
        "Windows"
    ],
    "Quotes": [
        "Error",
        "single"
    ],
    "semi": [
        "Error",
        "never"
    ]
}

Complete list of configurable rules accessible: http://eslint.cn/docs/rules/

Where the mark with √ represents the rule as the recommended rule. set Eslint extension

After installing and configuring complete eslint, we continue to go back to Vscode for extended settings, click File > Preferences > settings to open Vscode profile

As you can see from the left system setup, the Eslint extension is enabled by default, and now we just need to add a configuration to the right user setting to specify the. Eslintrc.js profile path that we created to enable custom rule detection, and eslint will find and automatically read them:

"Eslint.options": {
    "configfile": "E:/git/github/styleguide/eslint/.eslintrc.js"
},

At this point, we can use the eslint extension to detect our JS file. let Eslint support Vue single file components

Since eslint only supports script detection of JS files by default, if we need to support inline script detection for class HTML files (such as Vue), we also need to install the eslint-plugin-html plugin.

Because we have Eslint installed globally, the Eslint-plugin-html plug-in must also be installed globally:

$ NPM install-g eslint-plugin-html

Once the installation is complete, we open the file > Preferences > Settings again, modify the Eslint configuration in the right user settings and Save:

"Eslint.options": {
    "configfile": "E:/git/github/styleguide/eslint/.eslintrc.js",
    "plugins": ["html"]
},
"Eslint.validate": [
    "JavaScript",
    "Javascriptreact",
    "html",
    "Vue"
]