Vite项目中eslint的简单配置

1.创建一个vite项目

使用包管理工具创建一个vite项目。

    npm init vite@latest
    # 或者使用 yarn create
    yarn create vite
    # 或者使用 pnpm
    pnpm create vite

2.安装eslint

    npm install eslint -D
    # 或者使用 yarn
    yarn add eslint -D
    # 或者使用 pnpm
    pnpm add eslint -D

3. 初始化eslint配置文件

在项目根目录下运行以下命令，初始化eslint配置文件。

    npx eslint --init

3.1 选择配置模式

You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems

3.2 选择项目语言

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

3.3 选择项目框架

? Which framework does your project use? ...
  React
> Vue.js
  None of these

3.4 是否使用TypeScript

 ? Does your project use TypeScript? >> No / Yes

3.5 选择项目环境

? Where does your code run? ...
> Browser
  Node

3.6 选择安装对应插件

The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, eslint-plugin-vue
? Would you like to install them now? >> No / Yes  

3.7 选择项目包管理器

? Which package manager do you want to use? ... 
> npm
  yarn
  pnpm
  bun

4.初始化完成

初始化之后就会在根目录下创建一个eslint.config.mjs文件，这个就是eslint的配置文件。

    # eslint.config.mjs
    import globals from "globals";
    import pluginJs from "@eslint/js";
    import pluginVue from "eslint-plugin-vue";


    export default [
    {files: ["**/*.{js,mjs,cjs,vue}"]},
    {languageOptions: { globals: {...globals.browser, ...globals.node} }},
    pluginJs.configs.recommended,
    ...pluginVue.configs["flat/essential"],
    {
        rules: {
            // TODO: 配置规则
        }
    }
    ];

5.安装 vite-plugin-eslint

这个插件主要还是用来在vite项目中打包运行时来检查代码规范的，如果项目中的代码规范要求比较严格，可以使用，也可以不装这个，对eslint的代码报错提示等不会影响。

    npm install vite-plugin-eslint -D

配置

在vite.config.js中配置

    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']
        })
    ]
    })

6.安装eslint-parser

    npm add -D @babel/core             
    npm add -D @babel/eslint-parser

7.配置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',                  // 允许变量声明与外层作用域的变量同名
        'dot-notation': 'warn',              // 要求尽可能地使用点号
        'default-case': 'warn',              // 要求switch语句中有default分支
        'eqeqeq': 'warn',                    // 要求使用 === 和 !==
        'curly': 'warn',                     // 要求所有控制语句使用一致的括号风格
        'space-before-blocks': 'warn',       // 要求在块之前使用一致的空格
        'space-in-parens': 'warn',           // 要求在圆括号内使用一致的空格
        'space-infix-ops': 'warn',           // 要求操作符周围有空格
        'space-unary-ops': 'warn',           // 要求在一元操作符前后使用一致的空格
        'switch-colon-spacing': 'warn',      // 要求在switch的冒号左右有空格
        'arrow-spacing': 'warn',             // 要求箭头函数的箭头前后使用一致的空格
        'array-bracket-spacing': 'warn',     // 要求数组方括号中使用一致的空格
        'brace-style': 'warn',               // 要求在代码块中使用一致的大括号风格
        'camelcase': 'warn',                 // 要求使用骆驼拼写法命名约定
        'indent': ['warn', 4],               // 要求使用JS一致缩进4个空格
        'max-depth': ['warn', 4],            // 要求可嵌套的块的最大深度4
        'max-statements': ['warn', 100],     // 要求函数块最多允许的的语句数量20
        'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3
        'max-statements-per-line': ['warn', { max: 1 }],   // 要求每一行中所允许的最大语句数量
        "quotes": ["warn", "single", "avoid-escape"],      // 要求统一使用单引号符号
        "vue/require-default-prop": 0,                     // 关闭属性参数必须默认值
        "vue/singleline-html-element-content-newline": 0,  // 关闭单行元素必须换行符
        "vue/multiline-html-element-content-newline": 0,   // 关闭多行元素必须换行符
        // 要求每一行标签的最大属性不超五个
        'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
        // 要求html标签的缩进为需要4个空格
        "vue/html-indent": ["warn", 4, {
            "attribute": 1,
            "baseIndent": 1,
            "closeBracket": 0,
            "alignAttributesVertically": true,
            "ignores": []
        }],
        // 取消关闭标签不能自闭合的限制设置
        "vue/html-self-closing": ["error", {              
            "html": {
                "void": "always",
                "normal": "never",
                "component": "always"
            },
            "svg": "always",
            "math": "always"
        }],
        "no-unused-vars": "warn", // 未使用的变量提示
       "quotes": ["error", "double"], // 强制使用双引号
       "vue/multi-word-component-names": "off" // 关闭组件名称多个单词的限制(建议必配)
    }

8.安装prettier (用于规范代码格式)

这边建议可以使用prettier进行代码格式化，可以避免一些不必要的错误，比如缩进、空格、换行等

npm i  -D prettier
npm i -D eslint-config-prettier // eslint兼容的插件
npm i -D eslint-plugin-prettier // eslint的prettier

9.配置prettier

在根目录下创建一个prettier.config.js文件，并添加以下内容

module.exports = {
    tabWidth: 4,               // 使用4个空格缩进
  semi: false,               // 代码结尾是否加分号
  trailingComma: 'none',     // 代码末尾不需要逗号
  singleQuote: true,         // 是否使用单引号
  printWidth: 100,           // 超过多少字符强制换行
  arrowParens: 'avoid',      // 单个参数的箭头函数不加括号 x => x
  bracketSpacing: true,      // 对象大括号内两边是否加空格 { a:0 }

  endOfLine: 'auto',         // 文件换行格式 LF/CRLF
  useTabs: false,            // 不使用缩进符,而使用空格
  quoteProps: 'as-needed',   // 对象的key仅在必要时用引号
  jsxSingleQuote: false,     // jsx不使用单引号,而使用双引号
  jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
  rangeStart: 0,             // 每个文件格式化的范围是文件的全部内容
  rangeEnd: Infinity,        // 结尾
  requirePragma: false,      // 不需要写文件开头的 @prettier
  insertPragma: false,       // 不需要自动在文件开头插入 @prettier
  proseWrap: 'preserve',     // 使用默认的折行标准
  htmlWhitespaceSensitivity: 'css'  // 根据显示样式决定html要不要折行

}

10.配置VSCode的插件

1. 安装ESLint插件
2. 安装Prettier ESLint插件

修改vscode的设置文件

// 配置vscode
// 打开：设置 -> 文本编辑器 -> 字体 -> 在 settings.json 中编辑

// settings.json文件
{
 // vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,
 // 重新设定tabsize
 "editor.tabSize": 2,
 // 每次保存的时候自动格式化 
 "editor.formatOnSave": true,
 // 每次保存的时候将代码按eslint格式进行修复
 "eslint.autoFixOnSave": true,
 // 添加vue支持
 "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
           "language": "vue",
           "autoFix": true
      }
 ],
 // #让prettier使用eslint的代码格式进行校验 
 "prettier.eslintIntegration": true
}

11.附篇

• 有时候我们在写一些其他的项目时也会用到eslint,就比如使用vscode环境来开发uniapp,小程序等项目。这时候由于我们配置了eslint规则，项uni,wx等这些全局对象就会被识别为未定义的变量，我们可以在eslint的配置文件中找到globals选项，在里面添加这些全局对象，即可解决这个问题。

    globals: {
        uni: 'readonly',
        wx: 'readonly'
    }