本篇文章将详细介绍如何在VSCode中设置自动保存功能,帮助开发者提高开发效率。通过简单的步骤实现代码修改后的自动化保存。
VSCode 配置自动化保存是一种高效的开发方式。通过配置 VSCode 可以实现自动保存文件、自动格式化代码以及自动执行 ESLint 校验等功能。
一、设置自动保存
为了在每次更改时使文件能够自动保存,你需要安装 Prettier 插件,并按下 Ctrl + , 快捷键来打开设置界面。接着搜索 files.autoSave 并将其设为 onFocusChange 即可实现这一功能。
二、配置默认代码格式化
为了在每次保存时进行代码的自动美化,你需要安装 Prettier 插件,并通过快捷键 Ctrl + , 打开设置界面,在其中找到并修改 editor.defaultFormatter 使其指向 Prettier。这样,每当你保存文件的时候,它就会被自动格式化。
三、配置Prettier插件在保存时进行代码美化
安装好Prettier插件后,通过快捷键 Ctrl + , 打开设置界面,在搜索框中输入 editor.formatOnSave 并勾选该选项。这样每次文件保存都会触发 Prettier 的格式化操作。
四、配置 ESLint 格式化
为了实现自动的ESLint校验功能,你需要安装 ESLint 插件,并通过快捷键 Ctrl + , 打开设置界面,在其中找到 code Action On Save 并点击进入 settings.json 文件进行编辑。在该文件中添加如下内容:
```json
{
[vue]: {
editor.defaultFormatter: rvest.vs-code-prettier-eslint
},
files.autoSave: onFocusChange,
editor.defaultFormatter: esbenp.prettier-vscode,
editor.formatOnSave: false,
editor.codeActionsOnSave: {
source.fixAll.eslint: true
}
}
```
这样,每次保存文件时都会自动执行 ESLint 校验。
通过这些配置可以提高开发效率和代码质量。