前端开发必备的VSCode插件和配置
最近一个月我正在从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"
}