1. Auto Close Tag
HTML/XML 自动闭合标签。
2. Auto Rename Tag
HTML/XML 标签配对重命名。
3. Bracket Pair Colorizer
括号颜色配对。
4. Chinese (Simplified) Language Pack for Visual Studio Code
本地化界面 中文(简体)语言包。
使用方法:
安装后,在 locale.json 中添加 "locale": "zh-cn",即可载入中文(简体)语言包。要修改 locale.json,你可以同时按下 F1 或 Ctrl+Shift+P 打开命令面板,之后输入 "config" 筛选可用命令列表,最后选择配置语言命令。
5. Class autocomplete for HTML
HTML/XML 智能提示class。
6. code settings sync
配置同步到码云。
(1)配置码云。
注册并登录 码云。
设置 -> 私人令牌 -> 生成新的令牌:
私人令牌描述: vscode_sync
请选择将要生成的私人令牌所拥有的权限: gists
拷贝并保存生成的 token。
导航 -> 发布代码片段:
代码概要: vscode_sync
所属分类: 其它
编程语言: JavaScript
标签: vscode_sync
代码片段: code settings sync
(2)配置 VSCode。
扩展 -> code settings sync -> 齿轮 -> 扩展设置
填入 保存的 token 与 gist Id。
F1 进入命令面板:
上传命令: upload setting
下载命令: download setting
7. Code Spell Checker
拼写检查器。
单词添加到词典:
add "word" to user dictionary
将“word”添加到用户字典
add "word" to folder dictionary
将“word”添加到文件夹字典
add "word" to workspace dictionary
将“word”添加到工作区字典
字典管理:“Ctrl” + “,”。
8. Dracula Official
配色(冷紫色系)恬静、养眼的主题。
9. ESLint
ESLint 语法验证。
点击查看 详细设置。
10. Git History
快速浏览 Git 历史的工具,直观且功能强大。
(1)查看不同分支、不同作者的提交记录。
选中文件 -> 右键 -> Git:View File History
F1 进入命令面板:
Git:View History(Git log) 查看所有分支的历史记录
Git:View File History 查看文件的历史记录
Git:View Line History 查看单行历史变更记录(不常用)
(2)对比不同版本代码。
* 左上导航按钮:
搜索、分支、作者 ..
Search master Authors ..
* 选中版本操作按钮:
View 查看当前版本
Workspace 工作区版本对比
Previous 与上个版本对比
History 查看所有历史记录
(3)恢复、合并、变革.. 等功能。
点击查看 详细设置。
11. GitLens — Git supercharged
右侧(深灰色)自动显示当前行 Git 详细信息,包括作者、分支等。
12. HTMLHint
HTML 语法验证。
13. htmltagwrap
将选择的代码包装在 HTML 标签中。
快捷键:“Alt” + “W”,可设置里更换默认标签。
14. Image preview
悬停显示图像预览。
15. Indenticator
突出显示当前的缩进深度。
16. JavaScript (ES6) code snippets
ES6 代码片段。
为JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持。
17. JavaScript Snippet Pack
JavaScript、TypeScript 代码片段。
节选
简写
完整
[cl]
console.log
[al]
alert
[fn]
function
[gi]
getElementById
[gc]
getElementsByClassName
[get]
getElementsByTagName
[qs]
querySelector
[qsa]
querySelectorAll
[ih]
innerHTML
[tc]
textContent
点击查看 详细设置。
18. jQuery Code Snippets
超过130个 jQuery 代码片段。
只需输入字母“ jq”即可获取所有可用的jQuery代码片段的列表。
19. language-stylus
stylus 语法支持。
20. Live Server
实时重载的本地服务器。
21. Markdown All in One
MD 快速编写工具集(内置很多快捷编辑)。
点击查看 详细设置。
22. Node.js Modules Intellisense
可以在导入语句中自动完成 JavaScript / TypeScript 模块。
23. npm
npm 依赖项验证。
24. npm Intellisense
自动完成导入语句中的 npm 模块。
25. Manta's Stylus Supremacy
Stylus 格式化配置
// Stylus 格式化风格配置
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分号
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
26. Output Colorizer
为输出/调试/扩展面板和*.log文件添加了语法着色。
27. Path Intellisense
路径自动识别。
28. Power Mode
炫酷粒子效果(提升输入心情)。
settings.json 中添加设置:(启用并关闭抖动)
"powermode.enabled": true,
"powermode.shakeIntensity": 0,
29. Prettier - Code formatter
代码自动格式化
30. Quokka.js
JavaScript、TypeScript的快速原型平台,实时显示代码执行结果。
“F1” 在命令面板键入 Quokka,选择并运行 New JavaScript File 命令(“Ctrl”+“K” 后按 “J” 可直接进入),便可在新页面里测试。
31. Regex Previewer
正则表达式预览器。
“Ctrl” + “Alt” + “M” 打开测试页面。
32. Sass
Sass 语法支持。
33. SCSS Everywhere
Scss 自动查找提示 CSS 类定义。
34. SVG Viewer
SVG 管理器。
点击查看 详细设置。
35. TSLint (deprecated)
TSLint 语法验证。
36. TypeScript Importer
TypeScript导入器,自动搜索 TypeScript 定义。
37. TODO Highlight
高亮显示 注释 TODO
38. Vetur
Vue 综合工具(语法高亮, 代码片段、质量提示&错误、格式化/风格、智能提示等)。
"vetur.format.defaultFormatterOptions": {
// 格式化 设置
"prettier": {
"tabWidth": 2, // 缩进为两空格
"semi": false, // 结尾不使用分号
"singleQuote": true // 使用单引号
}
}
39. vscode-icons
图标主题。
40. Vue 3 Snippets
Vue 3 代码片段。
41. Vue TypeScript Snippets
Vue/Vuex TypeScript 代码片段。
42. VueHelper
vue 代码片段。
可能是 Vscode 中最好的 vue 代码片段插件,不仅包含 vue2 所有 api,还包含 vue-router 2 和vuex 2 代码。
每个代码段都有详细的(官方)描述。