保存自动格式化，提升 Vue 开发效率

作为一名 Vue 开发人员，你是否曾遇到过这样的烦恼：代码格式不统一，缩进混乱，变量命名不规范？这些问题不仅会影响代码的可读性，还会阻碍代码审查和协作。

为了解决这些问题，使用 linter 和格式化工具是至关重要的。它们可以帮助你自动检查代码风格，强制执行一致的编码规范，并自动格式化代码。

在 Vue 开发中，推荐使用 ESLint 和 Standard 插件。ESLint 是一个可扩展的 linter，可以帮助你检查代码质量，而 Standard 是一个编码规范，定义了一系列一致的编码规则。

通过将 ESLint 和 Standard 集成到你的 VSCode 中，你可以轻松实现保存自动格式化，在每次保存时自动检查和格式化你的代码。下面就让我们一步一步了解如何配置。

1. 安装 ESLint 和 Standard 插件

打开 VSCode 的扩展管理器，搜索并安装 "ESLint" 和 "StandardJS/StandardJS" 两个扩展。

2. 创建 .eslintrc 文件

在你的 Vue 项目根目录下创建一个名为 ".eslintrc" 的文件。该文件将用于配置 ESLint 的规则。

{
  "extends": "standard"
}

3. 配置 VSCode

打开 VSCode 的用户设置（"文件" -> "首选项" -> "设置"），并添加以下设置：

"editor.formatOnSave": true,
"eslint.autoFixOnSave": true

4. 配置 ESLint 扩展

打开 "设置" -> "扩展" -> "ESLint"，并勾选 "Enable ESLint for JavaScript/TypeScript files" 和 "Auto Fix on Save" 选项。

5. 验证配置

保存你的代码，ESLint 和 Standard 将自动检查并格式化你的代码。你可以通过查看右下角的 ESLint 状态栏来验证配置是否生效。

实际案例：自用插件和用户设置配置

除了上述基本配置外，你还可以根据自己的需要安装一些自用插件和配置用户设置。

自用插件

• vue-global-api ：将 Vue 全局 API 添加到 TypeScript 中，方便代码提示和自动补全。
• tailwindcss-language-features ：为 Tailwind CSS 提供语法高亮、自动补全和代码提示。
• prettier ：一个流行的代码格式化工具，可以进一步优化你的代码格式。

用户设置配置

• "editor.formatOnType": true ：在键入时格式化代码。
• "editor.minimap.enabled": false ：隐藏代码小地图，释放更多屏幕空间。
• "editor.cursorStyle": "line" ：将光标样式设置为垂直线，提高可视性。

总结

通过配置 ESLint 和 Standard，并结合自用插件和用户设置优化，你可以轻松实现 VSCode 中 Vue 项目的保存自动格式化。这将极大地提升你的开发效率，使你能够专注于编写高质量、可维护的代码。