最近一个月我正在从JetBrains系列逐渐转向微软开源的Visual Studio Code进行前端开发(主要是因为我个人觉得做Web前端使用JetBrains那样的IDE的话有点不划算，所以瞄准了个头小得多，反应灵敏得多的VSCode)。

由于VSCode知识一个编辑器，类似于Sublime Text和Atom，需要很多插件的支持才能满足基本的开发需求。我个人认为VSCode的扩展功能做得相当人性化，不过每次更换工作环境安装VSCode后总有那么多插件要安装，自己也不可能全部记下来。所以这篇文章是记录下我收集的针对Web前端开发的一些插件。另外，还提供一些必须的自定义配置。

语法高亮

1. C/C++ Clang Command Adapter

扩展标识符：mitaki28.vscode-clang
这是C/C++的补全提示插件同时具有查错功能。因为平时接触C/C++比较多，所以这个插件也应该需要，即使它并不是前端开发所必须的。

2. HTML CSS Support

扩展标识符：ecmel.vscode-html-css
为HTML文档提供CSS支持。具体的功能大致有Class和ID的补全、Zen Coding的补全、检查在工作目录中存在的CSS/SCSS文件、读取远程CSS样式表等，功能很强大。

3. HTML Snippets

扩展标识符：abusaidm.html-snippets
该插件提供HTML的语法高亮功能，使用户可以通过Tab键自动补全一个Tag，例如：输入div<Tab>，补全为<div></div>。

4. IntelliSense for CSS class names

扩展标识符：Zignd.html-css-class-completion
可以从通过link标签引入的CSS样式中读取Class，并智能提示。

5. JavaScript (ES6) code snippets

扩展标识符：xabikos.javascriptsnippets
ES6的Snippet，同时支持TypeScript。该插件支持很多ES6的语法补全功能，使用起来很方便。

6. Vetur

扩展标识符：octref.vetur
Vue.js必备的插件，支持Vue语法高亮，支持Vue单文件的语法高亮。

工具类

1. Live Server

扩展标识符：ritwickdey.liveserver
这个必须给一万个赞！！！简直不要太实用！这个插件可以开启一个监听本地5500端口的Web服务器，根目录就是当前开启的目录。通过这个插件，预览HTML代码变得相当方便，而且还是热更新的。

2. Path Intellisense

扩展标识符：christian-kohler.path-intellisense
路径智能提示插件，用过IDE的同学都懂的。

3. npm Intellisense

扩展标识符：christian-kohler.npm-intellisense
Node.js和npm神器，自动加载当前项目中已安装和全局中的npm包，再也不用为import时忘记npm包名而担心了。

4. Custom CSS and JS Loader

扩展标识符：be5invis.vscode-custom-css

5. Easy LESS

扩展标识符：mrcrowl.easy-less
实时将Less源码编译成CSS，使用VSCode内建的Node.js和Lessc编译。

6. Autoprefixer

扩展标识符：mrmlnc.vscode-autoprefixer
利用PostCSS中的Autoprefixer插件为CSS加上浏览器头。

7.Auto Rename Tag

扩展标识符：formulahendry.auto-rename-tag
从JetBrains WebStorm带来的习惯，对该功能已经上瘾，幸好VSCode里有相应的插件。

颜色主题&图标主题

1. Material Neutral Theme

扩展标识符：bernardodsanderson.theme-material-neutral

2. VSCode Great Icons

扩展标识符：emmanuelbeziat.vscode-great-icons

自定义配置

直接上JSON吧：

{
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe",
    "workbench.startupEditor": "newUntitledFile",
    "editor.fontFamily": "Dejavu Sans Mono",
    "editor.fontSize": 14,
    "files.autoSave": "afterDelay",
    "vetur.validation.template": false,
    "editor.tabSize": 2,
    "liveServer.settings.donotShowInfoMsg": true,
    "emmet.triggerExpansionOnTab": true,	//这个必须得改，改成true之后就可以Tab补全任意名称的Tag，写Vue的时候贼有用。
    "editor.minimap.enabled": true,
    "window.zoomLevel": 0,
    "material-icon-theme.showUpdateMessage": false,
    "materialTheme.cache.workbench.settings": {
        "themeColours": "Default"
    },
    "workbench.colorTheme": "Material Neutral",
    "workbench.iconTheme": "vscode-great-icons"
}