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

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

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
鸡啄米的时光机6 小时前
vscode的一些实用操作
vscode·学习
柴柴的小记8 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
Aphelios3809 小时前
Linux 下 VIM 编辑器学习记录:从基础到进阶(上)
java·linux·编辑器·vim