前端必备效率工具

[lq782655835]

工欲善其事，必先利其器，好的工具能给自身带来超高的工作效率。以下是总结出的高效率工具。

双屏

绝对效率提高首选，有机会三屏更佳

Mac

HomeBrew

mac软件包管理，通过命令直接安装工具包，Mac必备。

Afred

只需要键盘简单输入，即可快速查询或打开应用。效率神器，MacOS必备

CheatSheet

长按⌘即可获得当前软件快捷键，初学MacOS同学必备

SourceTree

git gui工具，界面简洁，操作方便

Wunderlist

随时记录思维灵感或备忘录；pc、phone、pad三端统一，方便随时查看

Quick Look插件

MacOS非常人性化的功能之一。只要选中了相应的文件，敲击空格键就可以查看文件的大小、甚至可以可以预览文档，视频、音频等等。但是它还可以变得更加强大，只需要使用 Homebrew 安装一些插件即可。更多ql插件

• qlmarkdown 预览 Markdown 文本效果，强烈推荐
• qlcolorcode 预览代码高亮,强烈推荐
• qlstephen 查看未知拓展名的纯文本文件
• qlimagesize 预览显示图片宽高和大小,告别command + i
• [betterzip]() 预览解压包

Chrome

octotree

在线浏览代码，从此告别github下载代码

Octohint

自动选择源代码中所有变量值，配合octotree，prefect

GITHUBER

开发者的新标签页。推送优质github项目

OneTab

技术神器，查阅资料时，很多舍不得删的google tab标签，统一管理

QR Code Generator

实时生成当前pc网址，H5开发必备。

有道词典

在线划词，阅读英文文档资料首选

Advertising Terminator

著名的广告终结者

Momentum

炫酷的新标签页，与githuber不能同用

FireShot

网页截图，一键滚动截取整个网页

终端工具

iTerm2

Mac自带的终端不是特别方便。 iTerm2是Terminal的替代品，但比Terminal优秀太多了。iTerm2可以设置主题，支持画面分隔、各种快捷键。Mac默认使用的shell是bash，我们可以换成zsh（执行命令chsh -s /bin/zsh即可），搭配iTerm2使用，用起来十分顺手。推荐solarized主题皮肤美化外观。iterm2常用快捷键如下：

• command + T：新建窗口
• command + d：横向分屏
• command + shift + d： 竖向分屏
• command + enter： iterm2全屏
• option + space：全局热键，打开iterm2，实用。（可在设置中修改）
• command + f：查询
• command + 点击文件名： 打开文件
• 双击文字： 复制

oh my zsh

bash提示和界面美观度不够强大，而zsh有强大的自动补全参数和自定义配置功能等。oh my zsh是zsh的集大成者，帮助我们快速上手zsh。oh my zsh炫酷的外表+iterm分屏=程序员必备。

oh my zsh更强大的功能在于其自周边配置插件，oh my zsh维护了一个插件列表，以下推荐实用的几个插件:

• [zsh-syntax-highlighting]()。 命令着色插件，帮助你为终端的命令着色。强烈推荐。
  1. 把插件需要的文件克隆到 zsh 默认的插件目录。执行命令：git clone https://github.com/zsh-users/zsh-syntax-highlighting.git $ZSH_COSTOM/plugins/zsh-syntax-highlighting/
  2. 把插件名称加入 oh-my-zsh 插件列表。修改~/.zshrc，添加插件名到后面：plugins=(git zsh-syntax-highlighting)
  3. 执行配置：source ~/.zshrc
• zsh-autosuggestions
  1. git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions
  2. 修改~/.zshrc，添加插件名到后面：plugins=(git zsh-syntax-highlighting zsh-autosuggestions)
  3. source ~/.zshrc
• autojump。厌倦了mac下找文件不断的cd？autojump帮你一键到达想要的文件位置。
  1. git clone https://github.com/wting/autojump.git $ZSH_COSTOM/plugins/autojump/
  2. 修改~/.zshrc，添加插件名到后面：plugins=(git zsh-syntax-highlighting zsh-autosuggestions autojump)
  3. source ~/.zshrc
• extract。开启命令行x一键解压
  1. extract插件oh-my-zsh自带，只是默认没开启。添加插件名到后面：plugins=(git zsh-syntax-highlighting zsh-autosuggestions extract)
  2. source ~/.zshrc

VSCode插件

界面优化

• vscode-icons推荐 设置vscode图标。最新vscode已默认集成该插件
• Bracket Pair Colorizer推荐 着色匹配括号。相似对插件还有Rainbow Brackets
• Indent-Rainbow 四种不同颜色交替着色文本前面的缩进
• Trailing Spaces 检测多余空格并高亮
• TODO Highlight TODO备忘插件
• Code Spell Checker 代码拼写检查
• Document This doc注视自动生成

HTML^推荐

• Auto Close Tag 自动闭合标签
• Auto Rename Tag 自动重命名标签
• HTML Snippets html自动补全代码片段
• IntelliSense for CSS class names in HTML 在html中智能提示CSS 类名
• HTML CSS Support 在style中智能提示css样式

JS^推荐

• npm Intellisense 智能辅助输入npm包。最新vscode已默认集成该插件
• Path Intellisense 智能辅助输入路径
• Auto Import 自动识别导入
• Code Runner 执行测试代码
• Import Const 自动计算引入包大小
• Regex Previewer 测试写的正则表达式

Vue/React^推荐

• Vetur Vue-VSCode必备，高亮代码，自动补全等
• React-Native/React/Redux snippets for es6/es7 react代码片段

扩展工具

• GitLens推荐 增强了vscode 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码作者身份
• View In Browser 在vscode预览浏览器
• SVG Viewer 在vscode内查看svg图标
• Auto-Open Markdown Preview 实时预览markdown
• Markdown PDF 将markdown文档转为pdf
• Debugger for Chrome vscode中调试在chrome的js代码
• Eslint 校验lint工具