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

查看代码片段，拷贝并保存浏览地址中的 gist Id：
https://gitee.com/{username}/codes/{gistid}

（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 代码。
每个代码段都有详细的（官方）描述。

43. translate speaker 翻译朗读者

// 禁用全部功能
"translateSpeaker.disableAll": false,
// 允许在状态栏显示翻译。
"translateSpeaker.translateEnabled": true,
// 翻译显示时间
"translateSpeaker.translateTimeout": 5000,
// 移动光标时发声
"translateSpeaker.voiceCursor": false,
// 输入单词时发声
"translateSpeaker.voiceEditing": true,
// 切换文件时发声
"translateSpeaker.voiceFilename": true,
// 选定单词发声
"translateSpeaker.voiceSelection": true
// 访问google翻译站点后缀
"translateSpeaker.origin": "cn" （ "com" or "hk"） 
/** 通过domain 参数修改翻译网址，默认值为cn

    com => https://translate.google.com
    cn => https://translate.google.cn   
    hk => https://translate.google.hk

**/

// 开启调试模式
"translateSpeaker.debug": false,

工具集 vscode

VSCode之插件配置

1. Auto Close Tag

2. Auto Rename Tag

3. Bracket Pair Colorizer

4. Chinese (Simplified) Language Pack for Visual Studio Code

5. Class autocomplete for HTML

6. code settings sync

（1）配置码云。

（2）配置 VSCode。

7. Code Spell Checker

8. Dracula Official

9. ESLint

10. Git History

（1）查看不同分支、不同作者的提交记录。

（2）对比不同版本代码。

（3）恢复、合并、变革.. 等功能。

11. GitLens — Git supercharged

12. HTMLHint

13. htmltagwrap

14. Image preview

15. Indenticator

16. JavaScript (ES6) code snippets

17. JavaScript Snippet Pack

18. jQuery Code Snippets

19. language-stylus

20. Live Server

21. Markdown All in One

22. Node.js Modules Intellisense

23. npm

24. npm Intellisense

25. Manta's Stylus Supremacy

26. Output Colorizer

27. Path Intellisense

28. Power Mode

29. Prettier - Code formatter

30. Quokka.js

31. Regex Previewer

32. Sass

33. SCSS Everywhere

34. SVG Viewer

35. TSLint (deprecated)

36. TypeScript Importer

37. TODO Highlight

38. Vetur

39. vscode-icons

40. Vue 3 Snippets

41. Vue TypeScript Snippets

42. VueHelper

43. translate speaker 翻译朗读者

相关