提升前端开发效率的工具

大家好，我是scaler，最近刚来上海，原科大讯飞前端开发，现入职平安壹钱包。由于换了一个工作环境，所有的东西都需要重新习惯，所以希望把一些好的前端开发的 工具 分享给大家。文章很长~马了之后慢慢看。

VSCode系列

推荐大家使用vscode编辑器，轻量、插件库丰富，下面是提高效率的vscode插件。

1、Setting Sync 多台电脑同步你的vscode插件库

推荐指数 :star::star::star::star::star:

将你的vscode配置和插件上传到github上，其他电脑仅需同步下就可以获得你积累多年的插件库

1、一个github账号(没有注册一个)。

2、右侧自己头像 -> setting -> Developer settings -> Personal access tokens

3、填写token描述，选择gits scopes，点击生成token，复制你生成的token

4、在vscode插件模块中搜索Setting Sync，安装就完事了

shift + Alt + U 上传你的插件配置，首次上传需要输入之前拿到的GitHub的token

好了，快乐就完事了，行动起来，马上上传你的git插件库~当然你也可以和你的团队共享你的插件库，前提你要把token和gist透漏给他们~

2、Git History 和 Git Lens 便捷你的版本管理

推荐指数 :star::star::star::star:

gitEasy肯定你们都有了，让许多git命令可视化操作，现在推荐他们，对~就是他们，可以让你的git操作更如鱼得水（优雅甩锅，这行代码不是我开发的）

看下效果

哇，这行菜鸡代码是你写的 ~咦~

想找历史变更，每个版本的几记录，版本分支线？右上角四个图标分别代表 git log、当前更改对比、前一版本更改的对比、当前文件每一次版本的更改记录都炒鸡好用。尤其在产品这个糟老头子的百变需求面前。

更多特性，你们慢慢发掘~

3、change-case 枚举、常量敲错者的福音

推荐指数 :star::star::star::star:

话不多说，插件库搜索起来，安装下，他长这样

是不是驼峰转全大写要检查好几次，大写转小写又要检查好几次，有了这个插件，你只要有一种类型的命名，其他类型交给他来办。

选中你要转换的命名

ctrl/commend + shift + p 唤起命令

选择change case

不认识每个代表什么转换没关系，后面的有转换后的样子

4、其他常用插件

LeetCode -> 空闲时间烧光自己的脑细胞，长这样

Bookmarks -> 让你某行炫酷的代码标记为书签，可随时查找，长这样

background -> 让你的vscode背景自定义，可萌、可基，长这样

SVG Viewer -> 让你的svg可视化，长这样

还有一些框架常用插件，大家估计都用上了，我就不一一列举了。如果还有特别炫酷的插件可以在评论区告诉大家~

5、代码片段功能，可以参考我这篇文章

VScode快速一键生成html、vue、jsx、ajax、sass、 docker 等代码片段

chrome 系列

chrome是前端使用最多的浏览器，他的插件库也十分的丰富，但是苦于某些原因，无法访问到chrome商店。自己搭建一个vps又太麻烦，自己买vpn又太贵。当然有钱任性的大佬可以无视，但是如果不是看YouTube、twitter等，可以搜下 谷歌访问助手 这个插件，可能需要将首页设置为制定的首页，毕竟人家也是要恰饭的。不想设置也行，GitHub上搜一下，后面的事情我也不知道了啊，咱也不敢问。安装好以后就可以愉快的访问谷歌扩展程序商城啦~

记得注册和登陆google账号，这样你的插件和书签又可以同步啦~

是不是可以很开心~

JSONView -> json文件格式化，妈妈再也不用担心强迫症的我了，长这样

Axure RP Extension for Chrome -> 再也不用IE看原型图了，长这样

React Developer Tools -> React开发必备，长这样

Redux DevTools -> Redux开发必备，长这样

Vue.js devtools -> Vue开发必备，长这样

划词翻译 -> chrome上读英文文档不要太方便，长这样

The QR Code Extension -> 网址秒变二维码，移动开发的利器，长这样

ModHeader -> 修改ajax请求，长这样

好了，这些都是我常用的~希望大家能用上~

还有其他好用的效率工具大家可以在评论区留言，分享给前端路上的小伙伴。

欢迎大家加我微信，有问题可以多交流~蟹蟹（ps：尤其是上海的小伙伴，可面基~）