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

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

相关推荐
小高0071 分钟前
🤔Proxy 到底比 defineProperty 强在哪?为什么今天还在聊 Proxy?
前端·javascript·vue.js
哔哩哔哩技术2 分钟前
VibeCut - 智能剪辑探索与实现
前端
用户904706683573 分钟前
在uniapp Vue3版本中,如何解决,web/H5网页浏览器跨域的问题
前端
RaidenLiu26 分钟前
告别繁琐:用 Signals 优雅处理 Flutter 异步状态
前端·flutter·前端框架
星链引擎29 分钟前
面向API开发者的智能聊天机器人解析
前端
前端Hardy30 分钟前
HTML&CSS&JS:纯前端图片打码神器:自定义强度 + 区域缩放,无需安装
前端·javascript·css
道可到36 分钟前
35 岁程序员的绝地求生计划:你准备好了吗?
前端·后端·面试
道可到1 小时前
国内最难入职的 IT 公司排行:你敢挑战哪一家?
前端·后端·面试
jnpfsoft1 小时前
低代码应用菜单避坑指南:新建 / 删除 / 导入全流程,路由重复再也不怕!
前端·低代码
Keepreal4961 小时前
word文件预览实现
前端·javascript·react.js