Install Eslint and Prettier

yarn add eslint -D
yarn add prettier -D
Copy the code

Set vscode setting.json

.// Format when saving
"editor.formatOnSave": true.// Check the file
"eslint.validate": [
	"javascript"."javascriptreact"."typescript"
	"typescriptreact"
	"vue-html",].// Automatically correct when saving
"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true
},
// By default, prettier is used for all files
"editor.defaultFormatter": "esbenp.prettier-vscode".// Specify typescript file formatting conventions
"[typescript]": {
	"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Copy the code

**.eslintrcand.prettierrc**

Refer to the official documentation

Prettier official document

Eslint official documentation

4. Prettier is used with Eslint

As you know, ESLint can check not only code quality, but also code style.

Prettier probably doesn’t like Prettier.

Eslint-plugin-prettier can be used to make ESLint use the prettier style

The installation

yarn add eslint-plugin-prettier -D
Copy the code

.eslintrc.json

{
  "plugins": ["prettier"]."rules": {
    "prettier/prettier": "error"}}Copy the code

What if it conflicts with an existing plug-in

The eslint-config-prettier configuration allows you to turn off lint options that are unnecessary or conflict with Prettier. This way we don’t see some errors appearing twice at the same time. Make sure that this configuration is the last item of extends when you use it.

.eslintrc.js


{
  extends: [
    'standard', // Use standard for code specification
    "prettier"]},Copy the code

Use both of the above configurations

If you use both of the above configurations, you can simplify your configuration in the following ways.

.eslintrc.js

{
  "extends": ["plugin:prettier/recommended"]}Copy the code

V. Complete configuration in vue-CLI project, using standard as code specification

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    es6: true
  },
  extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard',
    // 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.
    'plugin:vue/essential',
    "plugin:prettier/recommended",].// required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "prettier/prettier": "error".// allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}
Copy the code