那些让编码效率起飞(前端)的工具了解一下

| 导语 想晚上吃鸡?前端编码效率提升工具了解一下?

一、Bash篇(Mac)

  • iTerm2

iTerm 2 is a terminal emulator for Mac OS X that does amazing things.

iTerm就不用过多介绍了,用过Mac的人基本都会用,比Bash更多的功能,可以说是非常的好用了。

  • Hyper

如果你是一个完美主义者,用了iTerm之后你肯定会发现它的状态栏还是Mac原生的,和内容区域还是会有一种割裂感。

[ iTerm的软件界面 ]

Hyper能上面和iTerm差不多,但是在界面上却是浑然一体的,这点深点我的心,强迫症用户可以试试吧:

[ iTerm软件界面 ]

  • Zsh

zsh 是一款功能强大的 shell 软件,它可以兼容 bash,并且提供了很多高效的改进。

zsh相对比bash拥有更多的功能改进之处:

  • 更好的自动补全
  • 更好的文件名展开
  • 强大的定制性

安装:

sh-c"$(curl-fsSLhttps://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

zsh拥有一套功能非常完整的Plugin系统,这里推荐一下我常用的几个非常好用的**plugin插件**:

如何安装Zsh插件?

  • 将GitHub上的plugin插件clone到~/.oh-my-zsh/custom/plugins,例如:

Gitclonegit://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

  • 用 vim (或其他编辑器) 打开 .zshrc 文件,找到插件设置命令(plugins),默认是 plugins=(git) ,我们把它修改为

  plugins=(zsh-autosuggestions git)

插件推荐

  • zsh-autosuggestions

可以帮你记忆输入过的命令,下次输入的时候可以智能提示。

[ autosuggestion ]

  • zsh-syntax-highlighting(自带)

这个插件可以判断你输入的命令是否正确,如果是含有这个命令的会显示成绿色,如无效则显示红色。

[ zsh-syntax-highlighting ]

  • z

强大的目录自动跳转命令,会记忆你曾经进入过的目录,用模糊匹配快速进入你想要的目录。

[ z ]

敲入 z 命令,列出了自从我开始用zsh进入过的目录和他们的权重,进入次数越多,权重越大,便于演示,我删除了我的历史,随便 cd 了一下,保持列表的简洁。z 后面加一个关键词就能跳转到所有匹配的历史路径中权重最高的那个了:

[ z ]

一、Vscode篇(Mac)

  • Code Spell Checker

你是不是会经常有变量命名的时候不知道自己写的英文单词是不是正常?莫慌!有了Code Spell Checker,一切都不是问题,它会帮你检查你当前输入的英文单词是否正确。

[ Code Spell Checker ]

  • Code Outline

开发过程中有些人会习惯使用Outline的功能,没有大纲这个功能开发上感觉总别扭,还好VSCode上有这么个扩展可以看到函数、变量列表。

[ Code Outline ]

  • Document This

Document This是Visual Studio Code扩展,可自动为TypeScript和JavaScript文件生成详细的JSDoc注释。

[ Document This ]

  • Bracket Pair Colorizer

这个插件可以帮助你用颜色快速区分各种代码块的边界,非常的实用:

[ Bracket Pair Colorizer ]

  • Git History

一图胜千言,Git History能够让我们快速看到单前这个文件的git修改历史:

[ Git History ]

  • gitlens

非常有名,就不多介绍了,可以显示代码中某一行的最新修改记录;

[ gitlens ]

  • Guides

给代码添加辅助竖线,加快您看代码的速度:

[ Guides ]

  • Path Autocomplete

这是个人比较喜欢的一个神器,可以帮您在输入路径的时候给出相应的提示,不用我们每次去看了,IDE的体验有木有。

[ Path Autocomplete ]

  • Settings Sync

换台电脑,Vscode配置丢了?莫慌莫慌,有了Setting Sync,自动帮您同步有木有,妈妈再也不用担心我换电脑装环境了。

[ Settings Sync ]

  • TODO Highlight

这个世界上最大的谎言可能就是程序员在代码中写的TODO了!hhhh,不慌不慌,有了这个插件,那些年写的TODO都会亮瞎你的眼。

[ TODO Highlight ]

  • Turbo Console Log

听说你还在一直疯狂输出console.log? 智能console了解一下?

[ Turbo Console Log ]

  • vscode-fileheader

如果有你喜欢文件顶部注释,这个插件可能是你的最爱:

[ vscode-ileheader ]

--------------------------------------------------------------------------------

原文作者:腾讯工程师蒋林源。

来源:腾讯内部KM论坛。

原文发布于微信公众号 - 腾讯NEXT学位(NextDegree)

原文发表时间:2018-08-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

Python对文件进行批量随机重命名

http://blog.csdn.net/vipygd/article/details/7959440

2162
来自专栏杨建荣的学习笔记

Data Guard实现故障自动切换(二)(r11笔记第40天)

今天下午我的一个朋友碰到了一个Data Guard的问题,大体是主备网络出现问题,因为环境中配置了自动切换,结果备库就自动切换为了主库,这样就成了“双主”...

41710
来自专栏杨建荣的学习笔记

Data Guard高级玩法:通过闪回恢复failover备库 (r10笔记第7天)

今天看到有一个网友提了一个问题,描述很简短 测试DG时,主库不能宕机,如何测试failover? 其实这个需求从业务层面来说是合理的,一...

3616
来自专栏杨建荣的学习笔记

假期前的数据库检查脚本之主备关系(r11笔记第46天)

快过年了,很多系统都要进入最后的检查和复验阶段,一方面在节假日前,提前发现问题总比过节的时候发现要好。另一方面如果出现故障的时候能及时进行处理,这个时候我们就需...

29110
来自专栏V站

WORDPRESS插件大全

WordPress博客程序是国外最火最热的一款程序,只要懂点基本的WordPress操作就能自己开发主题,除了能开发强大的主题以外,还有一个强大的功能就是Wor...

8533
来自专栏Python爬虫与算法进阶

淘宝sign加密算法

淘宝对于h5的访问采用了和客户端不同的方式,由于在h5的js代码中保存appsercret具有较高的风险,mtop采用了随机分配令牌的方式,为每个访问端分配一个...

4.5K6
来自专栏后端技术探索

nginx防止DDOS攻击配置(二)

我们用的高防服务器只防流量攻击不防CC,现在的攻击多数都是混合型的,而且CC攻击很多,防CC只能自己搞了,按照第一篇的配置,在实际的使用中效果并不理想。限制每秒...

4982
来自专栏FreeBuf

技术剖析:海莲花OceanLotus Encryptor样本分析

前言 上周,360发布了海莲花的报告,数据收集,分析,解释,加工方面很能让人折服,但是看了其对所谓OceanLotus Encryptor样本的分析,和我自己观...

2157
来自专栏Golang语言社区

从零开始创建一个基于Go语言的web service

20个小时的时间能干什么?也许浑浑噩噩就过去了,也许能看一些书、做一些工作、读几篇博客、再写个一两篇博客,等等。而黑客马拉松(HackAthon),其实是一种自...

4919
来自专栏landv

烽火2640路由器命令行手册-11-IP语音配置命令

(1)       用户输入的ID若在dialpeer表中已存在,且模式匹配,则进入dialpeer配置模式对相应dialpeer进行配置修改;

1503

扫码关注云+社区

领取腾讯云代金券