VSCode 常用插件全面详解

VSCode 常用插件全面详解

前言

VSCode 的强大很大程度上得益于其丰富的插件生态系统。本文将详细介绍前端开发，特别是 Vue 3 和 Uniapp 开发中必备的插件，包括安装、配置和最佳实践。

---

一、Vue 3 开发必备插件

1.1 Volar - Vue 语言支持

替代 Vue 2 的 Vetur，是 Vue 3 开发的首选插件

安装与配置

// settings.json
{
  // 禁用 Vetur（如果已安装）
  "vetur.validation.template": false,
  "vetur.format.enable": false,
  
  // Volar 配置
  "volar.autoCompleteRefs": true,
  "volar.codeLens.pugTools": true,
  "volar.codeLens.scriptSetupTools": true,
  
  // TypeScript Vue Plugin 配置
  "typescript.preferences.autoImportFileExcludePatterns": [
    "vue-router",
    "pinia"
  ]
}

核心功能详解

<!-- 功能1：模板内表达式类型检查 -->
<template>
  <div>
    <!-- Volar 会检查 count 的类型 -->
    <p>{{ count.toFixed(2) }}</p> <!-- ✅ 正确：count 是 number -->
    <!-- <p>{{ count.split('') }}</p> ❌ 错误：类型检查会报错 -->
  </div>
</template>

<script setup lang="ts">
const count = ref(0)
</script>

<!-- 功能2：组件 Props 类型提示 -->
<template>
  <!-- 输入 : 后会显示 MyComponent 的 props 提示 -->
  <MyComponent :title="pageTitle" :count="counter" />
</template>

<!-- 功能3：事件处理类型检查 -->
<template>
  <!-- @update: 事件会有类型提示 -->
  <MyComponent @update:modelValue="handleUpdate" />
</template>

<script setup lang="ts">
// handleUpdate 参数会有正确的类型推断
const handleUpdate = (value: string) => {
  console.log(value)
}
</script>

工作区配置

// .vscode/settings.json
{
  "volar.takeOverMode.enabled": true,
  "volar.icon.preview": true,
  
  // 针对 Vue 文件的特定设置
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar",
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }
  }
}

1.2 Vue VSCode Snippets

提供丰富的 Vue 代码片段

常用代码片段

<!-- 输入 v3-setup-script 生成 -->
<script setup lang="ts">
</script>

<template>
  <div>
    
  </div>
</template>

<style scoped>
</style>

<!-- 输入 v3-ref 生成 -->
const ${1:value} = ref<${2:type}>(${3:initialValue})

<!-- 输入 v3-reactive 生成 -->
const ${1:state} = reactive<${2:Type}>(${3:{}})

<!-- 输入 v3-computed 生成 -->
const ${1:value} = computed(() => {
  return ${2:expression}
})

<!-- 输入 v3-watch 生成 -->
watch(${1:source}, (${2:newValue}, ${3:oldValue}) => {
  ${4:// code}
})

<!-- 输入 v3-component 生成 -->
<script setup lang="ts">
interface Props {
  ${1:title}: string
}

const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()
</script>

自定义代码片段

// .vscode/vue-snippets.code-snippets
{
  "Vue3 Pinia Store": {
    "prefix": "v3-pinia-store",
    "body": [
      "import { defineStore } from 'pinia'",
      "import { ref, computed } from 'vue'",
      "",
      "export const use${1:StoreName}Store = defineStore('${2:storeId}', () => {",
      "  // State",
      "  const ${3:state} = ref(${4:initialValue})",
      "",
      "  // Getters",
      "  const ${5:getter} = computed(() => {",
      "    return ${3:state}.value",
      "  })",
      "",
      "  // Actions",
      "  const ${6:action} = () => {",
      "    // implementation",
      "  }",
      "",
      "  return {",
      "    ${3:state},",
      "    ${5:getter},",
      "    ${6:action}",
      "  }",
      "})"
    ],
    "description": "Create a Pinia store with Composition API"
  }
}

---

二、TypeScript 开发增强插件

2.1 TypeScript Importer

自动管理和组织 TypeScript 导入

配置示例

{
  "typescript.preferences.includePackageJsonAutoImports": "auto",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  
  // TypeScript Importer 特定配置
  "typescriptImporter.autoImport": true,
  "typescriptImporter.omitExtensionOnDefaultImport": true,
  "typescriptImporter.surroundWithQuotes": true,
  "typescriptImporter.quoteStyle": "single"
}

使用示例

// 输入代码时自动提示导入
const user = ref<User>() // 自动提示从 '@/types' 导入 User 接口
const router = useRouter() // 自动提示从 'vue-router' 导入

// 自动整理导入语句
import { ref, computed, watch } from 'vue'
import type { User, Profile } from '@/types'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

2.2 Error Lens

行内显示错误和警告信息

配置

{
  "errorLens.enabled": true,
  "errorLens.enabledDiagnosticLevels": ["error", "warning"],
  "errorLens.fontSize": "12px",
  "errorLens.padding": "2px 6px",
  "errorLex.addAnnotationTextPrefixes": true,
  
  // 自定义颜色
  "errorLens.errorBackground": "#ff000015",
  "errorLens.errorBackgroundLight": "#ff000015",
  "errorLens.warningBackground": "#ffa50015",
  "errorLens.warningBackgroundLight": "#ffa50015"
}

效果示例

// 🛑 类型"string"的参数不能赋给类型"number"的参数。
const count: number = "hello"

// ⚠️ 变量"unusedVar"已声明但从未读取。
const unusedVar = 123

// ✅ 正确代码无提示
const message: string = "Hello World"

---

三、代码质量与格式化插件

3.1 ESLint

JavaScript/TypeScript 代码质量检查

配置

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html"
  ],
  "eslint.format.enable": true,
  "eslint.codeActionsOnSave.mode": "all",
  "eslint.workingDirectories": ["./src"],
  
  // Vue 3 特定配置
  "eslint.options": {
    "overrideConfig": {
      "extends": [
        "@vue/typescript/recommended"
      ]
    }
  }
}

工作区配置

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

3.2 Prettier

代码格式化工具

配置

{
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.tabWidth": 2,
  "prettier.trailingComma": "es5",
  "prettier.printWidth": 100,
  "prettier.htmlWhitespaceSensitivity": "ignore",
  
  // Vue 文件格式化
  "prettier.vueIndentScriptAndStyle": true,
  
  // 与 ESLint 集成
  "prettier.eslintIntegration": false
}

格式化配置示例

<!-- 格式化前 -->
<script setup lang="ts">
const   count   =   ref  (  0  )
const   message=ref('hello')
</script>

<template>
<div>
<p>{{count}}</p>
<button @click="count++">Increment</button>
</div>
</template>

<!-- 格式化后 -->
<script setup lang="ts">
const count = ref(0)
const message = ref('hello')
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

3.3 Prettier ESLint

集成 Prettier 和 ESLint

{
  "prettier-eslint.prettierLast": true,
  "[vue]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  }
}

---

四、Uniapp 开发专用插件

4.1 uni-app 插件

Uniapp 开发官方支持

配置

{
  "uni-app.vue2": false,
  "uni-app.vue3": true,
  "uni-app.typescript": true,
  "uni-app.manifest": {
    "name": "My UniApp",
    "appid": "your-appid"
  },
  
  // 代码片段配置
  "uni-app.snippet.scope": "vue",
  "uni-app.snippet.prompt": true
}

常用代码片段

<!-- 输入 u-view 生成 -->
<view class="container">
  ${1:content}
</view>

<!-- 输入 u-button 生成 -->
<button type="primary" @click="${1:handleClick}">${2:按钮}</button>

<!-- 输入 u-request 生成 -->
uni.request({
  url: '${1:url}',
  method: '${2:GET}',
  success: (res) => {
    ${3:// success handler}
  },
  fail: (err) => {
    ${4:// error handler}
  }
})

<!-- 输入 u-navigate 生成 -->
uni.navigateTo({
  url: '${1:/pages/index/index}'
})

4.2 微信小程序工具

微信小程序开发支持

{
  "minapp-vscode.wxmlFormatter": "prettier",
  "minapp-vscode.prettier": {
    "printWidth": 100,
    "singleQuote": true,
    "semi": false
  },
  
  // 标签自动闭合
  "minapp-vscode.autoclose": true,
  "minapp-vscode.autocomplete": true
}

---

五、开发效率提升插件

5.1 GitLens

增强 Git 功能

配置

{
  "gitlens.currentLine.enabled": false,
  "gitlens.hovers.currentLine.over": "line",
  "gitlens.blame.avatars": true,
  "gitlens.statusBar.enabled": true,
  
  // 代码标注
  "gitlens.codeLens.enabled": true,
  "gitlens.codeLens.authors.enabled": true,
  "gitlens.codeLens.recentChange.enabled": true
}

使用示例

// GitLens 会在每行代码后面显示
// • 最后修改的作者
// • 最后修改的时间
// • 提交信息

const getUser = (id: number) => { // [John Doe, 2 days ago] feat: add user management
  return users.find(user => user.id === id) // [Jane Smith, 1 week ago] fix: user lookup
}

5.2 Auto Rename Tag

自动重命名配对的 HTML 标签

{
  "auto-rename-tag.activationOnLanguage": [
    "vue",
    "html",
    "wxml",
    "xml"
  ]
}

使用示例

<!-- 修改开始标签时，结束标签自动同步 -->
<my-component>  <!-- 修改为 <new-component> -->
  Content
</my-component> <!-- 自动变为 </new-component> -->

5.3 Bracket Pair Colorizer

彩色显示匹配的括号

{
  "bracket-pair-colorizer-2.colors": [
    "#ffd700",
    "#da70d6",
    "#87ceeb"
  ],
  "bracket-pair-colorizer-2.showBracketsInGutter": true,
  "bracket-pair-colorizer-2.showActiveScope": true
}

5.4 Todo Tree

管理代码中的 TODO 注释

{
  "todo-tree.general.tags": [
    "TODO",
    "FIXME",
    "HACK",
    "BUG",
    "NOTE",
    "OPTIMIZE"
  ],
  "todo-tree.highlights.defaultHighlight": {
    "foreground": "#ffffff",
    "background": "#ff0000",
    "icon": "check",
    "iconColor": "#ff0000"
  },
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\*\.))\\s*($TAGS).*(\\n\\s*//\\s{2,}.*)*"
}

使用示例

// TODO: 优化这个函数性能
const expensiveCalculation = () => {
  // FIXME: 这里有可能内存泄漏
  const data = processData()
  
  // NOTE: 这个算法的时间复杂度是 O(n^2)
  return data.map(item => transform(item))
}

// BUG: 在 Safari 浏览器中不工作
const safariFix = () => {
  // HACK: 临时解决方案
  if (isSafari) {
    return fallbackImplementation()
  }
}

---

六、主题与界面美化

6.1 Material Icon Theme

文件图标主题

{
  "material-icon-theme.activeIconPack": "vue",
  "material-icon-theme.folders.theme": "specific",
  "material-icon-theme.hidesExplorerArrows": true,
  "material-icon-theme.files.associations": {
    "*.uniapp": "vue",
    "pages.json": "vue"
  },
  "material-icon-theme.folders.associations": {
    "components": "vue",
    "composables": "container",
    "stores": "database",
    "types": "typescript"
  }
}

6.2 One Dark Pro

流行的暗色主题

{
  "workbench.colorTheme": "One Dark Pro",
  "oneDarkPro.bold": true,
  "oneDarkPro.vivid": true,
  "oneDarkPro.italic": true
}

6.3 Peacock

为不同项目设置不同的颜色主题

{
  "peacock.affectActivityBar": true,
  "peacock.affectStatusBar": true,
  "peacock.affectTitleBar": true,
  "peacock.favoriteColors": [
    "#0078D7",
    "#1E8E3E",
    "#D83B01",
    "#744DA9"
  ]
}

---

七、调试与测试插件

7.1 Thunder Client

REST API 测试工具

配置示例

{
  "thunder-client.saveToWorkspace": true,
  "thunder-client.rememberCookies": true,
  
  // 环境变量
  "thunder-client.environmentVariables": {
    "development": {
      "baseUrl": "http://localhost:3000/api",
      "token": "dev-token-123"
    },
    "production": {
      "baseUrl": "https://api.example.com",
      "token": "prod-token-456"
    }
  }
}

7.2 Jest Runner

Jest 测试运行器

{
  "jestrunner.runOptions": ["--verbose"],
  "jestrunner.debugOptions": ["--inspect-brk"],
  "jestrunner.jestCommand": "npm test --",
  "jestrunner.enableCodeLens": true
}

使用示例

// 在测试用例上方会出现 "Run" 和 "Debug" 按钮
describe('User Store', () => {
  it('should initialize with default state', () => { // [Run] [Debug]
    const store = useUserStore()
    expect(store.user).toBeNull()
  })
  
  it('should set user data', () => { // [Run] [Debug]
    const store = useUserStore()
    store.setUser({ id: 1, name: 'John' })
    expect(store.user?.name).toBe('John')
  })
})

---

八、实用工具插件

8.1 Live Server

本地开发服务器

{
  "liveServer.settings.port": 5500,
  "liveServer.settings.root": "/dist",
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.https": {
    "enable": false,
    "cert": "",
    "key": "",
    "passphrase": ""
  },
  "liveServer.settings.ignoreFiles": [
    "**/node_modules/**",
    "**/dist/**",
    "**/build/**"
  ]
}

8.2 Image preview

图片预览

{
  "imagePreview.position": "right",
  "imagePreview.maxHeight": 300,
  "imagePreview.background.color": "#1e1e1e"
}

8.3 Settings Sync

同步 VSCode 设置

{
  "sync.gist": "your-gist-id",
  "sync.autoDownload": true,
  "sync.autoUpload": true,
  "sync.forceDownload": false,
  "sync.quietSync": false
}

---

九、插件组合配置示例

9.1 完整的前端开发配置

// .vscode/settings.json
{
  // Vue 3 开发
  "volar.autoCompleteRefs": true,
  "volar.takeOverMode.enabled": true,
  
  // 代码质量
  "eslint.validate": ["vue", "typescript", "javascript"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  
  // 格式化
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[typescript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  
  // Git
  "gitlens.statusBar.enabled": true,
  "gitlens.blame.avatars": true,
  
  // 界面
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  
  // 文件排除
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.git": true
  },
  
  // 搜索排除
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true
  }
}

9.2 团队共享配置

// .vscode/extensions.json
{
  "recommendations": [
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "bradlc.vscode-tailwindcss",
    "dbaeumer.vscode-eslint",
    "rvest.vs-code-prettier-eslint",
    "eamodio.gitlens",
    "formulahendry.auto-rename-tag",
    "ms-vscode.vscode-json",
    "PKief.material-icon-theme",
    "zhuangtongfa.Material-theme",
    "ms-vscode.vscode-typescript-next"
  ]
}

---

十、插件管理技巧

10.1 按工作区启用插件

// .vscode/extensions.json
{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss"
  ],
  "unwantedRecommendations": [
    "octref.vetur", // 禁用 Vetur
    "ms-vscode.vscode-typescript-tslint-plugin" // 禁用 TSLint
  ]
}

10.2 性能优化配置

{
  // 禁用不需要的插件
  "extensions.autoCheckUpdates": false,
  
  // 大型项目优化
  "typescript.tsserver.maxTsServerMemory": 4096,
  "typescript.tsserver.watchOptions": {
    "watchFile": "dynamicPriorityPolling",
    "watchDirectory": "dynamicPriorityPolling"
  },
  
  // 文件监听排除
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true
  }
}

总结

必备插件分类：

1. Vue 开发：Volar、Vue VSCode Snippets
2. TypeScript：TypeScript Importer、Error Lens
3. 代码质量：ESLint、Prettier
4. Uniapp 开发：uni-app 插件
5. 效率工具：GitLens、Auto Rename Tag、Todo Tree
6. 界面美化：Material Icon Theme、One Dark Pro
7. 调试测试：Thunder Client、Jest Runner

最佳实践：

1. 按项目配置：使用工作区设置避免全局冲突
2. 性能优先：禁用不需要的插件
3. 团队统一 ：通过 extensions.json 共享配置
4. 定期更新：保持插件最新版本
5. 合理配置：根据项目需求调整插件设置

通过合理配置这些插件，可以显著提升 Vue 3 和 Uniapp 的开发效率和代码质量。