VSCode 自动保存与 Prettier ESLint 配置教程
需积分: 5 120 浏览量
更新于2024-08-04
收藏 2KB MD 举报
"VSCode 自动保存与 Prettier 及 ESLint 配置"
VSCode(Visual Studio Code)是一款非常流行的源代码编辑器,它提供了丰富的可扩展性,允许用户根据自己的需求定制各种功能。在开发过程中,自动保存和代码格式化可以显著提高效率,避免手动保存和格式化带来的不便。本教程将指导你如何配置 VSCode 以实现自动保存,并结合 Prettier 和 ESLint 实现代码自动格式化和校验。
首先,确保你已经安装了以下两个关键的 VSCode 插件:
1. **Prettier**: 这是一个流行的代码格式化工具,支持多种编程语言,能按照预设规则自动美化代码。
2. **ESLint**: 这是一个静态代码分析工具,用于检查代码中的潜在错误和不符合编码规范的部分。
接下来,按照以下步骤进行配置:
1. **启用自动保存**:
在 VSCode 中,你可以通过按下 `Ctrl + ,` 快捷键打开设置界面。在搜索框中输入 `files.autoSave`,你会看到一个名为“自动保存”的设置项。选择 `onFocusChange` 选项,这意味着当焦点从当前编辑器切换到其他编辑器或窗口时,文件将自动保存。
2. **设置默认格式化器为 Prettier**:
再次在设置界面的搜索框中输入 `editor.defaultFormatter`。找到这个设置项后,将其值设置为 `Prettier`,这样每次保存时,VSCode 将使用 Prettier 进行代码格式化。
3. **开启 Prettier 的保存时自动格式化**:
搜索 `editor.formatOnSave`,勾选该设置项。这样,每次保存文件时,Prettier 将自动对代码进行格式化。
如果你还想在保存时应用 ESLint 校验和修复,继续以下步骤:
1. **安装 ESLint 插件**:
确保已安装 ESLint 插件,如果没有,请在 VSCode 市场中搜索并安装。
2. **配置 ESLint 保存时的代码行动**:
在设置界面搜索 `codeActionOnSave`,然后找到 `editor.codeActionsOnSave` 设置项。在这里,你需要添加一个新的 JSON 对象,关联 ESLint 插件,如下所示:
```json
{
"[javascript]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
},
"[typescript]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
},
// 如果你需要对其他语言应用 ESLint,例如 Vue,可以添加对应的配置
"[vue]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
}
}
```
上述配置将使 ESLint 在保存 JavaScript 和 TypeScript 文件时自动应用所有修复。
3. **设置 ESLint 和 Prettier 的整合**:
为了使 Prettier 和 ESLint 能够协同工作,你可能需要安装 `rvest.vs-code-prettier-eslint` 插件,它允许 Prettier 使用 ESLint 的规则进行格式化。确保在 `[vue]` 配置中指定了 `rvest.vs-code-prettier-eslint` 作为默认格式化器。
完成以上配置后,每次你在 VSCode 中保存文件时,不仅会自动保存,而且 Prettier 将对代码进行格式化,同时 ESLint 会执行代码校验并修复潜在问题。这种自动化流程可以大大提高你的开发效率,保持代码整洁一致。记得定期更新这些插件,以获取最新的特性和修复。
498 浏览量
452 浏览量
2025-01-21 上传
653 浏览量
257 浏览量
423 浏览量
点击了解资源详情
点击了解资源详情
点击了解资源详情

Jim-zf
- 粉丝: 140
最新资源
- Cutterman: iOS代码审查与优化建议征集
- Eclipse工作空间配置文件分享与使用指南
- Linux内存分析器:检测内存泄漏与消耗
- 经典Java8 32位JDK下载 - JDK8最新版本发布
- WebOffice在线编辑器:快速处理Word和Excel文档
- Telerik Reporting 2014 Q3正式版发布,支持零序列号体验
- Delphi语言环境下的TsiLang组件范例分析
- 掌握SPI通信:C语言实现数据收发技巧
- 京东商城收货地址三级联动插件代码解析
- 通过RXTXcomm包实现Web端串口通信配置指南
- IEServer-master实现HTTP调用IE浏览器打开URL
- Chocolatey: React Native开发环境快速安装指南
- 两分钟内轻松将组织模式文件转化为炫酷HTML
- 绿色版VB图标制作工具v2.05:轻松制作与编辑ICO图标
- WoWoViewPagerAndroid:创新Android引导页面设计
- ResourceBundle Editor:提升本地化属性文件管理效率