First, code formatting specifications

Prettier formatting can also be installed as the Prettier Code Formatter plug-in. Eslint also contains some code style checking. Eslint and Prettier already have some rules that contradict prettier. Resulting in formatting chaos, so code formatting conventions must be unified

1. Configuration priority in vscode

  • Default configuration file (lowest priority)
  • User profile (priority)
  • Engineering profile (highest priority)

In order to unify everyone’s code style, use configuration files in the project as configuration items. Don’t configure code style rules in ESLint because ESLint’s primary function is code quality checking and Prettier’s primary function is code style checking.

  • Prettier. A very popular code formatting tool, you can easily find the various plug-ins to implement it in the editor, here use it to do code formatting before submission.
  • Eslint. Code review tool. Eslint could also do some formatting, but Prettier already does that pretty well, so I didn’t use ESLint for formatting, just for error checking.

2. Resolve configuration conflicts

npm i eslint-config-prettier  eslint-plugin-prettier -D
Copy the code

Eslint-config-prettier Disables an option in ESLint that conflicts with Prettier. Eslint-plugin-prettier sets the prettier rule as esLint’s rule, prompting noncompliance

3, prettierrc Configuration file description

//.prettierrc.js module.exports = {printWidth: exports, default 80 tabWidth: 4, default 2 useTabs: //.prettierrc.js module.exports = {printWidth: exports, default 80 tabWidth: 4, default 2 useTabs: //.prettierrc.js module. False, // Whether to indent code with TAB, default false semi: true, default true, use semicolon singleQuote: true, // Whether to use single quotes, default is false quoteProps: 'as-needed', // Use as-needed quotes for object attributes only when it is necessary to use consistent, all attributes must be quoted to preserve user input jsxSingleQuote: False, trailingComma: 'none', // trailingComma none: no comma at the end es5 es5 valid places keep all with comma wherever possible bracketSpacing: False - Example: {foo: bar}. JsxBracketSameLine: {foo: bar}. False, arrowParens: 'get', / / arrow function of bracket always get htmlWhitespaceSensitivity: 'ignore' vueIndentScriptAndStyle: False,// If the <script> and <style> tag in vue is indent endOfLine: 'auto', // at the end of the line mark eslintIntegration: True, // Don't let Prettier use esLint's code format to verify}Copy the code

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}], // Use prettier instead of ESLint's rule "prettier/prettier": "Error ", "no-var": 2,// disable var, use let and const instead of "no-unused-vars": [2, {"args": "None"}], // Eliminate unused variables without checking function arguments "no-redeclare": 2,// disallow multiple declarations of the same variable "no-dupe-keys": 2,// disallow duplicate keys 'eqeqeq' when creating object literals: ['error', 'always', {null: 'ignore'}], // Enforce congruities}, parserOptions: {parser: 'babel-eslint', "ecmaVersion": 6, "sourceType": "module" } }Copy the code

Ii. Code submission specifications

1. Install husky and Lint-stage

// The new husky version is configured in a completely different way, where the version number is locked NPM I [email protected] lint-stage-dCopy the code

Husky prevents non-compliant code submissions and pushes, ensuring that local code has been checked before it can be pushed remotely.

Lint-stage will scan only the files that have been modified. Git add will scan only the files that have been added to the stage

2. Configure commitLint commit rules

npm i @commitlint/cli @commitlint/config-conventional -D
Copy the code
//commitlint.config.js // https://commitlint.js.org/#/ module.exports = { extends: [ "@commitlint/config-conventional" ], rules: {/ / 'name: [level,' always', 72] ', optional level 0, 1, 2, 0 to disable, 1 to warning, 2 for the error, the second for the application or not, the optional always | never, // update: new feature (feat) // fix: bug (feat) // style: // Merge: branch merge // revert: rollback of a previous commit // build: The main purpose is to modify the commit of the project build system (e.g. glUP, webpack, rollup configuration, etc.) // ci: The main purpose is to modify the submission // docs: document update // perf: performance, experience optimization // refactor: // Test: Add test cases or update existing tests // Chore: Other types that do not belong to the above type 'type-enum': [2, 'always', ['update', 'feat', 'fix', 'style', 'merge', 'revert', 'build', 'ci', 'docs', 'perf', 'refactor', 'test', 'chore']], 'type - case: [0], / / the type lower case' type - empty: [0], / / type for empty 'scope - empty: [0],' scope - case: [0], 'subject-full-stop': [0, 'never'], 'subject-case': [0, 'never'], 'header-max-length': [0, 'always', 72] } };Copy the code

3. Configure the 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 - the router" : "^ 3.0.3 vuex", ""," ^ 3.0.1 "}, "devDependencies" : {" @ Babel/plugin - syntax - dynamic - import ":" ^ 7.2.0 ", "@ commitlint/cli" : "^ 12.1.4 @ commitlint/config", "- but" : "^ 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 will - 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 -", "plugins" : "^ 2.1.2", "vue - the template - the compiler" : "^ 2.5.21"}}Copy the code

4. Submit code

Husky will call pre-commit hooks before you commit, execute Lint-staged code, and format code if it doesn’t conform to Prettier configuration. It will then check with esLint’s rules and stop the commit if it doesn’t conform to the rules and can’t be fixed automatically. If they pass, the code is added to the stage, and then commit.

Git add. Git commit -m "feat: commit "git pushCopy the code