VS Code 编辑器中配置 Prettier 和 ESLint 的集成

  1. 确保你已经在全局环境中安装了 prettier、eslint 和你需要的 ESLint 插件。在终端中运行以下命令进行全局安装:
bash 复制代码
npm install -g prettier eslint eslint-plugin-prettier eslint-config-prettier
  1. 打开 VS Code 编辑器,并安装以下插件:ESLint 和 Prettier - Code formatter

  2. 在 VS Code 的设置中进行以下配置:

    • 按下 Ctrl + ,(Windows)或 Cmd + ,(Mac)打开设置。
    • 搜索 "Default Formatter" 并选择 "Prettier - Code formatter"。
    • 搜索 "Eslint: Enable" 并勾选以启用 ESLint。
    • 搜索 "Eslint: Auto Fix On Save" 并勾选以在保存时自动应用 ESLint 规则修复代码。
    • 搜索 "Editor: Format On Save" 并勾选以在保存时自动应用 Prettier 格式化。
  3. 创建一个名为 .eslintrc.js 的文件,并在其中添加以下配置:

javascript 复制代码
module.exports = {
  extends: ['plugin:prettier/recommended'],
};

这将启用与 Prettier 相关的 ESLint 规则。

现在,通过这些配置,你就可以在 VS Code 中使用 Prettier 和 ESLint 的集成了。无论是新建文件还是打开现有文件,都将自动应用格式化和规则检查。(第四步可有可无,根据自己的目的来)

请注意,这些配置是基于全局设置,而不依赖于特定的项目。

相关推荐
Highcharts.js2 小时前
缺失数据可视化图表开发实战|Highcharts创建人员出生统计面积图表示例
开发语言·前端·javascript·信息可视化·highcharts·图表开发
LaughingZhu8 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html
怕浪猫8 小时前
Electron 开发实战(一):从零入门核心基础与环境搭建
前端·electron·ai编程
小鹏linux9 小时前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
前端若水10 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger10 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)10 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态11 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态11 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart11 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter