本人是Vscode编辑器的死忠粉,那漂亮的界面,那可迎合自身习惯高度自定义的插件,爱了爱了...下面是多年来使用Vscode自己总结的前端开发非常非常实用的插件,其中很多不局限于前端,适用于所有人
# 一、全局插件
全局插件并不局限于项目使用的技术栈,是所有前端项目甚至其他语言都适用的插件,是我本人必装的插件
# 1.1 Chinese(simplifled) Language 中文(简体)
作用:软件汉化插件,英语渣必备
如果英语差的,在下载安装后第一件事情便是装此插件,将软件汉化一下,用起来舒心许多
# 1.2 Vscode-icons
作用:用于美化文件和文件夹图标,可以让我们的开发更舒心
效果:使用前系统图标表现力没那么丰富,使用后明显不一样,美观多了
# 1.3 Path Intellisence
作用:路径提示插件,有些时候编译器不能根据输入的路径前缀提示文件,自己输入有可能会出现忘记、漏输等情况,这个插件能很好的帮助到我们
使用前:
可能会出现以下情况,输入前缀后并不提示
使用后:
出现提示,并且还能显示Vscode-icons的图标美化效果
其实现在编辑器都会自动实现路径提示功能,但是有个别情况下出现提示不了的情况下,可以使用此插件补充
# 1.4 Beautify
作用:顾名思义,可以让你的代码更美观,有色觉上的不同颜色高亮
使用后:
# 1.5 Live Server
作用:一个前端开发的神器,可以将项目代理到本地服务器运行
很多时候,我们我项目中有任何请求网络资源行为,就不能在本地文件运行,因为file://协议无法发送网络请求
这时候就要将文件运行为http://127.0.0.1上,安装此插件后,可以非常简单的实现
上图中两种方法都能启用代理
- 右键Html文件,点击
Open with Live Server
即可代理此文件页面 - 点击界面右下角的
Go Live
按钮即可代理整个项目
# 1.6 Bracket Pair ColorIzer
作用:括号对高亮提示
很多时候我们都会因为嵌套结构中的()
、{}
而头晕,这个插件能帮助我们更好的辨识括号对
在使用前,左右的括号都是一种颜色,不容易看出多了还是少了括号
使用后,每一个括号对都用不同颜色标识,一眼就能看出来问题所在
# 1.7 Eslint
作用:起规范代码的作用,对待吗进行严格的检查
让很多人又爱又恨,爱是因为他们规范我们的代码,让我们写出漂亮的代码格式,恨则是因为只要多个逗号之类的他便会报错而使项目无法运行,必须要解决后才能运行
这里要注意可能会跟Vetur插件有点功能冲突,下面一节细讲
# 1.8 Color Highlight
作用:使代码中涉及的色块代码清晰的展示出色块,支持RGB
/RGBA
色值及单词描述色块
# 1.9 VS Code Counter
作用:代码计数器,可以看到项目中写了多少有效代码
# 1.10 TODO TREE
代码事项提示树
它会在右侧增加一个菜单栏,里面陈列代码中使用到 // TODO XXX
标签的所有代码标记
 Language 中文(简体)
- 1.2 Vscode-icons
- 1.3 Path Intellisence
- 1.4 Beautify
- 1.5 Live Server
- 1.6 Bracket Pair ColorIzer
- 1.7 Eslint
- 1.8 Color Highlight
- 1.9 VS Code Counter
- 1.10 TODO TREE
- 二、HTML+CSS+JS
- 2.1 HTML CSS Support
- 2.2 jQuery Code Snippets
- 三、Vue
- 3.1 Vue 2 Snippets
- 3.2 vue-helper
- 3.3 vue-beautify
- 3.4 Vutur
- 四、React
- 4.1 ES7+ React/Redux/React-Native snippets
- 4.2 vscode-styled-components
- 五、Git
- 5.1 GitLens — Git supercharged
- 5.2 Git History
- 5.3 git-commit-plugin