VSCode 自动保存与 Prettier ESLint 配置教程
需积分: 5 164 浏览量
更新于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 会执行代码校验并修复潜在问题。这种自动化流程可以大大提高你的开发效率,保持代码整洁一致。记得定期更新这些插件,以获取最新的特性和修复。
423 浏览量
点击了解资源详情
13062 浏览量
2025-01-21 上传
653 浏览量
257 浏览量
点击了解资源详情
点击了解资源详情
点击了解资源详情
![](https://profile-avatar.csdnimg.cn/a2ef4fe7455945e7b9061cfa3e0956e2_weixin_46600931.jpg!1)
Jim-zf
- 粉丝: 140
最新资源
- iOS购物车示例:简单实现与首次分享
- 造梦西游3修改器源码:易语言皮肤模块及最新版下载
- Compose 2015 会议:SML模块实战应用示例
- Android通知机制演示与实现详解
- Java编程实践:TMO1项目深度解析
- 揭示CRX插件:Cryptostrikers销量追踪工具
- 易语言实现的163邮箱注册自动填表源码解析
- iOS打地鼠游戏源码改进指南
- 易语言实现Paradox数据库读写的高级应用
- React Native开发电影应用从入门到上线指南
- StarUML超市管理系统软件建模与4+1类图解析
- C++数值算法源码深度解析与学习指南
- iOS中国城市选择器TLCityPicker快速集成指南
- 易语言实现126邮箱网页登录功能源码解析
- Kicad螺旋电感生成器:自动生成螺旋形状感应器
- 创新四足机器人步态生成器:弹簧机制与可视化交互