如何为VSCode配置ESLint或Prettier？-VSCode-PHP中文网

如何为VSCode配置ESLint或Prettier？

夜晨

发布： 2025-10-11 21:50:01

原创

878人浏览过

配置VSCode中ESLint和Prettier需先安装对应扩展及依赖，创建.eslintrc.js和.prettierrc规则文件，设置Prettier为默认格式化工具并开启保存自动修复与格式化，即可实现代码质量与风格统一。

如何为vscode配置eslint或prettier？

为 VSCode 配置 ESLint 和 Prettier 能帮助你在编码过程中自动检查代码质量和格式，提升团队协作效率。下面介绍如何正确配置它们并协同工作。

安装必要的扩展和依赖

第一步是确保项目中安装了 ESLint 和 Prettier 的相关包，并在 VSCode 中启用对应插件。

• 在 VSCode 扩展市场中搜索并安装：
ESLint（由 Microsoft 提供）
Prettier - Code formatter（由 Prettier 官方提供）

• 在项目根目录运行以下命令安装开发依赖：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

登录后复制

如果使用 ESLint 与特定框架（如 React、Vue），还需安装对应的插件，例如 eslint-plugin-react。

配置 ESLint 和 Prettier 规则文件

在项目根目录创建或更新配置文件，使 ESLint 和 Prettier 协同工作。

• 创建 .eslintrc.js 文件：

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"  // 启用 Prettier 并避免规则冲突
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

登录后复制

• 可选：创建 .prettierrc 文件自定义格式规则：

AI-Text-Classifier

OpenAI官方出品，可以区分人工智能书写的文本和人类书写的文本

查看详情

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

登录后复制

• 建议添加 .prettierignore 忽略不需要格式化的文件：

node_modules
dist
build

登录后复制

设置 VSCode 默认格式化工具

告诉 VSCode 使用 Prettier 格式化代码，并让 ESLint 修复可修复的问题。

• 打开 VSCode 设置（Ctrl + ,），搜索 Default Formatter，选择 Prettier。
• 启用保存时自动格式化：

"editor.formatOnSave": true

登录后复制

• 让 ESLint 自动修复问题（在 settings.json 中添加）：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

登录后复制

这样每次保存文件时，ESLint 会先修复问题，Prettier 再统一格式化。

验证配置是否生效

打开一个 JS 或 TS 文件，故意写一些不符合规范的代码，比如缺少分号或引号不一致。

• 如果配置正确，ESLint 会在编辑器中标记错误。
• 保存文件后，Prettier 应自动格式化代码。
• 若出现红色波浪线但未自动修复，检查终端是否有 ESLint 报错，或确认插件是否启用。

基本上就这些。只要依赖安装完整、配置文件正确、VSCode 设置到位，ESLint 和 Prettier 就能无缝协作，帮你保持代码整洁。

以上就是如何为VSCode配置ESLint或Prettier？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

vscode怎么格式化通过import引入的css_vscode格式化import导入的css样式文件方法 VSCode代码操作_快速修复与重构提供者 VSCode语言配置设置_语法高亮与括号匹配规则 VSCode集成测试框架的配置与调试 VSCode语言特性_代码操作与快速修复实现