VSCode项目级格式化配置（Prettier - Code formatter和EditorConfig）

发表于 更新于 分类于
VSCode项目级格式化配置（Prettier - Code formatter）

前言

不同的项目使用的格式化工具不同，我们可以把配置放在项目的根目录下，只对当前项目生效。

能对代码进行格式约束的有三个方式

  • EditorConfig限制编辑器默认的格式化规则。
  • Prettier在保存触发格式化。
  • ESLint在ESLint时触发格式化修复。

Prettier无需安装额外插件即可直接格式化的类型：

  • JavaScript / TypeScript 生态：
    • JavaScript (包括 ES2017+)
    • TypeScript
    • JSX / TSX
    • Flow
    • JSON / JSON5 / JSONC
  • Web 样式与模板：
    • CSS / SCSS / Less
    • HTML / Vue / Angular / Ember / Glimmer
    • Handlebars / Mustache
  • 数据与配置：
    • YAML
    • Markdown / MDX
    • GraphQL

生效时机

工具 生效时机 触发方式 作用性质
.editorconfig 打开/切换文件时即时应用；保存时处理尾随空格/换行 被动：编辑器插件自动读取 约束编辑器行为（输入体验）
Prettier 手动格式化 / Format On Save / Format On Paste 主动：重写整个文件内容 代码格式化（样式统一）
ESLint (eslint.config.ts) 实时 Lint（输入时）/ 保存时 Auto Fix / 手动运行 eslint 命令 主动：检查 + 可选修复 代码质量 + 部分格式修复

推荐插件

.vscode\extensions.json

1
2
3
4
5
6
7
8
{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "EditorConfig.EditorConfig",
    "esbenp.prettier-vscode"
  ]
}

配置

编辑器

.vscode\settings.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue"
  ]
}

Prettier配置

.prettierignore

1
2
dist
node_modules

.prettierrc

1
2
3
4
5
6
7
8
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "all",
  "vueIndentScriptAndStyle": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

ESLint配置

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
24
25
26
27
28
29
import antfu from '@antfu/eslint-config'
import prettier from 'eslint-config-prettier'

export default antfu({
  vue: true,

  stylistic: false,
  formatters: false,

  rules: {
    /** 使用 console.warn 和 console.error 时警告, 其他情况禁止 */
    'no-console': ['warn', { allow: ['warn', 'error'] }],
    /** 允许使用 any 类型 */
    '@typescript-eslint/no-explicit-any': 0,
  },

  ignores: [
    'README.md',
    '.cursor/**',
    '.husky/',
    '.vscode/',
    'dist/',
    'node_modules/',
    'tsconfig.*.json',
    'components.d.ts',
    'CLAUDE.md',
  ],
}).append(prettier)

EditorConfig配置

这个配置默认不会生效，需要安装EditorConfig.EditorConfig插件后，编辑器才会读取改配置。

Prettier 已原生内置了对 .editorconfig 的支持，不再需要任何额外插件。

.editorconfig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# EditorConfig is awesome: https://editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

indent_style = space
indent_size = 2

# JS / TS / Vue：缩进只作为兜底
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2

# JSON / 配置文件
[*.{json,jsonc}]
indent_style = space
indent_size = 2

# Markdown：不自动裁剪行尾空格（否则表格/换行会被破坏）
[*.md]
trim_trailing_whitespace = false

# Shell / 配置类脚本
[*.{sh,zsh}]
indent_style = space
indent_size = 2

# Makefile 必须用 tab（历史原因）
[Makefile]
indent_style = tab