1, Create project section

Create a new project using Vite

yarn create vite

2, ESlint usage section

Add ESlint

yarn add eslint --dev

Initialize ESlint

yarn run eslint --init

At this time, there will be eslint verification when writing code. Let's configure the verification command of the whole project

Configure package json

  "scripts": {
      //...
    "lint": "eslint 'src/**/*.{js,jsx,vue,ts,tsx}' --fix"
  },

Perform verification

yarn run lint

At this time, you can see where the verification fails
Generally, the following problems will be prompted. Let's solve them one by one

1. error The template root requires exactly one element
2. error 'defineProps' is not defined

Solve the problem of Vue3 template root element verification

Modification eslintrc.js, replace plugin:vue/essential with plugin: Vue / vue3 recommended

  extends: [
    // 'plugin:vue/essential',
    'plugin:vue/vue3-recommended',
    'standard'
  ],

Solve the defineProps definition problem

Modification eslintrc.js, add global configuration

  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }

Save it in the execution of yarn run lint. At this time, you can see that all the verifications have passed
Attach this eslintrc.js configuration

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }
}

3, Configure runtime verification

Install the vite plugin eslint plug-in

yarn add vite-plugin-eslint --dev

Configure vite config. ts

...
import eslintPlugin from 'vite-plugin-eslint'
...
 plugins: [
      ...
      eslintPlugin({
        // to configure
        cache: false // Disable eslint caching
      })
 ]

When you restart the project, you can see where there is an error, and the console will report an error

4, Integrated prettier

yarn add prettier --dev

Add profile prettierrc.js

module.exports = {
    // According to their own project needs
    printWidth: 200, //Single line length
    tabWidth: 4, //Indent length
    semi: false, //Use a semicolon at the end of the sentence
    singleQuote: true, //single quotes 
    trailingComma: 'none' // Comma at the end of sentence
}

Configure the verification script package json

   "scripts":{
           ...
           "format": "prettier --write './**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'"
   }

After configuring and executing the yarn format, you can format the code

Resolve the conflict between eslint and prettier

In general, the rules of eslint and prettier will conflict in practice. We refer to the following plug-ins to complete

yarn add eslint-config-prettier eslint-plugin-prettier --dev

Modification eslintrc.js configuration

    ...
    extends: [
        'plugin:vue/vue3-recommended',
        'standard',
        // New, must be placed at the end
        'plugin:prettier/recommended'
    ],
    ...

Automatic formatting combined with vscode saving

Install the prettier plug-in for vscode
to configure. vscode/settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnType": true
}

Now you can format the code automatically when editing and saving

5, Git submission verification part

Add husky + lint staged

npx mrm@2 lint-staged

Configure package json

  // ...
  "lint-staged": {
    "src/**/*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }

At this time, when you try to submit the code, you will perform eslint verification. If it fails, you will report an error and cannot submit

Add GIT submission specification configuration

yarn add @commitlint/config-conventional @commitlint/cli --dev

Add configuration file commitlint config. js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

At this time, the submission will be required to indicate the type of change

Common commit submission types

Reference project git address: https://github.com/jyliyue/vite-ts-template.git