原文鏈接 作者：埋名

前端入坑多年，用過很多的軟體和工具，就在此分享給大家一個「老司機」的工具庫吧。我現在主要的開發語言是javascript，在做一些項目經理還有產品的一些工作。

我是從做設計轉做前端的，做了兩年的設計，學了一些設計和繪畫的軟體如：PS、AI、Painter 等，現在這裡只介紹我入前端坑以來，外加我其它工作中常用使用的效率工具。

我的工作環境是從Windows轉向Mac的，用了Mac之後回不去了，Mac對於不擼遊戲的玩家，要比Windows出眾太多，所以這裡只介紹我的電腦裡面有的軟體，但是很多軟體是跨平台Windows上面也是有的哦。

編輯器

1. SublimeText(Windows/Mac)可以長期免費試用

這個工具已經很火了，我之前是99%的碼是這上面擼出來的。關鍵是它的小巧、簡潔、快槍手，長大的文本打開速度也是杠杠的。編碼壘字的神器，還能覽圖/文件對比/....

擁有插件擴展機制，在它上面有一系列特別好用的插件，其中最喜歡的插件是 PlainTasks 我用它做一些簡單的任務管理，比如寫日報等

2. Atom (Windows/Mac)免費

這個軟體也有很多人用。最近用得也特別多，最主要是這個軟體我拿它開發ReactNative相關的項目，對ReactNative開發有個官方插件對調試代碼提示都比較友好，Atom這個軟體我有些不喜歡，它啟動太慢了，大的文本文件打開要非常之久，無法忍受，沒有辦法ReactNative官方給它退出了個插件Nuclide。所以我一直用它，不過呢界面和代碼高亮其實我挺喜歡的，啥時候能優化一下性能，我估計就拋棄的Sublime，雖然我已經拋棄Dreamweaver....。

3.Vim (Windows/Mac)免費

這個是個古老的編輯器，我接觸到它的時候，其實是看到一個PHP程序猿在使用它來擼碼，然後我接觸到伺服器部署等問題的時候，經常會使用它改一些配置和臨時更改一些文件。很顯然我已經掌握了它的使用。如果你使用它來做前端開發你需要一系列插件幫助你提供效率。在我的這個倉庫裡面有插件的各種玩法。

4.HBuilder(Window/Mac)免費

剩下就是這個國人開發的編輯器了，通常帶新手的時候我建議他們安裝這個編輯，因為上面的JS提示等各種很優秀，其實過往的一個軟體Webstorm同樣優秀，為啥不推薦它呢，主要它是個收費軟體，身為程序員不建議你破解它，本著支持國貨的態度，所以推薦HBuilder。

5. 其它我不用的優秀編輯器

a). Adobe推出的Brackets(Window/Mac)免費/開源編輯器，這個是它的倉庫GitHub - adobe/brackets: An open source code editor for the web, written in JavaScript, HTML and CSS.://github.com/adobe/brackets/，它的官網在這裡 Brackets - A modern, open source code editor that understands web design.

b). 微軟推出的Visual Studio Code(Window/Mac)免費/開源編輯器，GitHub - Microsoft/vscode: Visual Studio Code，你可以去它的官網去看看它的介紹Visual Studio Code

命令行工具Terminal

1. iTerm(Mac)免費

它是 OS X 下一款開源免費的的終端工具，直接替代自帶的Terminal。這個可是Mac下最好用的終端工具了，沒有之一，堪稱神器，尚方寶劍?。官網在這裡：iTerm2 - macOS Terminal Replacement，它的特性太多了，如智能查找、切分屏幕、標籤變色、智能選中、命令自動補齊、查看命令歷史、全屏展示所有的tab等等。作為一個前端開發工程師，其實你慢慢的發現終端工具你使用越來越頻繁了，所以你需要一個趁手的工具來高效完成你的工作。

2. oh my zsh

這個之前介紹了，我還為它發了一篇微信文章《前端工程師也需要zsh》點擊進去看看？裡面介紹了安裝和使用方法。

官網：Oh My Zsh

Github: https://github.com/robbyrussell/oh-my-zsh

版本控制Git/SVN

Git是一款免費、開源的分散式版本控制系統，用于敏捷高效地處理任何或小或大的項目。我已經多年不使用svn了，其它的版本控制工具我也沒有使用過，如果你還不知道它，或者不能使用它我也不能說你什麼。

官網在這裡：Git

通常情況下我不太使用GUI，但是一般我在帶新手的時候先建議他們安裝GUI，然後慢慢學習命令行下操作。在git 官網上這種GUI工具多達十幾款，在Mac平台我推薦一兩款好用的軟體GUI，官網GUI客戶端列表https://www.gitscm.com/downloads/guis

1. DiffMerge (Windows/Mac/Linux)免費

DiffMerge 是一款可視化的文件比較（也可進行目錄比較）與合併工具。 該軟體主要具有文件差異比較、自動化的文件合併、以及文件夾差異比較這三大功能。這裡下載：SourceGear | DiffMerge

2. SourceTree (Windows/Mac)免費

官網在這裡：Free Mercurial and Git Client for Windows and Mac

3.Gitup(Mac)免費開源

好玩的Gitup是 Mac OS X 的全功能開源 Git 客戶端,提供快速,安全的操作,直接在硬碟上與 Git 資料庫交互,操作庫的圖而不是操作 commits，官網在這裡：GitUp

4. Cornerstone(Mac)收費工具

Cornerstone是Mac上最佳的SVN管理工具

5.Versions(Mac)收費工具

Versions是一款Mac平台下非常棒的SVN同步管理客戶端

資料庫

1. Sequel Pro(Mac)免費

Sequel Pro for Mac是一款Mac平台的MySQL管理工具，sequel pro for mac是MySQL資料庫管理應用程序，官網在這裡：Sequel Pro

2. Chrome MySQL Admin免費

這個是一個Chrome插件，是MySQL開發的跨平台、可視化資料庫工具。你可以翻牆，通過Chrome應用商店下載。

3. Robomongo(Windows/Linux/Mac)可以免費使用

Robomongo是一個開源的，基於Shell的MongoDB圖形化客戶端管理軟體，主要由C++語言編寫成，可運行在Windows，Linux和Mac OS X系統上。由於它內置了JavaScript引擎，所以在MongoShell中執行的任何操作都可以同樣的在Robomongo的Shell中執行，最值得一提的是，它支持直接對數據以json方式瀏覽和修改，非常方便。官網在這裡：Robomongo a€」 native MongoDB management tool (Admin UI)

設計/產品

1. Sketch(Mac)收費

它是一款mac平台下輕量，強大的矢量設計軟體。很顯然我已經放棄PS和AI，他們太臃腫和收費太貴。還有人把這個當作產品經理用來畫原型，我個人看這個是不合理的，他是一個UI設計軟體畫原型其實時間成本太高，為什麼有產品經理用它來畫原型呢，說明它使用之簡單，之漂亮。官網：Sketch - Professional Digital Design for Mac

這個是我常用的設計軟體，已經放棄了PS。啊...

2. Sketch Toolbox(Mac)開源免費

它是一款能夠讓你在一個地方集中查找、下載、安裝Sketch插件的工具。在這裡啦：GitHub - buzzfeed/Sketch-Toolbox: A plugin manager for Sketch.app

3. Affinity Designer(Mac)收費

它是一款專業的設計繪圖工具，適用於蘋果操作系統，主要用於矢量圖形的繪製，適用於圖標、UI 設計、網站設計、宣傳素材等圖像的製作，具有較強的易用性，操作也十分方便。

4. Icon Slate(Mac)免費

是一款讓您輕鬆創建，輸入和輸出多種格式電腦和移動終端程序圖標的圖標製作工具。主要是能輸出ico格式的哦，

5. IconJar(Mac)免費

是一個可以幫助設計師搜索、收集、管理的素材工具，可以極大的提高設計師們的素材庫使用效率，減少尋找有效素材的時間，提高工作效率，該工具目前進支持Mac系統。官網：Iconjar

6. Justinmind(Mac)免費

畫原型圖工具，justinmind相比axure功能更豐富強大，但是團隊合作比較難用主要是同步比較慢，jm功能豐富相對新手入手就有入門學習成本。好像不支持SVN。官網：Prototyping platform for web and mobile apps

7. Axure RP 8(Windows/Mac)收費

畫原型圖工具，它能使用SVN工具，進行版本控制，使用成本。官網：Prototypes, Specifications, and Diagrams in One Tool

8. Mockplus(Windows/Mac)收費

是更快更簡單的原型設計工具。交互快、設計快、演示快、上手快。拖一拖鏈接完成交互設計,放一放組件完成原型圖,掃一掃二維碼在手機中演示。Mockplus 做原型，更快，更簡單！

9. XMind

是一款實用的思維導圖軟體,簡單易用、美觀、功能強大,擁有高效的可視化思維模式,具備可擴展、跨平台、穩定性和性能,真正幫助用戶提高生產率,促進有效溝通及協作。XMind: The Most Popular Mind Mapping Software on The Planet.

10.PostMan

是一款功能強大的網頁調試與發送網頁HTTP請求的Chrome插件。

11.Gliffy Diagrams

是一款相當實用的Chrome套件，而且可以離線使用，透過這個工具可以繪製各種圖表，且透過模組化的物件來製作圖表，將大大提高工作效率，節省時間成本。

12.RoboCompass

同上這個是在先版本需要翻牆。

正則表達式編輯器

1.Reginald

2.Reggy

2.RegExRX

其它軟體

1.Homebrew(Mac)開源免費

可以理解為Ubuntu上的apt-get，用這個軟體可以輕鬆的裝其他的Mac上的軟體。主要是服務程序員的，這是一個非常重要的對於程序員來說不可或缺的Mac軟體。官網在這裡：Homebrew — The missing package manager for OS X

2.Cakebrew(Mac)開源免費

這個是方便管理Homebrew的GUI軟體，不用在命令行安裝程序，並且可以方便的查看本地通過Homebrew安裝了那些軟體，搜索安裝並軟體。官網在這裡：http://www.cakebrew.com

3. CheatSheet(Mac)免費

CheatSheet 是一款Mac上的非常實用的快捷鍵快速提醒工具，你只需要按住Command鍵，就會彈出當前應用的所有快捷鍵列表，所以你記不住一些軟體的快捷鍵沒有關係，只需要使用CheatSheet，隨時提醒你當前軟體的所有快捷鍵，比如Safari、Finder、Photoshop，簡單實用並且完全免費，支持中文，非常不錯！這裡下載：CheatSheet

4. TeamViewer(跨平台)個人使用免費

用於實現遠程支持、遠程訪問、遠程管理、家庭辦公及在線協作和會議功能的軟體。支持Windows、Mac、Linux、Chrome OS、iOS、Android、Windows Mobile和BlackBerry平台。官網Dash是一個API文檔瀏覽器（ API Documentation Browser），以及代碼片段管理工具（Code Snippet Manager）在這裡：TeamViewer

5. Dash

Dash是一個API文檔瀏覽器（ API Documentation Browser），以及代碼片段管理工具（Code Snippet Manager）,Dash在Mac App Store裡面免費提供下載。

6. licecap(Windows/Mac)可以免費使用

是一款屏幕錄製工具，支持導出 GIF 動畫圖片格式，輕量級、使用簡單，錄製過程中可以隨意改變錄屏範圍，本文中Gif圖片就是這個軟體生產出來的。官網：Cockos Incorporated

7.Leaf(Mac)收費

Leaf Mac版是OS X 上一款 RSS 客戶端程序，也是一款輕型閱讀軟體，界面很漂亮，UI和交互都挺新穎，對於輕型閱讀，新穎的交互形式很美觀很大方。Mac App store中可以購買。

8. VOX

Mac 上最好用的免費全能音樂播放器，擼碼之餘聽聽歌是一種享受。

9. Lantern

免費的翻牆工具

10.Grappler

Grappler是一款可以從網頁上抓取音樂和視頻的軟體，支持Flash和HTML5的視頻格式。

11.wxmp

Chrome插件優化在微信公眾賬號中發文章介紹在這裡，我已經生成了Wxmp.crx 文件，這裡下載

Releases · jaywcjlove/wxmp · GitHub

Mac上的軟體下載網址推薦

1. 類似於iOS上Cydia一樣的第三方軟體商店

2. 玩轉蘋果

3. 玩兒法

4. Mac軟體下載站

5. MacPeers

6. Mac志

7. Mac軟體分享

8. AppKed

9. 蘋果軟體園