在 Vue3 项目中配置自动格式化功能

问题背景

在当前的项目中，我通过 vue-cli 创建了一个 Vue3 项目，项目的初始配置如下图所示：

在项目创建完成后，volar 插件已经默认安装。为了确保代码风格的一致性，我希望在每次保存文件时能够自动进行代码格式化。

注：vue3 项目与 volar 插件的结合被认为是最佳实践，因此强烈建议在 Vue3 项目中使用 volar 来替代 vetur 插件。

解决方法

0. 安装 volar 插件

首先，确保 volar 插件已正确安装。如果没有安装，可以在 VS Code 的扩展市场中搜索并安装 Volar 插件：

1. 打开 settings.json

接下来，我们需要配置 settings.json 文件来启用自动格式化功能。可以按照以下步骤进行操作：

1. 点击 VS Code 左下角的齿轮图标打开设置菜单，或者直接使用快捷键 Ctrl + , 打开设置。
2. 在设置页面中，切换到 Workspace，然后点击左上角的文件图标，进入 settings.json 文件的编辑模式。

3. 在左侧的目录中，您将看到 .vscode 目录，点击其中的 settings.json 文件进行编辑。

2. 配置 settings.json

在 settings.json 文件中，添加以下配置：

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "johnsoncodehk.volar"
}

这段配置确保了在保存文件时，VS Code 将自动使用 volar 插件对代码进行格式化。

3. 重启 VS Code 并运行项目

配置完成后，建议您重启 VS Code 并重新运行项目。这样可以确保所有配置生效并正常工作。

注意：在某些情况下，自动格式化功能可能只在项目运行时有效。因此，如果在保存时未看到自动格式化效果，请确保您的项目正在运行。

4. 运行效果展示

完成配置后，每次保存代码时，VS Code 都会自动格式化您的代码。以下是配置成功后的实际运行效果展示：

更多细节

使用 ESLint 进行代码规范检查

在某些情况下，仅靠自动格式化可能不足以保证代码质量。因此，建议在项目中同时使用 ESLint 来进行代码规范检查和修复。您可以通过以下步骤配置 ESLint：

1. 安装 ESLint 插件：

   npm install eslint --save-dev
   

2. 创建或编辑 .eslintrc.js 文件，并添加相关配置。例如：

   module.exports = {
     extends: [
       'plugin:vue/vue3-essential',
       'eslint:recommended'
     ],
     rules: {
       'no-unused-vars': 'warn',
       'no-console': 'off',
     }
   }
   

3. 在 settings.json 中添加以下配置：

   {
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
   }
   

这样，VS Code 在保存文件时，不仅会进行格式化，还会自动修复 ESLint 报告的部分问题。

参考资料

• Volar 插件介绍
• Vue.js 官方文档
• ESLint 官方文档

总结

通过以上步骤，您可以轻松在 Vue3 项目中配置自动格式化功能，并进一步增强代码质量管理。通过结合 volar 和 ESLint，您可以确保项目中的代码始终符合最佳实践和团队的代码风格要求。