打造自己的Vscode(插件)

image

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

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

插件

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

你可能感兴趣的:(打造自己的Vscode(插件))