前端开发必备的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>

https://i.imgur.com/VOhBvHb.gif

4. IntelliSense for CSS class names

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

https://i.imgur.com/5crMfTj.gif
https://i.imgur.com/O7NjEUW.gif

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代码变得相当方便,而且还是热更新的。

https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-explorer-menu-demo-1.gif

2. Path Intellisense

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

http://i.giphy.com/iaHeUiDeTUZuo.gif

3. npm Intellisense

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

https://github.com/ChristianKohler/NpmIntellisense/raw/master/images/auto_complete.gif

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加上浏览器头。

https://cloud.githubusercontent.com/assets/7034281/16823311/da82a3c6-496b-11e6-8d95-0bebbf0b9607.gif

7.Auto Rename Tag

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

https://github.com/formulahendry/vscode-auto-rename-tag/raw/master/images/usage.gif

颜色主题&图标主题

1. Material Neutral Theme

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

https://i.imgur.com/bcaD9jG.png

2. VSCode Great Icons

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

https://raw.githubusercontent.com/EmmanuelBeziat/vscode-great-icons/icons-test/icons.jpg

自定义配置

直接上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"
}

将最新的文章发送到你的邮箱

展示评论