This article explains how to configure eslint for code checking in VSCode and how to support.vue single files.

ESLint installation

1. In the project root directory, install and initialize ESLint

$NPM install eslint --save-dev $./node_modules/. Bin /eslint -- --init // How would you like to configure ESLint? Use a popular style guide 2.? Which style guidedo you want to follow? Standard
3.? What format do you want your config file to be in? JavaScriptCopy the code

2. Perform the preceding steps to generate the. Eslintrc.js file in the root directory

module.exports = {
    "extends": "standard"
};Copy the code

3. Run the following command to try esLint detection and repair for.js files

./node_modules/.bin/eslint -- --fix /path/to/file.jsCopy the code

4. Install the VScode plugin ESLint

The plugin can automatically detect esLint and save fixes while editing, eliminating frequent command line typing and improving efficiency

After installing ESLint and restarting vscode, you can open a js file in vscode and check for errors with red flags and ESLint prompts.Copy the code

5. Set automatic repair when saving open vscode -> preferences -> Settings

Add the following configuration to save automatically.

 "eslint.autoFixOnSave": true."eslint.validate":[
    {
       "language": "javascript"."autoFix": true
    }
    "javascriptreact",]Copy the code

Note that there is a paragraph in the ESLint documentation that says: eslint.autoFixOnSave – enables auto fix on save. Please note auto fix on save is only available if VS Code’s files.autoSave is either off, onFocusChange or onWindowChange. It will not work with afterDelay

AutoSave takes effect only when vscode files. AutoSave is not set to afterDelay, which is off by default

Through the above steps, we have implemented the js file editing detection in VSCode, and save automatic fixes.

Check Vue single file

1. Install the VSCode plug-in Vetur first

The plugin can highlight three blocks of Vue code separately and provide scaffolding commands to quickly generate a Vue single-file template. In combination with ESLint, all three blocks of code can be checkedCopy the code

2. Install the ESlint-HTML plugin and modify the configuration file. If the plugin is not installed, the HTML code in the vUE file cannot be correctly identified

$NPM install eslint-plugin-html --save-dev eslintrc.js module.exports = {"extends": "standard"."plugins": ["html"]};Copy the code

Vscode -> Preferences -> Settings

"files.associations": {
     "*.vue": "vue"
},

"eslint.validate": [
    "javascript"."javascriptreact",
    {
        "language": "vue"."autoFix": true}]Copy the code

After the above steps,.vue files can happily be esLint checked and automatically fixed by saving. Can improve the future work efficiency.

Additional configuration items

  • Es6 support, such as the import() function

    //.eslintrc.js module.exports = {"extends": "standard"."plugins": ["html"]."parser": "babel-eslint"."env": { "es6": true },
  "rules": {
      //"off" or 0 - turn the rule off
      //"warn"Or 1-turn the rule on as a warning (doesn't affectexit code)
      //"error" or 2 - turn the rule on as an error (exitcode is 1 when triggered) //require the use of === and ! = ="eqeqeq": 0."one-var": 0}};Copy the code

  • Vue single file style syntax configuration

If SCSS is used in style, esLint will say an error by default. In this case, you need to set the lang property of style

<style scoped lang='scss'>

</style>Copy the code

The above