Shielding annoying eslint errors in vue CLI 3 Development

Problem

During vue development, especially when you read and analyze the Vue code of earlier versions of others, you will often encounter an annoying eslint error that is full of screens. The role of eslint is not described in detail. Most of the online reference documents are for earlier vue CLI tool projects. They do not work in the project generated by my latest vue CLI 3. In desperation, I carefully studied the official documentation of Vue CLI 3 and finally found the best answer.

Solution

Vue, a front-end framework, is faster than react and angular. However, in the middle and late stages of practice, there are still many actual engineering problems that need to be overcome by one piece. Vue CLI, a tool called "scaffolding", must be overcome. However, this tool version is updated very quickly. Observe many cases on the network and reference books on hand, even the latest, mainly based on the 2.x version. The current 3.x version is naturally different from the 2.x version when solving the problem as shown in the figure. In the project generated by vue CLI 3, you only need to create the configuration file vue. config. js in the project root directory, and then add the following line to it to shield the annoying eslint prompts. Tip: This method is directly mentioned in reference 2.

// vue.config.jsmodule.exports = {    lintOnSave: false}

Supplement

Various references found on the network generally refer to modifying various rule switches in the file. eslintrc. JS, as shown below:

module.exports = {  root: true,  env: {    node: true  },  ‘extends‘: [    ‘plugin:vue/essential‘,    ‘@vue/standard‘  ],  rules: {    ‘no-console‘: process.env.NODE_ENV === ‘production‘ ? ‘error‘ : ‘off‘,    ‘no-debugger‘: process.env.NODE_ENV === ‘production‘ ? ‘error‘ : ‘off‘,    ‘no-mixed-spaces-and-tabs‘: [0,false],    ‘no-tabs‘:‘on‘,    ‘eol-last‘:0,    ‘space-before-function-paren‘: 0  },  parserOptions: {    parser: ‘babel-eslint‘  }}

Note that the preceding section in the Rules Section does not work if you modify only these sections in CLI 3!

In addition, after the above lintonsave method's switch control, I repeatedly modified and run yarn serve to re-compile the project under the webstorm built-in command line. In many cases, it still seems a bit problematic, I suspect there are some bugs in vue CLI 3 (the version I used is 3.0.5). The latest version is 3.1.1.

Reference

1. https://cli.vuejs.org/guide/
2. https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint

Shielding annoying eslint errors in vue CLI 3 Development