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

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

相关推荐
LYFlied几秒前
【每日算法】LeetCode 560. 和为 K 的子数组
前端·数据结构·算法·leetcode·职场和发展
howcode1 分钟前
年度总结——Git提交量戳破了我的副业窘境
前端·后端·程序员
恋猫de小郭2 分钟前
OpenAI :你不需要跨平台框架,只需要在 Android 和 iOS 上使用 Codex
android·前端·openai
全马必破三13 分钟前
浏览器原理知识点总结
前端·浏览器
零Suger15 分钟前
React 组件通信
前端·react.js·前端框架
LYFlied18 分钟前
【每日算法】 LeetCode 394. 字符串解码
前端·数据结构·算法·leetcode·面试·职场和发展
硕子鸽28 分钟前
UniApp + Dify 实战:详解 SSE 流式响应的解析与前端渲染
前端·uni-app·dify
lxh011329 分钟前
复原IP地址
前端·数据结构·算法
Miketutu32 分钟前
[特殊字符] uni-app App 端实现文件上传功能(基于 xe-upload 插件)
前端·vue.js·uni-app