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 的集成了。无论是新建文件还是打开现有文件,都将自动应用格式化和规则检查。(第四步可有可无,根据自己的目的来)

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

相关推荐
广州华水科技29 分钟前
单北斗变形监测一体机在基础设施安全与地质灾害监测中的应用价值分析
前端
Dragon Wu35 分钟前
Electron Forge集成React Typescript完整步骤
前端·javascript·react.js·typescript·electron·reactjs
芳草萋萋鹦鹉洲哦35 分钟前
【Tailwind】动画解读:Tailwind CSS Animation Examples
前端·css
华仔啊38 分钟前
jQuery 4.0 发布,IE 终于被放弃了
前端·javascript
一心赚狗粮的宇叔43 分钟前
03.Node.js依赖包补充说明及React&Node.Js项目
前端·react.js·node.js
子春一1 小时前
Flutter for OpenHarmony:音律尺 - 基于Flutter的Web友好型节拍器开发与节奏可视化实现
前端·flutter
JarvanMo1 小时前
150万开发者“被偷家”!这两款浓眉大眼的 VS Code 插件竟然是间谍
前端
亿元程序员1 小时前
大佬,现在AI游戏开发教程那么多,你不搞点卖给大学生吗?
前端
未来龙皇小蓝1 小时前
RBAC前端架构-02:集成Vue Router、Vuex和Axios实现基本认证实现
前端·vue.js·架构
晓得迷路了1 小时前
栗子前端技术周刊第 116 期 - 2025 JS 状态调查结果、Babel 7.29.0、Vue Router 5...
前端·javascript·vue.js