How to implement automatic formatting using Eslint in Vue-cli

This article mainly introduces the method of Vue-cli Eslint automatically formatting the code in vscode. Now I share it with you and give it as a reference.

Another very important function of the editor is code formatting. VS Code provides formatting of common files by default, such as .js, .html, etc.

Add formatting support for .vue files

Here we add formatting support for .vue files.

1. Install the Vetur plug-in
2. Add the following rules in the settings of VS Code:

{
   "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }
}

Here is Set the formatting plug-in prettier used by Vetur by default. In this way, formatting support is provided for html and javascript codes in .vue files.

vue eslint code automatic formatting

1. vue-cli code style is JavaScript Standard Style code inspection specifications are strict, if you are not careful It cannot run. Use eslint's autoFixOnSave to automatically format the code when saving it

2. VSCode expansion plug-in recommendation (applicable to HTML, Node, Vue, and React development)
   

Recommended reading:

1. vscode plug-in recommendation

2. JavaScript Standard Style code style specification
   

Text eslint automatic formatting

Configuration environment:

npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue

Create the file under the project and path: .eslintrc | .eslint.js

//　添加插件
"plugins": [
  "vue"
]

Add in your vscode settings file:

1. Add the eslint plug-in to vscode
2. Add the vetur plug-in to vscode
3. Modify your setting.json

// 添加进你的vscode的 setting.json

"eslint.autoFixOnSave": true,
"eslint.validate": [
  "javascript",{
    "language": "vue",
    "autoFix": true
  },"html",
  "vue"
],

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use webpack template in vue-cli to solve project construction and packaging path problems

In vue Zhongbus Global Event Center (detailed tutorial)

##Detailed interpretation of change detection issues in the Angular series

The above is the detailed content of How to implement automatic formatting using Eslint in Vue-cli. For more information, please follow other related articles on the PHP Chinese website!