Vite 配置 Eslint 规范代码

在经历过比较大型的项目协同开发后，代码规范成为了团队协同开发的棘手问题。今天，准备从头整理一份从编辑器 -> 代码编写过程中的规范总结。

一、代码风格统一

这里推荐使用 EditorConfig 配置，来规范不同的编辑器，不同的编辑器配置，所造成的代码风格不一致问题。

项目根目录创建 .editorconfig 配置文件

# 表示是最顶层的 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

这里要注意，如果使用的 VSCode 需要下载插件 EditorConfig VS Code ，其他的编译器( WebStorm，IDEA )，直接上配置即可。

二、集成 Eslint 配置

安装

npm i eslint -D
yarn add eslint --dev

初始化配置，这里根据当前的开发环境，框架以及项目的风格来决定配置项

npx eslint --init

(1)：如何使用 Eslint，这里我们选择第三种：检查语法、发现问题并强制执行代码风格

在这里插入图片描述

(2)：当前项目使用的模块化类型，我们这里选择 Javascript modules

在这里插入图片描述

(3)：当前项目使用的框架，Vue.js

在这里插入图片描述

(4)：是否使用 Typescript，到这里我们搭建的环境还没有配置 TS，暂时跳过

在这里插入图片描述

(5)：运行的环境，这里我们选择浏览器

在这里插入图片描述

(6)：选择代码风格指南，这里我们选择较为流行的 Airbnb

在这里插入图片描述

(7)：最后选择 Javascript 风格

在这里插入图片描述

(8)：初始化结束，使用哪一种放视安装所需的插件，这里我们选择 yarn

在这里插入图片描述

(9)：添加 Vite 运行的时候自动检测 eslint 规范

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)：配置 eslintrc.js 文件

安装 babel 插件

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

配置 Eslint 基本配置

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: {
        
        
  	...
  }
}

配置 Eslint rules 规则
这里可以根据团队规范去配置对应的规则，贴下我的一部分规则。更多配置可以去官网查阅：eslint rules 配置

'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)：启动项目，测试效果

可以看到，完美生效

在这里插入图片描述