# 前端必备效率工具

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

# 双屏

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

# Mac

# HomeBrew (opens new window) (opens new window)

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

# Afred (opens new window) (opens new window)

只需要键盘简单输入，即可快速查询或打开应用。效率神器，MacOS必备。 Afred3下载 (opens new window) (opens new window)

推荐实用的workflow：

• vscode: https://github.com/alexchantastic/alfred-open-with-vscode-workflow/releases/tag/v1.0.0(Afred3版本)
• sublime: https://github.com/zenorocha/alfred-workflows#sublime-text-v110--download
• kill:https://github.com/zenorocha/alfred-workflows#kill-process-v120--download
• ip:https://github.com/zenorocha/alfred-workflows/raw/master/ip-address/ip-address.alfredworkflow
• github：https://github.com/gharlan/alfred-github-workflow
• tinypng: https://evolly.one/2019/04/12/77-alfred-gallery/
• color: https://github.com/zenorocha/alfred-workflows#colors-v202--download

可以使用Afred替换掉Mac默认的spotlight，详细：如何禁用Mac系统的Spotlight (opens new window) (opens new window) 无法搜索应用名？sudo mdutil -a -i on 打开索引

# CheatSheet (opens new window) (opens new window)

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

# SourceTree (opens new window) (opens new window)

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

# Wunderlist (opens new window) (opens new window) 滴答清单 (opens new window) (opens new window)

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

# Quick Look插件

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

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

# Chrome

# Github

• # Octotree (opens new window) (opens new window)

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

• # Octohint (opens new window) (opens new window)

  变量名高亮、参数属性提醒等feature，配合octotree，完美

• # OctoLinker (opens new window) (opens new window)

  该插件提供像 IDE 一样的自动链接跳转功能，帮助开发者在浏览代码时进行更高效的代码链接跳转。必备

• # github-file-icon (opens new window) (opens new window)

  自动根据 GitHub 项目文件类型自动替换文件图标，让文件看起来更加直观形象。

• # isometric-contributions (opens new window) (opens new window)

  可以把你的 GitHub Commit 转化为 3D 模式进行显示，让你的提交记录看起来更加直观与生动。

• # GITHUBER (opens new window) (opens new window)

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

# OneTab (opens new window) (opens new window)

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

# QR Code Generator (opens new window) (opens new window)

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

# 有道词典 (opens new window) (opens new window)

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

# Advertising Terminator (opens new window) (opens new window)

著名的广告终结者

# Momentum (opens new window) (opens new window)

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

# FireShot (opens new window) (opens new window)

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

# 终端工具

# iTerm2 (opens new window) (opens new window)

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

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

# oh my zsh (opens new window) (opens new window)

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

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

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

item2和oh-my-zsh教程 (opens new window) (opens new window)

# VSCode插件

# 界面优化

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

# HTML推荐

• Auto Close Tag 自动闭合标签。最新vscode已默认集成
• 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 智能辅助输入路径。最新vscode已默认集成该插件
• Auto Import 自动识别导入
• Code Runner``推荐 执行测试代码
• Import Const 自动计算引入包大小
• Regex Previewer 测试写的正则表达式

# Vue/React推荐

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

# TypeScript

• json2ts 自动转换粘贴板里json数据为ts数据
• TSLint 校验ts语法。已废弃TSLint，TSLint作为插件在ESLint中

# 扩展工具

• 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工具