This is the 30th day of my participation in the August Text Challenge.More challenges in August
Also used before, but did not understand, at this time to write this article I am also muddled, the article may have more loopholes, welcome to use the experience of the big men give directions
preface
Vue2.5.2 + WebPack3.6.0 (if you are a React project, you need to install other packages. I didn’t explore this.)
Using ESLint and Prettier in conjunction with formatting, they both require VSCode to install the extension and the corresponding package inside the project to take effect
Vscode installs the extension
These two are a must!
Install the corresponding within the projectprettier
andeslint
package
The installation package
{
"devDependencies": {
"prettier": "^" 2.3.2."eslint": "^ 7.32.0"."eslint-config-prettier": "^ 8.3.0"."eslint-loader": 2.1.1 ""."eslint-plugin-prettier": "^ 3.4.1 track"."eslint-plugin-vue": "^ 7.17.0"}}Copy the code
npm install --save-dev prettier eslint eslint-loader eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier
Copy the code
Generate the ESLint configuration file
.\node_modules.bin\eslint --init
Copy the code
Eslintrc. Json will initialize the configuration according to the option you selected.
This is the generated initial configuration file
/.eslintrc.json
{
"env": {
"browser": true."es2021": true
},
"extends": [
"eslint:recommended"."plugin:vue/essential"]."parserOptions": {
"ecmaVersion": 12
},
"plugins": [
"vue"]."rules": {}}Copy the code
configuration.eslintrc.json
Rules file
Because I’m formatting with Prettier, I need to make some adjustments to the ESLint configuration file
/.eslintrc.json
{
"env": {
"browser": true."es2021": true
},
"extends": [
"plugin:vue/essential"./ / the meaning of "plugin: prettier/it" : enable eslint - plugin - prettier and eslint - config - prettier, the editor shows error, make sure that this is to expand the final configuration of the array
// eslint-plugin-prettier Uses prettier as the esLint detection rule
// eslint-config-prettier Closes all rules that aren't necessary or might conflict with Prettier
"plugin:prettier/recommended"]."parserOptions": {
"sourceType": "module".// Allow import using import
"ecmaVersion": 12
},
"plugins": ["vue"]."rules": {
Prettier doesn't have some rules that prettier doesn't have
"prettier/prettier": "error"."no-ternary": "off"."no-unused-vars": "error" // Do not declare unused variables. Prettier doesn't have this, so prettier needs to write it here}}Copy the code
Eslint lint lint lint lint lint lint lint lint lint lint lint lint lint
configuration.eslintignore
Ignore list file
There are many folders that don’t actually need esLint detection, such as node_modules, dist files, etc. The.eslintignore syntax is the same as.gitignore. See this article: Portals
/.eslintignore
/node_modules/
/.vscode/
/static_dist/
/static_init/
/static_dev/ *! /static_dev/noh_app/script/plugin2x/saxmodule/intelligentCockpit/Copy the code
configuration.prettierrc.json
Format style file
Main Configuration Common configurations are as follows:
/.prettierrc.json
{
"tabWidth": 4."printWidth": 160."useTabs": false."endOfLine": "auto"."singleQuote": false."semi": true."trailingComma": "none"."bracketSpacing": true
}
Copy the code
Configure the VScode Settings file
{
// eslint configuration items that are automatically fixed when saved
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// By default, prettier is used to format supported files
"editor.defaultFormatter": "esbenp.prettier-vscode".// Automatically set the ESLint workspace
"eslint.workingDirectories": [{"mode": "auto"}].// Save formatting
"editor.formatOnSave": true
}
Copy the code
The effect
After configuring the above, remember to restart vscode, it should not be too much of a problem, I have just walked through the test project.
Here is an example of how I can fix ESLint errors by using CTRL + S to save.
Waka, comfortable yuppie, no longer have to worry about code style inconsistency
summary
The main idea behind esLint +prettier is to give prettier the job of testing and formatting, while prettier’s rule is the rule where prettier is used, so esLint uses “prettier/prettier”: “Error” would show Prettier’s error, but prettier doesn’t have rules, such as not declaring unused variables, so I use esLint’s rule, just add it later. While this isn’t enough, esLint also needs to fix automatically, save formatting, and default formatting to prettier. Maybe I understand the wrong, welcome correction.