前端必備效率工具

工欲善其事，必先利其器，好的工具能給自身帶來超高的工做效率。如下是總結出的高效率工具。

雙屏

絕對效率提升首選，有機會三屏更佳

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主題皮膚美化外觀，並開啓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工具