Vue uses eslint and auto fix

Time:2021-9-25

First, confirm that Vue cli is installed

npm install vue-cli -g
Copy code

Or experience Vue cli 3.0

npm install @vue/cli -g
Copy code

Next, create a Vue project

vue init webpack studyEslint
Copy code

Select the code specification you want to use

Next, let’s look at the eslint related parts of the project

The scaffold generates three eslint configuration files

.editorconfig

The purpose of this file is to prevent code specifications from being different due to different ides used in team collaboration. A large number of unchanged code merges and unnecessary conflicts are caused each time the code is merged. Install the plug-in (webstorm skip). Take vs Code as an example here

Go to the store to search editorconfig for vs Code for installation, so that vs code will preferentially configure indentation and other styles according to the. Editorconfig file in the project root directory, overwriting the default configuration of vs code.

The editorconfig plug-in will look up. Editorconfig level by level from the directory where the file is located until it reaches the root directory or finds the. Editorconfig file containing the attribute root = true.

After finding all. Editorconfig configuration files that meet the conditions, the plug-in will read the contents of these configuration files. The attribute in the configuration file with the shortest path from the file has the highest priority. The same file is read from top to bottom. The priority of the attribute with the same name defined at the bottom is higher than that defined at the top.

Most editors have this plug-in, which can unify the code style even if team members use different ides.

Just make sure that the. Editorconfig file is always available

Root = true // indicates that it is the root directory of the project

[*] // all files use configuration
Charset = UTF-8 // encoding format
indent_ Style = space // the tab key indents the space and table. In general, the code is space
indent_ Size = 2 // indent size = 2
end_ of_ Line = LF // line breaks with LF. By default, win is CRLF and MAC and Linux are LF
insert_ final_ Newline = true // add a blank line at the end
trim_ trailing_ Whitespace = true // remove extra spaces at the end of the line
Copy code

.eslintignore

This file is an eslint ignore file configuration. All files and folders configured to this file will be ignored by eslint’s detection rules

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
Copy code

Next is the core. Eslintrc. JS

The following is the default configuration of Vue templates

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  extends: ['plugin:vue/essential', 'airbnb-base'],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  rules: {
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never'
    }],
    // disallow reassignment of function parameters
    // disallow parameter object manipulation except for specific exclusions
    'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationsFor: [
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e' // for e.returnvalue
      ]
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      optionalDependencies: ['test/unit/index.js']
    }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

Copy code

Focus on this contentenv, you can configure the content of the development environment here, for example:

env: {
    browse: true,
    node: true
}
Copy code

Plugins are some plug-ins we need to configure. Another object is globals, which is used to configure whether global variables are variable and also has the function of declaration (pro test):

globals:{
    ping: true,
    var1: false
}
Copy code

This solves the problem of referencing a third-party library and then using its methods without declaring an error. True is the code, and this global variable can be modified, while false means it cannot be modified.

Finally, there are rules. Your personalized rules are configured here. You may feel that some specifications are too strict or unnecessary. You can modify the verification rules here, report the error level or turn it off directly. Eslint comes with a number of rules. You can use comments or configuration files to modify the rules to be used in your project. To change a rule setting, you must set the rule ID to one of the following values:

  • “Off” or 0 – close the rule
  • “Warn” or 1 – turn on the rule, error with warning level: warn (will not cause the program to exit)
  • “Error” or 2 – turn on the rule and use the error level error: error (when triggered, the program will exit)

This is a global setting method. You can also use comments in the file:

/*eslint getter-return: "error"*/
Copy code

In this way, the verification rule in this file can be modified.

Focus – Automatic fix

Here, take vscode as an example, install the plug-in of eslint and modify the configuration file of vscode

"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
"editor.wordWrap": "wordWrapColumn",
"editor.formatOnSave": true,
Copy code

It is configured with an automatic line feed rule with a length of 80 characters.

It can be used with the prettier plug-in, and the vscode configuration file can be configured

"prettier.eslintIntegration": true,
Copy code

⚠️ Personally, it is not recommended to configure prettier’s verification rules to use eslint together with airbnb or standard’s rules, which may conflict! Conflict! Conflict! Prettier follows Google’s specifications.

To learn more about eslint, visit  Eslint Chinese


vue

This work adoptsCC agreement, reprint must indicate the author and the link to this article

You’re far from it!

Recommended Today

Notes on basic learning of ruby metaprogramming

Note 1:The code contains variables, classes and methods, which are collectively referred to as language construct. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 # test.rb class Greeting  def initialize(text)   @text = text  end    def welcome   @text  end end my_obj = Greeting.new(“hello”) […]