The effect you want to achieve

  • Automatically verifies and fixes code style and quality when saving files
  • Format multiple types of files
  • CodeReview is all about the code logic

Prettier vs. Lint

  • Prettier
    • Focus on code formatting: printWidth, semi, singleQuote…
    • Support multiple languages: HTML, CSS, JS, TS, JSON…
  • Lint
    • Focus on code quality checks, such as ESLint: no-var, eqeqeq, no-multiple-empty-lines…

The combination of the two helps us maintain consistency and code quality checks during development.

Prettier configuration

Responsible for checking and repairing the code format of each file. Please refer to the official website for the documents.

Install dependencies

npm install -D prettier
Copy the code

configuration.prettierrc.jsfile

module.exports = {
  tabWidth: 2.useTabs: false.printWidth: 120.semi: true.singleQuote: true.arrowParens: 'avoid'.trailingComma: 'all'.// Trailing comma
  bracketSpacing: true.// Prints Spaces in the object
  jsxSingleQuote: true.jsxBracketSameLine: false.// Put '>' on the same line in JSX
  insertPragma: false.// Insert the @format flag
  ignorePath: '.prettierignore'};Copy the code

Stylelint configuration

Responsible for style file code quality check, see the official website for the list of rules.

Install dependencies

  • Stylelint-config-standard: CSS standard provided by the official website
  • Stylelint-config-recess -order: attribute order
  • Stylelint – prettier:Based on theprettiercode-stylestylelintThe rules
  • Stylelint – config – prettier:Disable all Stylelint rules related to format, resolve conflicts between Prettier and Stylelint rules, and ensure that it is placed inextendsAt the end of the queue, so that it overrides the other configuration.
npm install -D stylelint stylelint-config-standard stylelint-config-rational-order stylelint-prettier stylelint-config-prettier
Copy the code

configuration.stylelintrc.jsfile

module.exports = {
  extends: ['stylelint-config-standard'.'stylelint-config-rational-order'.'stylelint-prettier/recommended'].rules: {
    // 'prettier/prettier': [true, { singleQuote: false }],
    // at-rule-no-unknown: shields some syntax checks such as SCSS
    'at-rule-no-unknown': [true, { ignoreAtRules: ['mixin'.'extend'.'content']}],// Disallow unknown AT rules
    'rule-empty-line-before': [
      // Require or disallow empty lines before rule declarations
      'always-multi-line',
      {
        except: ['first-nested'].ignore: ['after-comment'],},],'at-rule-empty-line-before': [
      // Require or disallow empty lines before the at rule
      'always',
      {
        except: ['blockless-after-same-name-blockless'.'first-nested'].ignore: ['after-comment'],},],'comment-empty-line-before': [
      // Requires or disallows empty lines before comments
      'always',
      {
        except: ['first-nested'].ignore: ['stylelint-commands'],},],'block-no-empty': true.// Disable empty blocks
    'declaration-empty-line-before': 'never'.// Require or disallow empty lines before statement declaration.
    'declaration-block-no-duplicate-properties': true.// Disallow duplicate attributes in declared blocks
    'declaration-block-no-redundant-longhand-properties': true.// Disallow attributes that can be abbreviated without being abbreviated.
    'shorthand-property-no-redundant-values': true.// Disallow redundant values in shorthand attributes.
    'function-url-quotes': 'always'.// Require or disallow quotes on urls.
    'color-hex-length': 'short'.// Specifies whether to use abbreviations for hexadecimal colors
    'color-named': 'never'.// Require (where possible) or disallow the use of named colors
    'comment-no-empty': true.// Disable empty comments
    'font-family-name-quotes': 'always-unless-keyword'./ / the specified font name whether to need to use quotation marks | look forward to each and every one is not keyword font names use quotation marks
    'font-weight-notation': 'numeric'.// Requires numeric or named (if possible) font-weight values
    'property-no-vendor-prefix': true.// Disallow attributes using browser engine prefixes
    'value-no-vendor-prefix': true.// Disallow adding browser engine prefixes to values
    'selector-no-vendor-prefix': true.// Disallow browser engine prefixes
    'no-descending-specificity': null.// Disallow lower-priority selectors from appearing after higher-priority selectors}};Copy the code

ESlint configuration

Responsible for js file code check and repair, please refer to the official website for the document

Install dependencies

  • Eslint: JavaScript and JSX checker
  • Eslint-plugin-import: check for ES2015 + (ES6 +) import/export syntax
  • Eslint-import-resolver-webpack causes ESlint to recognize webpack configurations, or use eslint-import-resolver-alias
  • Babel-eslint: Enables ESLint to support valid Babel code
  • Eslint-config-airbnb: A popular JavaScript code specification, eslint-config-airbnb is available for download for the React project
  • Eslint plugin – vue:Use ESLint to checkThe vue file 的 <template> 和 <script>
  • Eslint plugin – prettier:Based on theprettiercode-styleeslintThe rules
  • Eslint – config – prettier:13, Disable prettier from ESLint by making sure that the prettier rule conflicts with ESLintextendsAt the end of the queue, so that it overrides the other configuration
npm install -D eslint eslint-plugin-import eslint-import-resolver-webpack babel-eslint eslint-config-airbnb-base eslint-plugin-vue@next eslint-plugin-prettier eslint-config-prettier
Copy the code

configuration.eslintrc.js

module.exports = {
  root: true.env: {
    node: true.browser: true,},parserOptions: {
    parser: 'babel-eslint'.ecmaVersion: 8.sourceType: 'module',},extends: [
    'plugin:vue/vue3-recommended'.'airbnb-base'.'plugin:prettier/recommended'.// Avoid the conflict of the prettier rule as esLint uses the prettier rule, prettier must be placed last
    'prettier/vue'.// Avoid conflict between vue and prettier].rules: {
    'no-unused-expressions': ['error', { allowShortCircuit: true.allowTernary: true}].// Allow short circuit, three mesh
    'func-names': ['error'.'as-needed'].// Add the function name if necessary
    'no-param-reassign': ['error', { props: false}].// Function parameters can be modified
    'no-plusplus': 'off'.'no-shadow': 'off'.'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',},settings: {
    'import/resolver': {
      webpack: {
      	// Take vue/ CLI as an example
        config: 'node_modules/@vue/cli-service/webpack.config.js',}}},globals: {}};Copy the code

VSCode integration

Automatic formatting code by saving files. Files such as less, JS, vue perform stylelint or ESLint –fix simultaneously.

Project workspace.vscodedirectory

.vscode/
|- extensions.json
|- README.md
|- settings.json
Copy the code

Installing a plug-in

To install the plugin, write the extensions. Json file and allow the installation.

extensions.json

{
  "recommendations": ["octref.vetur"."esbenp.prettier-vscode"."dbaeumer.vscode-eslint"."stylelint.vscode-stylelint"]}Copy the code

Configuring the Workspace

settings.json

{
  "editor.formatOnSave": true."editor.codeActionsOnSave": {
    "source.fixAll.eslint": true."source.fixAll.stylelint": true
  },
  "eslint.enable": true."editor.defaultFormatter": "esbenp.prettier-vscode"."vetur.format.enable": false."vetur.validation.template": false."vetur.validation.interpolation": false."vetur.validation.style": false."vetur.languageFeatures.codeActions": false."vetur.validation.script": false
}
Copy the code