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