Vite configuration eslint specification code

After experiencing the collaborative development of relatively large projects , Code specification has become a thorny problem in team collaborative development . today , Prepare to sort out a copy from the editor -> Specification summary during code writing .

One 、 Uniform code style

It is recommended to use EditorConfig To configure , To standardize different editors , Different editor configurations , Caused by inconsistent code styles .

Project root creation .editorconfig The configuration file

#  Indicates that it is the top layer  EditorConfig  The configuration file 
root = true

[*] #  Indicates that all documents are applicable 
charset = utf-8 #  Set the file character set to  utf-8
indent_style = space #  shrink 
indent_size = 2 #  Indent size 
end_of_line = lf #  Controls the type of line breaks (lf | cr | crlf)
trim_trailing_whitespace = true #  Remove any white space characters at the beginning of the line 
insert_final_newline = true #  Always insert a new line at the end of the file 

[*.py] #  Means only  py The following rules apply to this document 
max_line_length = off
trim_trailing_whitespace = false

Pay attention here , If used VSCode Need to download plug-ins EditorConfig VS Code , Other compilers ( WebStorm,IDEA ), Configure directly .

Two 、 Integrate Eslint To configure

1. install

   npm i eslint -D
   yarn add eslint --dev

2. Initialize configuration , According to the current development environment , The framework and the style of the project determine the configuration items

   npx eslint --init

   (1)： How to use Eslint, Here we choose the third ： Check grammar 、 Identify problems and enforce code style

   

   (2)： The type of modularity used in the current project , We choose Javascript modules

   

   (3)： The framework used in the current project ,Vue.js

   

   (4)： Whether to use Typescript, The environment we built here has not been configured TS, Skip for now

   

   (5)： Operating environment , Here we choose browser

   

   (6)： Choose a code style guide , Here we choose the more popular Airbnb

   
   

   (7)： The final choice Javascript style

   

   (8)： Initialization finished , What kind of plug-in is needed for the installation of the video , Here we choose yarn

   

   (9)： add to Vite Automatically detect when running eslint standard

   yarn add vite-plugin-eslint --D

   import {
          defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import eslintPlugin from 'vite-plugin-eslint'
   
   export default defineConfig({
         
   	 plugins: [
   	    vue(),
   	    //  Add the following configuration items , In this way, you can check  eslint  standard 
   	    eslintPlugin({
         
   	      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
   	    })
   	  ]
   })
   

   (10)： To configure eslintrc.js file

   1. install babel plug-in unit

      yarn add @babel/core @babel/eslint-parser --dev

   2. To configure Eslint Basic configuration

      module.exports = {
              
        env: {
              
          browser: true,
          node: true
        },
        extends: [
          "eslint:recommended", //  Use the recommended eslint
          'plugin:vue/vue3-recommended' //  Use plug-in support vue3
        ],
        parserOptions: {
              
          parser: '@babel/eslint-parser',
          sourceType: 'module',
          ecmaVersion: 12,
          allowImportExportEverywhere: true, //  Don't limit eslint Yes import Use location 
          ecmaFeatures: {
              
            modules: true,
            legacyDecorators: true
          },
          requireConfigFile: false //  Resolve errors ：vue--Parsing error: No Babel config file detected for
        },
        plugins: [
          'vue'
        ],
        rules: {
              
        	...
        }
      }
      

   3. To configure Eslint rules The rules
      Here, the corresponding rules can be configured according to the team specifications , Post some of my rules . More configurations can be found on the official website ：eslint rules To configure

      'semi': ['warn', 'never'],           //  Semicolons are not allowed at the end 
      'no-console': 'warn',                //  It is forbidden to appear console
      'no-debugger': 'warn',               //  It is forbidden to appear debugger
      'no-duplicate-case': 'warn',         //  No repetition case
      'no-empty': 'warn',                  //  Null statement blocks are prohibited 
      'no-extra-parens': 'warn',           //  Unnecessary brackets are forbidden 
      'no-func-assign': 'warn',            //  No right Function Statement reassignment 
      'no-unreachable': 'warn',            //  It is forbidden to appear [return|throw] Code block after 
      'no-else-return': 'warn',            //  prohibit if In the sentence return The sentence is followed by else block 
      'no-empty-function': 'warn',         //  Empty function blocks are forbidden 
      'no-lone-blocks': 'warn',            //  Disable unnecessary nested blocks 
      'no-multi-spaces': 'warn',           //  Multiple spaces are prohibited 
      'no-redeclare': 'warn',              //  It is forbidden to declare the same variable more than once 
      'no-return-assign': 'warn',          //  Do not use return The assignment statement is used in the statement 
      'no-return-await': 'warn',           //  Disable unnecessary [return/await]
      'no-self-compare': 'warn',           //  Prohibit self comparison expressions 
      'no-useless-catch': 'warn',          //  Prohibit unnecessary catch Clause 
      'no-useless-return': 'warn',         //  Prohibit unnecessary return sentence 
      'no-mixed-spaces-and-tabs': 'warn',  //  No spaces and tab The mixed indent of 
      'no-multiple-empty-lines': 'warn',   //  No more than one line is allowed 
      'no-trailing-spaces': 'warn',        //  No space after the end of a line 
      'no-useless-call': 'warn',           //  Prohibit unnecessary .call() and .apply()
      'no-var': 'warn',                    //  It is forbidden to appear var use let and const Instead of 
      'no-delete-var': 'off',              //  Allow to appear delete Use of variables 
      'no-shadow': 'off',                  //  Allow variable declarations to have the same name as variables in the outer scope 
      ...
      

   (11)： Start project , The test results

   You can see , It works perfectly