snippets vscode 配置_VSCode之插件配置

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 代码。

每个代码段都有详细的(官方)描述。