VSCode中如何配置不同项目的Linter和Formatter

VSCode中为多项目独立配置Linter和Formatter需采用五种方法：一、项目级配置文件（如.eslintrc.js、.prettierrc）；二、工作区设置（.vscode/settings.json）；三、多根工作区隔离配置；四、EditorConfig统一基础格式；五、按语言绑定Formatter与Linter。

如果您在VSCode中同时开发多个项目，且各项目使用不同语言规范或代码风格（如ESLint与Prettier组合、Black与Ruff、或针对TypeScript的TSLint遗留配置），则需要为每个项目独立设置Linter和Formatter。以下是实现此目标的多种方法：

本文运行环境：MacBook Air M2，macOS Sequoia。

一、使用项目级配置文件

VSCode默认优先读取项目根目录下的配置文件，无需额外插件即可识别并应用语言特定的Linter和Formatter规则。该方式依赖各工具自身的标准配置文件命名与位置约定。

1、在项目根目录创建.eslintrc.js或.eslintrc.json，定义ESLint规则与解析器选项。

2、在项目根目录创建.prettierrc或prettier.config.js，声明Prettier格式化参数。

3、确保VSCode已安装对应扩展（如ESLint、Prettier、Python、Ruff等），且其“Enable”设置为启用状态。

4、打开命令面板（Cmd+Shift+P），输入Preferences: Open Settings (JSON)，确认全局设置中未强制覆盖eslint.enable或editor.defaultFormatter。

二、配置工作区设置（.vscode/settings.json）

通过项目专属的.vscode/settings.json可精确控制当前工作区的Linter启用状态、Formatter绑定关系及参数传递方式，避免影响其他项目。

1、在项目根目录下新建.vscode文件夹（若不存在）。

2、在该文件夹内创建settings.json文件。

3、写入如下内容示例（以TypeScript项目为例）：

"eslint.enable": true,

"editor.defaultFormatter": "dbaeumer.vscode-eslint",

"editor.formatOnSave": true,

"eslint.validate": ["javascript", "typescript", "typescriptreact"],

"typescript.preferences.importModuleSpecifier": "relative"

4、保存后重启VSCode窗口或执行Developer: Reload Window使设置生效。

三、利用VSCode多根工作区区分配置

当多个项目需共存于同一编辑器窗口但彼此隔离时，可将它们作为独立文件夹加入多根工作区，并为每个文件夹单独指定.vscode/settings.json，实现完全独立的Linter/Formatter策略。

1、在VSCode中选择File > Add Folder to Workspace...，依次添加多个项目根目录。

2、执行File > Save Workspace As...，保存为my-workspace.code-workspace。

3、在该workspace文件中手动编辑，为每个folders条目添加settings字段，或直接在各项目子文件夹内维护各自的.vscode/settings.json。

4、关闭所有窗口后重新用File > Open Workspace from File...打开该.code-workspace文件。

四、使用EditorConfig统一基础格式约定

EditorConfig提供跨编辑器、跨项目的缩进、换行、字符编码等基础格式标准化能力，可与Linter/Formatter协同工作，避免底层格式冲突导致的重复修正。

易森网络企业版

如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld

0

查看详情

1、在项目根目录创建.editorconfig文件。

2、写入通用规则，例如：

root = true

[*.js]

indent_style = space

indent_size = 2

end_of_line = lf

charset = utf-8

trim_trailing_whitespace = true

insert_final_newline = true

3、确保VSCode已安装EditorConfig for VS Code扩展，并保持启用状态。

4、验证是否生效：新建一个.js文件，输入内容后保存，观察缩进与换行行为是否符合预期。

五、按语言绑定Formatter与Linter

VSCode支持为每种语言单独指定默认Formatter和Linter行为，适用于同一项目中混合多种语言（如前端项目含JSX、CSS、JSON、Markdown）的场景。

1、打开用户设置JSON（Cmd+, → 打开右上角{}图标）。

2、在"[javascript]"块中设置JavaScript专用Formatter：

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode",

"editor.formatOnSave": true

}

3、同理，在"[typescript]"、"[python]"、"[json]"等块中分别配置对应语言的Linter与Formatter。

4、保存后，在对应语言文件中触发保存操作，验证是否调用指定工具执行校验与格式化。

以上就是VSCode中如何配置不同项目的Linter和Formatter的详细内容，更多请关注php中文网其它相关文章！