VSCode 中 Vue.js 开发的必备插件

在 VSCode 中进行 Vue.js 开发时，Vetur、Vue VSCode Snippets、ESLint 和 Prettier 是必备插件，它们分别从语法支持、代码生成、质量检查和格式规范方面提升开发效率。以下是具体功能与使用方法：

• 功能：

  提供 .vue 单文件组件的语法高亮、自动补全、错误检查和代码片段支持。

  识别模板（<template>）、脚本（<script>）和样式（<style>）部分，并分别提供智能提示。

  支持格式化配置，可自定义不同部分的格式化工具（如 HTML、JS、CSS）。

• 配置示例：

  { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatter.css": "prettier"}

  此配置指定了 HTML 使用 js-beautify-html，JS 使用 VSCode 内置的 TypeScript 格式化，CSS 使用 Prettier。

• 使用场景：编写 .vue 文件时，Vetur 会自动高亮语法，并在输入时提示 Vue API、生命周期钩子等。

• 功能：

  提供大量 Vue.js 代码片段（如组件、方法、生命周期钩子），通过缩写快速生成。

  适合新手快速上手，也方便老手减少重复输入。

• 示例片段：输入 vue-component 可生成：

  Vue.component('my-component', { template: '<div>{{ message }}</div>', data() { return { message: 'Hello, Vue!' } }});

  输入 vbase 可生成 Vue 单文件组件基础结构。

• 使用场景：需要快速创建组件、方法或生命周期时，通过缩写（如 vfor 生成 v-for 循环）提升效率。

• ESLint：

  功能：静态代码分析工具，检查代码错误、潜在问题，并强制遵循编码规范。

  配置示例（.eslintrc.js）：module.exports = { extends: ['plugin:vue/essential', 'eslint:recommended'], rules: { 'vue/html-self-closing': 'error', // 强制自闭合标签 'vue/no-unused-vars': 'error' // 禁止未使用变量 }};

  使用场景：实时检测代码问题，如未使用的变量、未闭合的标签等。

• Prettier：

  功能：强制一致的代码格式（如缩进、引号、分号），避免格式争议。

  配置示例（.prettierrc）：{ "semi": false, "singleQuote": true, "tabWidth": 2}

  使用场景：保存文件时自动格式化，确保团队代码风格统一。

• 集成方式：安装 VSCode 插件 ESLint 和 Prettier - Code formatter，并配置 settings.json：

  { "editor.formatOnSave": true, "eslint.validate": ["javascript", "javascriptreact", "vue"], "prettier.eslintIntegration": true}

1. 开发阶段：

   Vetur 提供语法高亮和智能提示。

   Vue VSCode Snippets 快速生成代码结构。

   ESLint 实时检查代码问题。

2. 保存阶段：

   Prettier 自动格式化代码。

   ESLint 修复可自动修复的问题（如缩进、分号）。

3. 调试阶段：

   若 Vetur 智能提示失效，可临时禁用验证功能排查问题：{ "vetur.validation.template": false, "vetur.validation.script": false, "vetur.validation.style": false}

• 严格 ESLint 规则：使用 plugin:vue/recommended 扩展启用更严格的 Vue 规则，减少潜在错误。

  module.exports = { extends: ['plugin:vue/recommended', 'eslint:recommended']};

• 格式化器统一：在 Vetur 中配置 Prettier 为默认格式化工具，避免冲突：

  { "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.css": "prettier"}

• 团队规范：通过共享 .eslintrc.js 和 .prettierrc 文件，确保团队代码风格一致。

• Vetur：核心语法支持与格式化配置。
• Vue VSCode Snippets：快速生成代码片段。
• ESLint + Prettier：保障代码质量与格式统一。

合理配置这些插件后，可显著提升 Vue.js 开发效率，减少重复劳动，同时确保代码规范性和可维护性。