Vue3项目Eslint 9与Prettier配置

发表于 | 分类于
Vue3项目Eslint 9与Prettier配置

前言

Vue3新建的项目默认使用的Eslint的版本时9.x，配置方式和之前的已经不一样了。

8.21.0 版本（2022 年 9 月）：

官方首次引入扁平配置格式（eslint.config.js），作为可选的新配置方式，此时旧的 .eslintrc 格式仍为默认，用户可自主选择是否迁移。

9.x 版本（主要版本更新）：

官方将扁平配置设为默认配置格式，同时弃用旧的 .eslintrc 格式（不再自动搜索旧格式文件）。

若需继续使用旧格式，需显式设置环境变量 ESLINT_USE_FLAT_CONFIG=false。

推荐使用9.x的默认配置方式，配置更加简洁。

Eslint和Prettier

对比：

ESLint：主要关注代码质量（如未使用的变量、潜在错误）和部分代码格式（如缩进、引号）。

Prettier：专注于统一的代码格式（如换行、空格、引号类型）。

当两者对同一项风格规则（如 singleQuote 或 max-len）有不同配置时，会导致冲突。

假如Eslint和Prettier设置的代码格式规则不一样怎么办？

这就要用到eslint-config-prettier。

eslint-config-prettier 的作用是停止 ESLint 中所有可能与 Prettier 冲突的格式规则检查，但它不会读取 .prettierrc.json 的配置。

它通过将 ESLint 中所有可能与 Prettier 冲突的规则设置为 off（禁用）。

通过引入 eslint-config-prettier，可以确保：

  1. ESLint 不再检查那些由 Prettier 处理的格式问题。
  2. ESLint 专注于代码质量问题（如变量声明、语法错误等）。

那么我们有这样一个问题 为什么使用了eslint-config-prettier，Eslint修复的时候还会调整格式呢？

那是因为：

如果你同时安装了 eslint-plugin-prettier，ESLint 会将 Prettier 的格式化规则作为自身规则运行。

@vue/eslint-config-prettier是同时依赖eslint-config-prettier和eslint-plugin-prettier的。

相关依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"devDependencies": {
    "@tsconfig/node22": "^22.0.1",
    "@types/node": "^22.14.0",
    "@vitejs/plugin-vue": "^5.2.3",
    "@vue/tsconfig": "^0.7.0",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.5.0",
    "prettier": "3.5.3",
    "eslint": "^9.22.0",
    "eslint-plugin-vue": "~10.0.0",
    "jiti": "^2.4.2",
    "less": "^4.3.0",
    "npm-run-all2": "^7.0.2",
    "typescript": "~5.8.0",
    "vite": "^6.2.4",
    "vite-plugin-vue-devtools": "^7.7.2",
    "vue-tsc": "^2.2.8"
}

与eslint相关的依赖有

1
2
3
4
5
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.5.0",
"prettier": "3.5.3",
"eslint": "^9.22.0",
"eslint-plugin-vue": "~10.0.0",

其中@vue/eslint-config-prettier依赖

1
2
3
4
5
6
7
8
"dependencies": {
    "eslint-config-prettier": "^10.0.1",
    "eslint-plugin-prettier": "^5.2.2"
},
"peerDependencies": {
    "eslint": ">= 8.21.0",
    "prettier": ">= 3.0.0"
}

@vue/eslint-config-typescript依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"dependencies": {
    "@typescript-eslint/utils": "^8.26.0",
    "fast-glob": "^3.3.3",
    "typescript-eslint": "^8.26.0",
    "vue-eslint-parser": "^10.1.1"
},
"engines": {
    "node": "^18.18.0 || ^20.9.0 || >=21.1.0"	
},
"peerDependencies": {
    "eslint": "^9.10.0",
    "eslint-plugin-vue": "^9.28.0 || ^10.0.0",
    "typescript": ">=4.8.4"
},

配置文件

Prettier配置

.prettierrc.json

1
2
3
4
5
6
7
8
9
{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none",
  "endOfLine": "auto"
}

Eslint9配置

配置

eslint.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
import eslintConfigPrettier from '@vue/eslint-config-prettier' //添加这一行代码

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}']
  },
  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting,
  eslintConfigPrettier, //添加这一行代码
  // 可以自定义配置，例如：
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 0
    }
  }
)

配置说明

这里导入了几个关键模块：

  • globalIgnores：用于定义全局忽略的文件或目录
  • defineConfigWithVueTs：Vue 官方提供的 TypeScript 配置助手
  • pluginVue：Vue 官方的 ESLint 插件
  • skipFormatting：让 Esliint 跳过与 Prettier 格式化相关的规则检查
  • eslintConfigPrettier：关闭所有不必要的或可能与 Prettier 冲突的 ESLint 规则

Vue规则

应用 Vue 官方提供的基础规则

1
pluginVue.configs['flat/essential']

TypeScript规则

应用 Vue 官方提供的 TypeScript 推荐规则

1
vueTsConfigs.recommended,

Prettier 集成配置

1
2
skipFormatting,
eslintConfigPrettier,

说明

  • skipFormatting：让 Esliint 跳过与 Prettier 格式化相关的规则检查

  • eslintConfigPrettier：关闭所有可能与 Prettier 冲突的 ESLint 规则

格式化无效

新建的Vue3项目代码不会格式化

主要添加上面的

1
2
3
import eslintConfigPrettier from '@vue/eslint-config-prettier'

eslintConfigPrettier,

自定义规则

自定义的Eslint规则可以添加到后面

1
2
3
4
5
{
    rules: {
      '@typescript-eslint/no-unused-vars': 0
    }
}

但是注意

Eslint中不要再配置代码格式相关的配置。

IDE配置

IDEA

IDEA中Actions on Save中建议使用Run Prettier，关闭Run eslint --fix

当然只使用Run eslint --fix也可以。

image-20250513140541926

VSCode

使用Prettier

安装Prettier - Code formatter插件

Prettier 扩展默认会自动加载项目根目录下的 .prettierrc.json 配置文件。

VSCode设置

1
2
3
4
5
6
7
8
9
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 其他文件类型...
}

也可以手动测试

1
npx prettier --check .

自动修复

1
npx prettier --write .

使用Eslint

安装ESLint插件

VSCode设置

1
2
3
4
5
6
7
{
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.formatOnSave": false, // 禁用默认格式化
}

VSCode默认也会开启保存格式化，为了只使用Eslint修复，需要把编辑器的editor.formatOnSave设置为false。

所以更建议使用Prettier的方式。