最新Eslint9+prettier+Husky暂存区配置（基于Vue)

前言：Eslint是一种代码质量检查工具，确保代码符合相应规范，prettier是一个代码格式化工具，总而言之，Eslint查错，prettier改错。Husky是一个Git Hooks工具，在把代码提交给仓库时自动触发前两个工具，确保每次提交给仓库的代码都符合项目标准。

接下来我们就基于创建Vue项目时配置这三个工具。

1.首先创建一个Vue3项目

1.1 下载pnpm 包管理器

复制代码

npm install -g pnpm

1.2 创建Vue3项目，直接贴图

2.正式配置Eslint9+prettier+Husky

2.1 配置设置文件

找到设置文件settings.json

配置环境：

下载包：

css 复制代码

pnpm i -D eslint-plugin-vue eslint-plugin-prettier

arduino 复制代码

pnpm i -D prettier eslint-config-prettier

bash 复制代码

pnpm i -D @eslint/js @eslint/eslintrc

然后在eslint.config.js中导入包，代码如下：

javascript 复制代码

import eslintConfigPrettier from '@vue/eslint-config-prettier' //添加这一行代码
import eslintPluginPrettier from 'eslint-plugin-prettier/recommended'

如图所示：

接着在defineConfig里面添加rules和刚刚下好的包配置，代码如下：

arduino 复制代码

   eslintConfigPrettier, //添加这一行代码
  eslintPluginPrettier, // 解决 prettier 和 eslint 的冲突，比如 eslint 里面是 开启 双引号，prettier 里面开启单引号
  {
    rules: {
      'prettier/prettier': [
        'warn',
        {
          singleQuote: true, // 单引号
          semi: false, // 无分号
          printWidth: 100, // 每行宽度至多80字符
          trailingComma: 'none', // 不加对象|数组最后逗号
          endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
        }
      ],
      'vue/multi-word-component-names': [
        'warn',
        {
          ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
        }
      ],
      'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
      // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
      'no-undef': 'error'
    }
  },

如图所示：