vscode使用vue3插件

### 如何在 VSCode 中使用 Vue3 插件

为了确保开发环境能够高效支持 Vue3 开发，在 VSCode 中安装并配置合适的插件至关重要。以下是具体方法：

#### 安装 Volar 插件
对于 Vue3 项目，推荐使用名为 **Volar** 的官方扩展来替代旧版的 Vetur 扩展[^2]。

- 在 VSCode 的市场中搜索 "Volar" 并点击安装按钮。
- 如果当前正在使用 Vetur，则应先卸载它以防止冲突。

#### 配置 ESLint 和 Prettier
为了让编辑器更好地理解代码结构以及提供自动化的格式化功能，可以按照如下方式设置 ESLint 和 Prettier 工具：

##### 创建必要的配置文件
创建 `.eslintrc.js` 文件用于定义 ESLint 规则，并将其调整为适用于 Vue3 版本的规则集：

module.exports = {
    extends: [
        'plugin:vue/vue3-essential',
        '@vue/standard'
    ],
};

同时还需要建立 `.prettierrc.js` 来指定 Prettier 行为参数[^4]:

module.exports = {
    printWidth: 80,
    singleQuote: true,
    semi: true,
    bracketSpacing: true,
    endOfLine: 'auto',
};

##### 更新 `package.json`
确保项目的依赖列表里包含了最新的 ESLint 和 Prettier 包版本，并添加脚本来运行 linter 检查命令:

{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "scripts": {
    "lint": "eslint src/**/*.js"
  }
}

执行 `npm install` 或者 `yarn` 下载这些包到本地环境中去。

通过以上步骤就可以让 VSCode 更好地适应 Vue3 应用程序的需求了。