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 配置

1. 安装

   npm i eslint -D
   yarn add eslint --dev

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

   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 文件

   1. 安装 babel 插件

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

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

   3. 配置 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)： 启动项目，测试效果

   可以看到，完美生效