前端必备效率工具

1,765 阅读4分钟

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

双屏

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

Mac

HomeBrew

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

Afred

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

CheatSheet

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

SourceTree

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

Wunderlist

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

Quick Look插件

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

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主题皮肤美化外观,并开启Hotkey Window (快速调出窗口)。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代码片段

TypeScript

  • json2ts 自动转换粘贴板里json数据为ts数据

扩展工具

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