Step 1: Integrate standard eslint into your project
First prepare a Vue project without eslint
1. Install the eslint package
npm i eslint -D
2. Initialize eslint and generate the eslint configuration file
npx eslint --init
3. Choose the configuration you need according to the question in turn.
How do you use eslint if you want?
Choose the third: inspect, find problems, and constrain code style
What modules does your project use?
Choose the first one, js (that is, the es6 module).
What is the project framework you use?
Choose the second vue.
Does your project use ts?
Choose no, not used
What environment does your code run in?
Remember to check both, run in the browser and node environment
How do you want to define the eslint style for your project?
Choose the first: use a popular style guide
The second means: generate your own style by answering questions
Which eslint style do you want to follow?
Choose the standard style (see your eslint preference here, you can also choose airbnb)
What is the format of your configuration file?
Choose the first one: use the js format
Here are the packages that need to be installed, and it asks if you want to install it now?
Select yes
Which package manager do you want to use?
Select npm
The final complete configuration is as follows:
Finally, you will find that your code has been added to various packages of eslint, and the configuration file of eslint has been generated.
However, you may be wondering at this point, did I add eslint? After all, there is no error in the operation, and git commit will not report an error.
Answer: The project status at this time is: you have integrated eslint with standard standards into your project. But you are not using it.
How to verify that eslint is already there and ready to use?
Add this line of code to the scripts in package.json: "lint": "eslint src/**/*.{js,vue} --fix"
and then run the npm run lint command, eslint will start working to detect src file and repair it. As shown, you may get the following errors:
These errors indicate that you have integrated eslint. At this point we need to proceed to the next step, which is to automatically detect and repair the code when git commit.
Step 2: Automatically trigger eslint to detect and repair when adding git commit
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.
(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 will automatically trigger the detection and detection of eslint when
git commit is completed repair. Test it:
modify some codes (must be modified, because lint-staged is to detect the files in the temporary storage area), and then git add . git commit, if the following code appears, it means that eslint is automatically triggered when git commit
Next, manually fix the errors: These errors cannot be automatically fixed by eslint, and we need to manually fix them ourselves. These eslint errors are very simple to fix, just copy them to Baidu and it will be ok. Here do not do a detailed description.
Finally, add prettier, let eslint do the detection, and let prettier mainly do the formatting. Whether it is necessary to add prettier and the benefits of adding prettier are explained in the previous article , you can jump to view it, so I won’t go into details here.
Step 3: Join prettier
1. Install the necessary packages
- prettier - prettier body
- eslint-config-prettier - Turn off rules in ESLint that conflict with Prettier
- eslint-plugin-prettier - Set Prettier rules into ESLint rules
npm i prettier eslint-config-prettier@6 eslint-plugin-prettier@3 -D
Error resolution during installation: It is ok to specify a large version. This error is obviously caused by the incorrect version matching of eslint and eslint-plugin-prettier. If your eslint version is high, no error will be reported, so you don’t need to specify a large version
2. Add a .prettierrc.js file in the root directory, the content is as follows:
module.exports = {
tabWidth: 4, // 指定每个缩进级别的空格数<int>，默认2
useTabs: false, // 用制表符而不是空格缩进行<bool>，默认false
printWidth: 300, //一行的字符数，如果超过会进行换行，默认为80
singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
endOfLine: 'auto', //避免报错delete (cr)的错
proseWrap: 'always',
semi: false, // 不加分号
trailingComma: 'none', // 结尾处不加逗号
htmlWhitespaceSensitivity: 'ignore', // 忽略'>'下落问题
}
3. 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.js. 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
const {
defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
/// ...
extends: [
'plugin:vue/essential',
'@vue/standard'
'plugin:prettier/recommended'
],
// ...
})
Summarize:
Adding eslint to existing projects is indeed more troublesome than initializing and generating eslint. It is recommended that if you really want to use eslint, you can join it from the beginning. If it is added later, it will take a lot of time and energy to deal with eslint issues.
In addition, the blog here is a demonstration using vue2. In fact, the steps of adding eslint to vue3 are exactly the same. The main problem is the version problem. Vue2 will have more version matching problems. In fact, vue3 is even simpler.
The source code address of this vue2 project: https://github.com/rui-rui-an/vue2_add_eslint_prettier