# ESLint

Whether it's a multi-person collaboration or personal projects, code specifications are important. It can not only largely avoids basic syntax errors, but also ensures the readability of the code.

# Config

All configuration files are in .eslintrc.js. The basic eslint rules of this project is based on the official eslint rules of vue eslint-config-vue but made minor changes. You can customize your configuration according to your needs.

Such as: my personal or project team is accustomed to using two spaces, but you may feel that the four spaces are more pleasing, and you can make the following changes.

Enter the project of .eslintrc.js, find indent,and then set it to 4 。There are a variety of configuration information, see details ESLint Documention。

# Cancel ESLint

If you really don't want to use ESLint,you just find config/index.js. And then set useEslint: true to useEslint: false .

# Configure ESLint in vscode

Sharp tools make good work! Personally recommend eslint+vscode to write VUE, there is definitely a very cool

Every time you save your code, vscode will be able to mark red areas that do not conform to the eslint rules, and make some simple self-fixes at the same time. The installation steps are as follows:

First install the eslint plugin

After we have installed ESLint, we back to VSCode to set up . Go to Code > Preferences > Settings and add the following configuration.

    "files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       { "language": "vue", "autoFix": true }
     ],
     "eslint.options": {
        "plugins": ["html"]
     }

Everyone and the team have their own code specification, unification is good, to create their own eslint rules and upload it to the npm will be fun. Such as ElemeFE config or Vue official config.

vscode plugin and configuration recommendations

# webpack

You can also configure eslint-loader to let you know if you have any errors in the command line or interface when you don't match eslint config.

{
 test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
}

# Auto fix

npm run lint -- --fix