让 VS Code 成为你的强大武器，武装 vue 开发，告别代码混乱！

前言

对于前端开发者来说，VS Code 是一款必不可少的工具。它轻巧、快速，并且拥有丰富的扩展程序生态。在这些扩展程序中，有一款叫做 "Vetur" 的扩展程序非常值得推荐。它可以为 Vue 开发者提供丰富的功能，让你的开发更加轻松。

Vetur 介绍

Vetur 是一个专为 Vue 开发者设计的 VS Code 扩展程序。它提供了许多有用的功能，包括：

• 语法高亮：支持 Vue 语法的语法高亮，让你的代码更加清晰易读。
• 代码提示：支持 Vue 代码的自动补全和提示，让你在写代码的时候更加轻松。
• 格式化代码：可以自动格式化 Vue 代码，让你的代码更加整洁美观。
• 错误检查：可以检查 Vue 代码的错误和警告，帮助你快速发现问题。
• 调试支持：支持 Vue 代码的调试，让你可以更轻松地找到问题。

VS Code 配置

要使用 Vetur，你需要先在 VS Code 中安装它。安装完成后，你需要在你的项目中创建一个 .vscode 文件夹，然后在这个文件夹中创建一个名为 "settings.json" 的文件。在这个文件中，你需要添加以下配置：

{
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.html": "prettier",
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "prettier.printWidth": 100
}

使用 ESLint 和 Prettier

除了 Vetur，你还需要安装 ESLint 和 Prettier。ESLint 是一个代码检查工具，可以帮助你发现代码中的问题。Prettier 是一个代码格式化工具，可以让你代码更加整洁美观。

安装完成后，你需要在你的项目中创建一个 .eslintrc.json 文件，然后在这个文件中添加以下配置：

{
  "extends": ["eslint:recommended", "plugin:vue/essential"],
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "never"]
  }
}

你也可以在你的项目中创建一个 .prettierrc.json 文件，然后在这个文件中添加以下配置：

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

保存自动格式化

配置完成后，你就可以在 VS Code 中享受保存自动格式化的功能了。当你保存你的代码时，VS Code 会自动使用 ESLint 检查你的代码，并使用 Prettier 格式化你的代码。这样，你的代码就可以始终保持整洁美观，而且不会有语法错误。

结语

以上就是 VS Code 配置 vue+vetur+eslint+prettier 自动格式化功能的教程。通过这些配置，你可以在 Vue 开发中享受更加轻松和高效的体验。