image
作为前端开发者来说,会经常使用的到VSCode,并作为主力开发工具。作为可能是宇宙最强编辑器的VSCode,有许多强大的功能,但许多功能需要自己去配置
在文章中,分享自己作为前端开发者使用VSCode的常用的插件配置,并打造属于自己的前端利器VSCode
插件
插件安装使用
ctrl+shift+x
orcommmand+shift+x
打开插件商店,输入想要安装的插件名称,然后点击install进行安装
1.中文语言包(汉化)
image
英文不好果断首选中文语言包了,安装后重启VSCode界面就变成中文
image
image
安装完成后一种久违的熟悉感
2.路径补全(Path Intellisense)
image
VSCode默认不带路径提示功能,安装Path Intellisense
后,文件的导入和图片引入都自动路径提示,绝对提高工作效率
- 使用
ctrl+鼠标点击
orcmd+鼠标点击
可以跳转对应的文件
3.成对括号颜色提醒(Bracket Pair Colorizer)
image
开发过程中代码层级比较多会找不到对应的括号
使用Bracket Pair Colorizer
后,会匹配对应的括号并显示相同的颜色
image
4.标签高亮(Highlight Matching Tag)
image
会匹配对应的标签并高亮,方便查找
image
5.颜色高亮(Color Highlight)
image
安装后在css中会高亮颜色
6.TODO高亮(TODO Highlight)
image
会突出显示TODO和FIXE关键字
image
7.文件函数注释(koroFileHeader)
image
可以自动快速的生成文件头部注释和函数注释
image
注释模板可以自己设置非常方便
8.单页面神器(Live Server)
image
算是一个前端开发必备插件了,方便预览网页
image
9.vue必备(Vuter)
image
10.react模板快捷键(ES7 React/Redux/GraphQL/React-Native snippets)
image
做React开发非常方便,快速生成模板
11.ReactNative开发工具(React native Tools)
image
ReacdtNative开发必备
12.代码检测(ESlint)
image
不用过多解释,js开发必备插件
13.代码格式化(Prettier)
image
-
Perttier
代码格式插件,可快速可格式化,通过设置可以保存自动格式 - 通过和
ESlint
配合使用,可以进一步统一代码风格(会单独写一篇文章Eslint+Perttier使用)
以上就是在开发中必备的插件
主题
图标主题
1.Material Icon Theme
匹配了大多的图标
配色主题
1.One Dark Pro
Atom自带主题