打造属于自己的前端利器VSCode

作为前端开发者来说,会经常使用的到VSCode，并作为主力开发工具。作为可能是宇宙最强编辑器的VSCode，有许多强大的功能，但许多功能需要自己去配置

在文章中，分享自己作为前端开发者使用VSCode的常用的插件配置,并打造属于自己的前端利器VSCode

插件

插件安装使用ctrl+shift+xor commmand+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自带主题