VSCode Extensions

自用 VSCode 插件 - 持续更新

Settings Sync

编辑器设置同步(到github)，包括插件，配置等。

Vue 插件

Vetur

目前 VSCode 上面最好用的 Vue 插件。能够实现在 .vue 文件中：
- 语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript
- 语法高亮，包括 html/jade/pug css/sass/scss/less/stylus js/ts
- emmet 支持
- 代码自动补全（目前还是初级阶段），包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript
配合 ESLint 插件食用效果更佳。
Vue VSCode Snippets

Vue语法片段, 增强您的 Vue 工作流程
VueHelper

另一款 Vue 语法片段

Import Cost

引入包大小计算, 对于项目打包后体积掌握很有帮助

代码格式化

AutoFileName // Auto Close Tag // Auto Rename Tag

自动提示补全文件路径

自动闭合HTML标签

修改 html 标签，自动帮你完成尾部闭合标签的同步修改，不过有些bug
Beautify

代码格式化插件
ESLint

ESlint 接管原生 js 提示，可以自定制提示规则。这个比较高玩
Better TOML .toml文件代码高亮
Prettier - Code formatter

自用一款代码格式化插件,可配合Vetur与ESlint使用
Bootstrap 3 Snippets

Bootstrap 重度用户首选, 快速引用和代码生成。
Bracket Pair Colorizer

让括号拥有独立的颜色，易于区分。可以配合任意主题使用。
Chinese (Simplified) Language Pack for Visual Studio Code

设置 VScode 语言为中文, 英文盲人用户必备
Color Highlight

颜色值在代码中高亮显示
Color Info

这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
CSS Peek

使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
Code Blue

一个精心调制的黑暗主题微妙的蓝色和明亮的色彩，很容易在眼睛集中编码。
Code Runner

在使用 VSCode 编译时，有的时候需要执行某段代码，这个时候就需要用到Code Runner，Code Runner可以跑C/C++/JAVA/JS/PHP等编程语言
HTML Snippets

超级实用且初级的 H5 代码片段以及提示
HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式新版已经支持scss文件检索
HTML Boilerplate

通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。
JavaScript Snippet Pack

js代码段快速生成
jQuery Code Snippets

jq代码段提示。
Live Sass Compiler

提供sass文件编译, 另外安装此插件默认自带Live Server插件
Markdown Preview Enhanced

在编辑器中对markdown进行预览

24.

Path Intellisense

另一个文件路径提示。，默认不带这个功能的
Project Manager

快速切换项目, 免去多开窗口, 优秀的项目切换插件
open in browser

由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。
vscode-icons

使您的编辑更具吸引力的图标！让 vscode 资源树目录加上图标，必备良品！
Bookmarks

书签工具,可以在代码上标注书签,可快速定位代码段,从而提高开发效率
Live Server

.html 文件启动本地服务器
Class autocomplete for HTML

34.2 IntelliSense for CSS class names in HTML

自动提取类名, 并在使用时提示

主题:

Dracula Official 一款暗黑主题

background

修改背景，设置编辑器界面的背景图片。但是好像现在会出错，具体设置内容在vsc找到插件看详细信息。

  // 搭配主题使用: 
  "workbench.colorTheme": "Dracula",
  // settings.json 中添加如下配置
  "background.customImages":[ // 背景图片 允许3个
    "https://user-images.githubusercontent.com/24371189/47023104-85336080-d191-11e8-957f-b4ac3f8a24c1.png",
    "https://user-images.githubusercontent.com/9987486/40583669-d6189844-61c5-11e8-89e3-c52ad153da09.png"
  ],
  "background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "right": "0",
    "bottom": "0",
    "width": "100%",
    "height": "100%",
    "z-index": "213",
    "background-size": "contain",
    "opacity": 0.3,
  },
  "background.useDefault": false,
  "background.useFront": false, // 背景图在代码下面

One Monokai
One Dark Pro
Material Icon – 图标

Git:

GitLens

增强Visual Studio Code内置的Git功能 - 通过Git责备注释和代码镜头一目了然地实现代码作者身份，无缝导航和探索Git存储库

Git History

Document This (注意: 新版的vscode已经原生支持)

在TypeScript和JavaScript文件中自动生成详细的JSDoc注释。

Code Spell Checker

单词拼写错误, 给出错误拼写单词的建议。

VSCode Extensions

Vue 插件

代码格式化

主题:

Git:

xn213