Vite configures Eslint specification code

After experiencing collaborative development of relatively large projects, code specifications have become a thorny issue for team collaborative development. Today, I am going to compile a summary of the specifications in the editor->code writing process from scratch.

1. Unified code style

It is recommended to use EditorConfigconfiguration to standardize the inconsistency in code styles caused by different editors and different editor configurations.

Create .editorconfigconfiguration file in project root directory

# 表示是最顶层的 EditorConfig 配置文件
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.py] # 表示仅 py文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

It should be noted here that if you VSCodeneed to download plug-ins EditorConfig VS Codeand other compilers ( WebStorm, IDEA), you can configure them directly.

2. Integrated Eslint configuration

Install

npm i eslint -D
yarn add eslint --dev

Initial configuration, here the configuration items are determined based on the current development environment, framework and project style.

npx eslint --init

(1): How to use Eslint, here we choose the third option: check syntax, find problems and enforce code style

Insert image description here

(2): The modular type used in the current project, we choose hereJavascript modules

Insert image description here

(3): The framework used by the current project,Vue.js

Insert image description here

(4): Whether to use it Typescript. The environment we have built up to this point has not been configured yet TS, so skip it for now.

Insert image description here

(5): Running environment, here we choose the browser

Insert image description here

(6): Choose a code style guide. Here we choose the more popular one.Airbnb

Insert image description here

(7): Final selection Javascriptstyle

Insert image description here

(8): Initialization is completed, which one to use to install the required plug-ins, here we chooseyarn

Insert image description here

(9): Add automatic detection specification Viteat runtimeeslint

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(),
	    // 增加下面的配置项,这样在运行时就能检查 eslint 规范
	    eslintPlugin({
      
      
	      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
	    })
	  ]
})

(10): Configuration eslintrc.jsfile

Install babelplugin

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

Configuration Eslintbasic configuration

module.exports = {
        
        
  env: {
        
        
    browser: true,
    node: true
  },
  extends: [
    "eslint:recommended", // 使用推荐的eslint
    'plugin:vue/vue3-recommended' // 使用插件支持vue3
  ],
  parserOptions: {
        
        
    parser: '@babel/eslint-parser',
    sourceType: 'module',
    ecmaVersion: 12,
    allowImportExportEverywhere: true, // 不限制eslint对import使用位置
    ecmaFeatures: {
        
        
      modules: true,
      legacyDecorators: true
    },
    requireConfigFile: false // 解决报错：vue--Parsing error: No Babel config file detected for
  },
  plugins: [
    'vue'
  ],
  rules: {
        
        
  	...
  }
}

Configuration Eslint rulesRules
Here you can configure the corresponding rules according to the team specifications, and post some of my rules. More configurations can be found on the official website: eslint rules configuration

'semi': ['warn', 'never'],           // 禁止尾部使用分号
'no-console': 'warn',                // 禁止出现console
'no-debugger': 'warn',               // 禁止出现debugger
'no-duplicate-case': 'warn',         // 禁止出现重复case
'no-empty': 'warn',                  // 禁止出现空语句块
'no-extra-parens': 'warn',           // 禁止不必要的括号
'no-func-assign': 'warn',            // 禁止对Function声明重新赋值
'no-unreachable': 'warn',            // 禁止出现[return|throw]之后的代码块
'no-else-return': 'warn',            // 禁止if语句中return语句之后有else块
'no-empty-function': 'warn',         // 禁止出现空的函数块
'no-lone-blocks': 'warn',            // 禁用不必要的嵌套块
'no-multi-spaces': 'warn',           // 禁止使用多个空格
'no-redeclare': 'warn',              // 禁止多次声明同一变量
'no-return-assign': 'warn',          // 禁止在return语句中使用赋值语句
'no-return-await': 'warn',           // 禁用不必要的[return/await]
'no-self-compare': 'warn',           // 禁止自身比较表达式
'no-useless-catch': 'warn',          // 禁止不必要的catch子句
'no-useless-return': 'warn',         // 禁止不必要的return语句
'no-mixed-spaces-and-tabs': 'warn',  // 禁止空格和tab的混合缩进
'no-multiple-empty-lines': 'warn',   // 禁止出现多行空行
'no-trailing-spaces': 'warn',        // 禁止一行结束后面不要有空格
'no-useless-call': 'warn',           // 禁止不必要的.call()和.apply()
'no-var': 'warn',                    // 禁止出现var用let和const代替
'no-delete-var': 'off',              // 允许出现delete变量的使用
'no-shadow': 'off',                  // 允许变量声明与外层作用域的变量同名
...

(11): Start the project and test the effect

As you can see, it works perfectly

Insert image description here