Eslint related knowledge and configuration Daquan

Eslint was originally an open source project created by Nicholas C. Zakas in June 2013. Its goal is to provide a plug-in JavaScript code detection Tool.

Code checking is a static analysis that is often used to find problematic patterns or code, and does not rely on specific coding styles.

ESLint allows programmers to identify problems during coding rather than in the process of execution.

ESLint is written using node. js, which allows for a fast running environment and easy installation.

I. Environment configuration

Query Eslint within npmjs.com can be found

Current latest version of eslint@5.4.0, installation conditions

Prerequisites:Node.js (>=6.14), NPM version.

If you want to detect the syntax of the Vue component, you need to Eslint-plugin-vue

• ESLint >=3.18.0 .
  • >=4.7.0To use eslint --fix .
  • >=4.14.0With babel-eslint .
• node. js>=4.0.0

Install yarn (recommended for global installation with MSI file) by installing the required node and NPM versions first

Two. Configure the validation rules

Create a new. eslintrc.js file under the root directory, or generate it in eslint--init :

Module.exports = {    "Root":true,    "Env": {        "Browser":true,        "Commonjs":true,        "ES6":true    },    "Extends": [        "Eslint:recommended"    ],    "Parseroptions": {        "SourceType": "Module"    },    "Rules": {"Indent": [            "Error",            4        ],        "Linebreak-style": [            "Off"        ],        "Semi": [        2, "Always"        ],"No-console": [            "Off"        ]    }};

We use the eslint:recommended plugin:vue/recommended plugin:import rule for verification and priority use of the standard St YLE rules.

The following points need to be noted:

1. to validate the Vue component, you need to install   eslint-plugin-vue   and add  plugin:vue/recommended  
2.   Eslint-plugin-import   Import rules for verifying ES6, if you add import plugin, when we use Webpack, If you configure Resove.config.js alias, then we want the import plugin's validation rule to take the module's path from here, you need to configure

    " Settings " //  Using the resolve path configured in Webpack  "Import/resolver": "Webpack"   

3. Use the Babel-eslint syntax parser instead of Esprima. Eslint is based on the Esprima (ECMAScript Analytic architecture). Esprima supports ES5.1, which is also written in ECMAScript for multi-purpose analysis. The

4. Stanard style recommends indenting with two spaces, which we cover with 4 space rules based on our own usage.
5. set prompt rule:

"Rules": {"semi": [2, "Always"], "quotes": [2, "Double"]}

There are 3 configurations of the rules:

• 0: Prohibit use of the rule (off)
• 1: Define the rule as a warning (warn) level (does not affect exit code)
• 2: Define the rule as Error level (exit code is 1)

See GitHub for the full version of the configuration. Three. Automatic repair

Eslint requires a global installation of yarn global Add Eslint

Eslint--fix Active Automatic Repair

Eslint--ignore-pattern ' lib/* '  --fix ** *. js * */*.vue

This command can fix most of the syntax, and the rest needs to be repaired manually.

Note:Eslint requires a global installation, and plug-ins such as Eslint-plugin-vue, Eslint-plugin-import, and so on need to be installed globally to use fix.

For Webpack compile-time automatic repair, you can configure the following:

{    ' eslint-loader ',    options: {        true    }}

Four. Editor Check configuration

With the sublime to do the Vue component verification, although the various plug-ins are installed, but still no effect, up to the JS syntax check. VUE components, this is not possible. I don't know if I have a problem with my configuration, so I can't verify it with the syntax of the Vue component, so I'm giving up using sublime.

This article recommends that you use Vscode as your own new IDE. Feature-rich, powerful and simple to configure, it automatically recommends installing useful plugins based on the files you open. You can also synchronize sublime and other editor's operating habits such as shortcut keys. There is a handy grammar library hint.

Open the lower left corner of the settings, add the following configuration, the package installation method to yarn (the default is NPM), added saving is automatic repair, repair file error vue file. If you do not add Language:vue, then only the JS file repair, also if the relative HTML to repair, then add language:html

"Eslint.packagemanager": "Yarn","Eslint.validate": [        "JavaScript",        {            " Language ":" Vue ",            true        }    ],true,

Installing the Eslint and Vetur plugins in the left column extension

Restart the IDE to see both the checksum effect

The left side shows the number of syntax errors and whether the file has been modified, and the right side of the wavy line shows where the syntax is wrong.

Sometimes you may encounter a situation where the repair is incomplete, and most of the syntax can be repaired several times. For a bit of the code to save a little can not worry about this problem.

Eslintrc.js full configuration See GitHub Vscode user settings recommended configuration see GitHub