Prerequisite knowledge:
Because adding standard rules to the vue3 project needs to solve more bugs, it is recommended that you use the built-in eslint+prettier+custom rules directly. If you really need to add standard/airbnb rules to the project, you can refer to this blog: https://blog.csdn.net/qq_41581588/article/detrails/130052727 , I have already practiced it, and you can indeed use standard rules to Constraint code.
This blog mainly talks about how to add eslint+prettier+submission detection when creating a vue3 project.
1. Create a vite project
Command: npm create vite@latest
Put a picture here, this is the choice of each step:
Parse the version:
Then execute these steps:
Since there is no git warehouse generated here, we git init to generate a warehouse. Then git add ., git commit-m "" to make the first commit.
At this point our project status is: vue3+ts+vue-router+pinia+eslint+prettier. But there is one thing, it is not possible to actively detect the code when git commit, only through npm run lint for code detection, npm run format for code repair.
After running npm run lint, I found that there was no change (there were not many rules added in eslint, which resulted in passing), but when I ran npm run format, I found that it did format for us (according to the content in the .prettierrc.json file formatted).
The reason for this is that the vue project created in this way only adds eslint and prettier, but does not connect the two, that is, does not add prettier to eslint.
2. Add prettier rules to eslint
At this point we need to install (prettier is already installed, so there is no need to repeat the installation)
- eslint-config-prettier - Turn off rules in ESLint that conflict with Prettier
- eslint-plugin-prettier - Set Prettier rules into ESLint rules
npm i eslint-config-prettier eslint-plugin-prettier -D
Modify the ESLint configuration to make Eslint compatible with the Prettier rule
plugin:prettier/recommended The configuration needs to be noted that it must be placed at the end. Because the rules introduced later in extends will override the previous rules. That is to say, you can define your own style code in .prettierrc.json. At that time, the local prettier plug-in will be formatted according to this file, and the prettier installed by the project will also be formatted according to this file. And where the eslint style conflicts with the prettier style, the prettier will be the main one
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting',
'plugin:prettier/recommended'
],
parserOptions: {
ecmaVersion: 'latest'
},
rules: {
}
}
At this point, if you run npm run lint again, you will find that it has been formatted for you. We just need to add commitLint.
3. Add commitLint
Tool pre-knowledge, tool introduction:
- lint-staged is a tool for checking files that have been put into the Git temporary storage area
- Husky can provide the ability to monitor Git operations and execute script code
One: Install and configure lint-staged: implement style checks specifically for files in the git temporary storage area
(1). Install dependent packages
npm i lint-staged --save-dev
(2). Configure lint-staged in package.json, use it to call eslint and stylelint to check the code in the temporary storage area
{
// ...
"lint-staged": {
"*.{vue,js}": [
"npm run lint"
]
}
}
Two: Install and configure husky: implement lint-staged when git is submitted
(1). Install dependent packages
npm i husky --save-dev
(2) Configure shortcut commands in package.json to generate husky related files when installing project dependencies
{
// ...
"scripts": {
// ...
"postinstall": "husky install"
},
}
(3) Executing npm i after configuration will generate a .husky/_ directory in the project root directory.
npm i
(4) Execute the following code and use husky to generate a monitoring hook script for git operations
npx husky add .husky/pre-commit "npx lint-staged"
After successful execution, the script file .husky/pre-commit (can be seen in vscode) will be generated, which contains the command line statement: npx lint-staged
At this point, you have completed git commit to automatically trigger eslint detection and repair. Test it:
Modify some codes (must be modified, because lint-staged detects the files in the temporary storage area), then git add . git commit, if the following code appears, it means that eslint is automatically triggered when git commit
Notice
It is worth noting that a. The project created in this way has few rules, which is suitable for customizing eslint rules. Because the newly initialized eslint rules only add some recommended eslint. If you need custom rules, you can add your own rules in the rules of .prettierrc.json or .eslintrc.cjs. Rules defined in .prettierrc.json > rules defined in .eslintrc.cjs
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
b. For projects created in this way, it will be troublesome to add standard rules yourself . If you use this method (customize with create-vue) to create a project and then use npx eslint --init to initialize the eslint of standard rules, There will be a lot of error reports that need to be resolved (there is no need to step on this pit) .
c. If you really need standard or airbnb rules. You can read my next article
Replenish
When you are working on the vue3 project, you recommend these plug-ins to cooperate with the development, and the development is fast.
