springleo's blog

# 前端必备效率工具

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

# 双屏

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

# Mac

# HomeBrew (opens new window)

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

# Afred (opens new window)

只需要键盘简单输入，即可快速查询或打开应用。效率神器，MacOS必备。 Afred3下载 (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) 无法搜索应用名？sudo mdutil -a -i on 打开索引

# CheatSheet (opens new window)

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

# SourceTree (opens new window)

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

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

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

# Quick Look插件

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

# Chrome

# Github

# OneTab (opens new window)

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

# QR Code Generator (opens new window)

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

# 有道词典 (opens new window)

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

# Advertising Terminator (opens new window)

著名的广告终结者

# Momentum (opens new window)

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

# FireShot (opens new window)

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

# 终端工具

# iTerm2 (opens new window)

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

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

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

  • zsh-syntax-highlighting (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) 自动提示你曾经敲过的命令，非常实用，推荐。
    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)。厌倦了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)。开启命令行x一键解压
    1. extract插件oh-my-zsh自带，只是默认没开启。添加插件名到后面：plugins=(git zsh-syntax-highlighting zsh-autosuggestions extract)
    2. source ~/.zshrc

item2和oh-my-zsh教程 (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工具

初识C++ →