1, Code formatting specification
Zhiyao novel network https://www.huou.infoAt present, the vetur plug-in used in the project has built-in prettier formatting, and the prettier code formatter plug-in can also be installed. Eslint also includes the function of checking some code styles. Some rules of eslint and prettier conflict, resulting in confusion in formatting, so the code formatting specification must be unified
1. Configuration priority in vscode
- Default profile (lowest priority)
- User profile (priority)
- Project profile (highest priority)
In order to unify everyone's code style, the configuration files in the project are used as configuration items. Since the main function of ESLint is code quality check, and the main function of Prettier is code style check, do not configure rules related to code style in ESLint.
- prettier. A very popular code formatting tool. You can easily find various plug-ins to implement it in the editor. Here, use it to format the code before submitting the code.
- eslint. Code checking tool. Eslint can also be responsible for some code format checking, but prettier has done a good job, so I don't use eslint's code format checking, but let it be responsible for code error checking.
2. Resolve configuration conflicts
npm i eslint-config-prettier eslint-plugin-prettier -D
Eslint config prettier turns off the options in eslint that conflict with prettier. Eslint plugin prettier sets the prettier rule to the rule of eslint and prompts those that do not comply with the rule
3. Pretierrc profile description
//.prettierrc.js
module.exports = {
printWidth: 160, //The length of each line of the editor is 80 by default
tabWidth: 4, //The width of tab. The default value is 2
useTabs: false, //Whether to use tab for code indentation. The default is false
semi: true, //Whether to use semicolon. The default is true and semicolon is used
singleQuote: true, //Whether to use single quotation marks. The default is false
quoteProps: 'as-needed', //Use as needed for the quotation marks of object attributes. Only use consistent when necessary. If one attribute requires quotation marks, the quotation marks are required to preserve the user's input
jsxSingleQuote: false,
trailingComma: 'none', //Comma at the end none no comma at the end es5 es5 leave all where valid and add commas wherever possible
bracketSpacing: true, //Spaces in parentheses of literal objects, default true - example: {foo: bar} false - Example: {foo: bar}.
jsxBracketSameLine: false,
arrowParens: 'avoid', //Parentheses always avoid in arrow function
htmlWhitespaceSensitivity: 'ignore',
vueIndentScriptAndStyle: false,//Indent < script > and < style > tags in vue
endOfLine: 'auto', //End of line identification
eslintIntegration: true, //Don't let prettier use eslint's code format for verification
}
4. eslint configuration file description
//.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
"plugin:prettier/recommended",
// '@vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 'vue/script-indent': ['error', 4, { 'baseIndent': 1 }],
// "quotes": [2, "single", { "avoidEscape": true }],
// Replace the rule of eslint with prettier
"prettier/prettier": "error",
"no-var": 2,//Disable var and replace it with let and const
"no-unused-vars": [2, { "args": "none" }], //Eliminate unused variables and do not check the parameters of the function
"no-redeclare": 2, //Multiple declarations of the same variable are prohibited
"no-dupe-keys": 2,//Duplicate keys are not allowed when creating object literals
'eqeqeq': ['error', 'always', { null: 'ignore' }], // Force use of congruence
},
parserOptions: {
parser: 'babel-eslint',
"ecmaVersion": 6,
"sourceType": "module"
}
}
3, Code submission specification
1. Install husky and lint stage
//The configuration method of husky's new version is completely different. The version number is locked here npm i husky@4.2.5 lint-stage -D
Husky can prevent non-standard code submission and push, and ensure that the local code has passed the check before it can be pushed to the remote.
Lint stage is used to scan only the currently modified files, that is, the files added to the stage area by git add can be scanned to complete the inspection of incremental codes
2. Configure commitlint submission rules
npm i @commitlint/cli @commitlint/config-conventional -D
//commitlint.config.js
// https://commitlint.js.org/#/
module.exports = {
extends: [
"@commitlint/config-conventional"
],
rules: {
// 'Name: [level,' always', 72] ', level can be 0, 1, 2, 0 is disable, 1 is warning, 2 is error, the second bit is whether to apply or not, optional always| never, and the third bit is the value of the rule
// Update: update a function (not feat, not fix)
// feat: new features
// fix: bug fix
// Style: style adjustment
// Merge: Branch merge
// revert: rolls back an earlier commit
// build: the main purpose is to modify the submission of the project construction system (such as glup, webpack, rollup configuration, etc.)
// ci: the main purpose is to modify the submission of project continuous integration process (such as Travis, Jenkins, gitlab, ci, Circle, etc.)
// docs: document update
// perf: performance, experience Optimization
// Refactor: refactor code (no new features, no bug fixes)
// Test: add test cases or update existing tests
// chore: other types that do not belong to the above types
'type-enum': [2, 'always', ['update', 'feat', 'fix', 'style', 'merge', 'revert', 'build', 'ci', 'docs', 'perf', 'refactor', 'test', 'chore']],
'type-case': [0], //type lowercase
'type-empty': [0], //type is not empty
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72]
}
};
3. Configure package JSON file
{
"name": "name",
"version": "0.1.0",
"description": "description",
"author": "author",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"src/**/*.{js,jsx,vue,json,css,less,scss,sass}": [
"prettier --write",
"eslint --fix",
"git add"
]
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.6.5",
"element-ui": "^2.12.0",
"md5": "^2.2.1",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@commitlint/cli": "^12.1.4",
"@commitlint/config-conventional": "^12.1.4",
"@vue/cli-plugin-babel": "^3.5.0",
"@vue/cli-plugin-eslint": "^3.5.0",
"@vue/cli-plugin-unit-mocha": "^3.5.0",
"@vue/cli-service": "^3.5.3",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-plugin-component": "^1.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"compression-webpack-plugin": "^2.0.0",
"eslint": "^5.8.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^5.0.0",
"husky": "^4.2.5",
"lint-staged": "^11.0.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"uglifyjs-webpack-plugin": "^2.1.2",
"vue-template-compiler": "^2.5.21"
}
}
4. Submit code
husky will invoke the pre-commit hook before you submit it and execute lint-staged. If the code does not conform to the rules of prettier configuration, it will be formatted. Then use the rules of eslint to check. If there are any that do not comply with the rules and cannot be repaired automatically, the submission will be stopped. If they all pass, they will add the code to the stage and then commit.
git add . git commit -m "feat: commit content" git push