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 ,其他的编译器( WebStormIDEA ),直接上配置即可。

二、集成 Eslint 配置
  1. 安装

    npm i eslint -D
    yarn add eslint --dev

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

    npx eslint --init

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

    Vite 配置 Eslint 规范代码_第1张图片

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

    Vite 配置 Eslint 规范代码_第2张图片

    (3):当前项目使用的框架,Vue.js

    Vite 配置 Eslint 规范代码_第3张图片

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

    在这里插入图片描述

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

    在这里插入图片描述

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

    在这里插入图片描述
    Vite 配置 Eslint 规范代码_第4张图片

    (7):最后选择 Javascript 风格

    在这里插入图片描述

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

    Vite 配置 Eslint 规范代码_第5张图片

    (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): 启动项目,测试效果

    可以看到,完美生效

    Vite 配置 Eslint 规范代码_第6张图片

你可能感兴趣的:(Vue,Javascript,Vite,javascript,vue.js,前端)