首页 工具 开发工具插件

# 账号同步

若是登录了账号，并开启了同步。以下内容会根据账号选择的内容进行同步。

# 卸载与清空 VS Code 配置（window）

  1. 卸载 VS Code
  2. 删除 C:\Users\当前用户\AppData\.vscode 移除安装的插件
  3. 删除 C:\Users\当前用户\AppData\Roaming\Code 移除用户和缓存信息

# VS Code 插件文件

通过命令 & "安装VSCode的路径\bin\code.cmd" --list-extensions > vscode_extensions_full.txt 导出当前 VS Vode 插件文件。

vscode_extensions_full.txt
# ==================== 一、代码编辑与格式化 ====================
aaron-bond.better-comments  # 插件名称：Better Comments | 增强代码注释可读性，支持标记 TODO/警告/疑问；无快捷键，注释前加：// ! 警告、// ? 疑问、// TODO 待办
dbaeumer.vscode-eslint      # 插件名称：ESLint | JS/TS 语法检查与自动修复；快捷键：Ctrl+Shift+I（自动修复）、Ctrl+Shift+P→ESLint: Fix all auto-fixable Problems
esbenp.prettier-vscode      # 插件名称：Prettier - Code formatter | 多文件格式统一（JS/Vue/HTML等）；快捷键：Ctrl+Shift+F（格式化），需开启 "editor.formatOnSave": true 实现保存自动格式化
gregorbiswanger.json2ts     # 插件名称：json2ts | JSON 快速转 TypeScript 接口；操作：选中 JSON→右键→Convert JSON to TypeScript 或 Ctrl+Shift+P→JSON to TypeScript
usernamehw.errorlens        # 插件名称：Error Lens | 行内显示代码错误详情；无快捷键，自动生效，支持自定义显示样式
# ==================== 二、HTML/CSS/样式相关 ====================
pranaygp.vscode-css-peek    # 插件名称：CSS Peek | HTML 中预览 CSS 样式；快捷键：光标放 class/id 上→Alt+F12（预览）、Ctrl+Click（跳转定义）
pucelle.vscode-css-navigation  # 插件名称：CSS Navigation | CSS 导航与跳转；快捷键：F12/Ctrl+Click（跳定义）、Shift+F12（查引用）
vincaslt.highlight-matching-tag  # 插件名称：Highlight Matching Tag | 高亮 HTML/Vue 配对标签；无快捷键，点击标签自动高亮
# ==================== 三、Vue/uni-app 开发专用 ====================
dariofuzinato.vue-peek      # 插件名称：Vue Peek | Vue 组件跳转与预览；快捷键：F12/Ctrl+Click（跳定义）、Alt+F12（预览）
vue.volar                   # 插件名称：Vue (Official) | Vue 3 官方开发工具（语法提示/类型检查）；快捷键：F2（重命名）、Ctrl+.（快速修复）
uni-helper.uni-app-schemas-vscode  # 插件名称：uni-helper（uni-app 配置提示） | uni-app 配置文件 JSON Schema 提示；无快捷键，编辑时自动补全
uni-helper.uni-app-snippets-vscode  # 插件名称：uni-helper（uni-app 代码片段） | uni-app 代码片段（uPage/uComponent等）；操作：输入片段前缀→Tab 补全
uni-helper.uni-cloud-snippets-vscode  # 插件名称：uni-helper（uni-cloud 片段） | uni-cloud 云开发代码片段；操作：输入前缀（如 uCloudFunction）→Tab 补全
uni-helper.uni-helper-vscode  # 插件名称：uni-helper（开发辅助） | uni-app 开发辅助工具集；无快捷键，右键支持快速导航配置
uni-helper.uni-highlight-vscode  # 插件名称：uni-helper（代码高亮） | 增强 uni-app 代码高亮；无快捷键，自动生效
uni-helper.uni-ui-snippets-vscode  # 插件名称：uni-helper（uni-ui 片段） | uni-ui 组件代码片段；操作：输入组件前缀（如 uButton）→Tab 补全
# ==================== 四、高效编辑工具 ====================
formulahendry.auto-close-tag  # 插件名称：Auto Close Tag | 自动闭合 HTML/Vue 标签；无快捷键，输入 <tagName> 自动补全 </tagName>
formulahendry.auto-rename-tag  # 插件名称：Auto Rename Tag | 同步修改 HTML/Vue 配对标签；无快捷键，修改标签名自动同步
obkoro1.korofileheader      # 插件名称：koroFileHeader | 生成文件头部注释（作者/创建时间等）；快捷键：Ctrl+Alt+I（更新注释），新建文件自动生成
# ==================== 五、翻译与词典 ====================
codeinchinese.englishchinesedictionary  # 插件名称：翻译(英汉词典) | 中英文词典；操作：选中单词→右键→英语词典查询 或 Ctrl+Shift+P→英语词典：查询选中单词
hancel.google-translate  # 插件名称： Google Translate | 谷歌多语言翻译；操作：选中文本→右键→Translate 或 Ctrl+Shift+P→Google Translate: Translate
wangguixuan.var-translate-en  # 插件名称：var-translate-en | 变量名翻译（中→英/英→中）；操作：选中变量→右键→变量翻译 或 Ctrl+Alt+T→变量翻译：转换选中内容
# ==================== 六、辅助工具与预览 ====================
kisstkondoros.vscode-gutter-preview  # 插件名称：Image preview | 行号旁预览图片/颜色；无快捷键，悬浮可放大，点击打开图片
ritwickdey.liveserver        # 插件名称：Live Server | 本地服务器+实时预览；操作：右键 HTML→Open with Live Server（启动）、Ctrl+Shift+P→Live Server: Stop Server（停止）
shd101wyy.markdown-preview-enhanced  # 插件名称：Markdown Preview Enhanced | 增强型 Markdown 预览（公式/流程图等）；快捷键：Ctrl+Shift+V（预览）、Ctrl+K V（分屏预览）
techer.open-in-browser       # 插件名称：open in browser | 浏览器打开 HTML；操作：右键→Open in Browser 或 Ctrl+Shift+P→Open in Browser: Open
tomoki1207.pdf              # 插件名称：vscode-pdf | VS Code 内置 PDF 阅读器；操作：双击 PDF 打开，滚轮/方向键翻页、缩放
# ==================== 七、主题与图标 ====================
davidbwaters.macos-modern-theme  # 插件名称：MacOS Modern Theme | macOS 风格主题；快捷键：Ctrl+K Ctrl+T→选择 macOS Modern 主题
vscode-icons-team.vscode-icons  # 插件名称：vscode-icons | 文件图标美化；操作：Ctrl+,→搜索 File Icon Theme→选择 VS Code Icons
wayou.vscode-icons-mac       # 插件名称：vscode-icons-mac | macOS 风格文件图标；操作：Ctrl+,→搜索 File Icon Theme→选择 macOS Icons
# ==================== 八、快捷键与AI辅助 ====================
github.copilot              # 插件名称：GitHub Copilot | AI 代码助手（实时补全）；快捷键：Tab（接受建议）、Esc（拒绝）、Ctrl+Shift+I（手动触发）
github.copilot-chat         # 插件名称：GitHub Copilot Chat | Copilot 聊天界面（代码咨询/调试）；快捷键：Ctrl+Shift+I（打开聊天）、选中代码→右键→Copilot: Ask about selection
# ==================== 九、语言包 ====================
ms-ceintl.vscode-language-pack-zh-hans  # 插件名称：Chinese (Simplified) | VS Code 中文（简体）语言包；操作：Ctrl+Shift+P→Configure Display Language→选择 zh-cn

# 安装插件

# 单个安装

通过 插件名称 在插件市场中安装即可

# 批量安装

window本版
# 读取插件文件并批量安装
Get-Content "C:\Users\你的用户名\vscode_extensions.txt" | ForEach-Object {
  # 跳过注释行（以 #开头）和空行，避免安装失败
  if ($_ -notmatch '^#|^$') {
    code --install-extension $_
  }
}
Mac版本
# 读取插件文件并批量安装（跳过注释和空行）
grep -v '^#\|^$' ~/Desktop/vscode_extensions.txt | xargs -L 1 code --install-extension

# 用户配置文件（本地配置）

settings.json
{
  "settingsSync.ignoredExtensions": [],
  // 颜色主题
  "workbench.colorTheme": "MacOS Modern Dark - Xcode Modern",
  //vscode 主题
  "workbench.productIconTheme": "macos-modern",
  // vscode icon
  "workbench.iconTheme": "vscode-icons-mac",
  // 开启原生括号着色
  "editor.bracketPairColorization.enabled": true,
  // 开启括号配对引导线
  "editor.guides.bracketPairs": "active",
  // 选填：如果你想让引导线一直显示，而不是只在选中的时候显示，改为 true
  "editor.guides.bracketPairsHorizontal": "active",
  // 核心：如果颜色不明显，可以手动强制定义颜色（可选）
  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#FFD700",
    "editorBracketHighlight.foreground2": "#DA70D6",
    "editorBracketHighlight.foreground3": "#179fff",
    // "editorBracketHighlight.foreground4": "#069a50",
    // "editorBracketHighlight.foreground5": "#a20d60",
    "editorBracketHighlight.foreground4": "#06b95f",
    "editorBracketHighlight.foreground5": "#ce137a",
    // "editorBracketHighlight.foreground6": "#0d8080",
    "editorBracketHighlight.foreground6": "#12a5a5",
  },
  // 删除代码行尾空格
  "files.trimTrailingWhitespace": true,
  //koro1FileHeader 插件配置
  "koroFileHeader.autoAdd": false,
  "fileheader.configObj": {
    "autoAdd": false, // 自动添加头部注释
    // "autoAlready" false, // 默认开启，只给支持的语言添加注释
    "createHeader": false, // 新建文件不自动添加注释
    "prohibitAutoAdd": ["json", "md"], // 禁止为 json， md 文件添加头部注释
  },
  // 翻译插件悬停显示
  "EnglishChineseDictionary.enableHover": false,
}

# 代码片段

创建文件后，直接输入代码片段名称，即可快速生成文件基础结构。

{
	"custom-vue3-setup":{
		"prefix": "vue3",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup></script>",
			"",
			"<style lang=\"scss\" scoped>",
			"  @import './style.scss';",
			"</style>",
			"",
		],
		"description": "vue3 + js + scss"
	}
}

过去无法挽回，未来可以改变，有的人成日殚精竭虑，却掀不起什么风浪，有的人却因一念之差，让世界天翻地覆，这就是命运权重。

阅读次数 次

请我喝[茶]~(￣▽￣)~*

NIDLH 微信支付

微信支付

NIDLH 支付宝

支付宝