Detailed explanation of how to use eslint in vue

1. Description

eslint helps us check whether the code is standardized. This article uses Prettier rules (as well as standardjs , airbnb and other rules). If you want to use the default rules of eslint or define your own rules, you don’t need to download prettier related dependency packages (at the same time, delete the related configuration with 'prettier' in .eslintrc.js. If you don’t delete the configuration and don’t download prettier, an error will be reported when starting the project). I downloaded the eslint plug-in in the vscode environment, which can format non-standard code according to the rules when saving.

2. Download related dependency packages

"eslint"

"babel-eslint"

"eslint-config-prettier"

"eslint-loader"

"eslint-plugin-prettier"

"eslint-plugin-vue"

3. Configuration file .eslintrc.js (there are other ways to configure rules)

Create a new file .eslintrc.js in the project root directory with the following content (you can configure it according to your needs):

module.exports = {
  root: true, // Only apply this rule to the current project parserOptions: {
    "parser": "babel-eslint",
    "sourceType": 'module', // set to "module", "script" (default)
    // "ecmaVersion": 6 // Enable es6 syntax, do not automatically enable es6 global variables},
  parser: "vue-eslint-parser", // To identify .vue files, you need to download eslint-plugin-vue
  // The environment you want to enable env: {
    "browser": true,
    "node": true,
    "es6": true
  },
   //Inherit plugin rules extends: [
    "eslint:recommended", // Start the default rule marked as "√" "plugin:prettier/recommended" // Rules written by others, dependent on package eslint-config-***, here is the prettier rule],
  // Configure the list of plugin names. Plugin names may omit the 'eslint-plugin- ' prefix.
  plugins: [ 
    'vue', // eslint-plugin-vue
    'prettier' // eslint-plugin-prettier
  ],
  // Custom rules have the highest priority "rules": {
    "no-console": 0
  }
}

4. Automatically format code when saving in vscode (version 1.44.0) configuration

Download the eslint plugin for vscode, open the settings.json file, and add:

"editor.codeActionsOnSave": {

"source.fixAll.eslint": true

},

The configuration of other versions may be slightly different. For example, the configuration shown in the figure will take effect on version 1.36.1.

5. Add scripts command in package.json: eslint detects and automatically fixes

"eslint": "eslint --fix --ext .js,.vue --ignore-path .eslintignore ."

eslintignore is the file ignored during configuration detection

6. Close eslint verification for the project

Here we take vue-cli3 and above as an example. Just add the following configuration in vue.config.js

lintOnSave: false

7. eslint Chinese documentation

https://eslint.bootcss.com/docs/user-guide/getting-started

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!