前端開發mac裝機指南（持續更新）

環境準備

首先打開app store 安裝Xcode，並打開，安裝components。不少東西會在Xcode裏面自帶，例如git。

環境基本配置

安裝brew，打開brew官方網站，複製安裝代碼，在終端中粘貼並安裝。

運行 brew install caskroom/cask/brew-cask

運行 brew tap caskroom/versions

Shell轉變

運行 brew install zsh

安裝完成後，運行sudo vi /etc/shells，在文件的末尾加上一行 /usr/local/bin/zsh

保存後，運行chsh -s /usr/local/bin/zsh，可能須要輸入密碼

運行sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"，開始安裝oh-my-zsh，安裝完成後顯示AsciiArt，即表示安裝完成

運行 brew cask install iterm2 ，安裝iterm2，以後都使用iterm2

前端開發環境

首先安裝node.js，這裏直接使用nvm做爲node.js的管理工具。

因此先安裝nvm，運行 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

安裝成功後從新打開終端，輸入nvm查看是否安裝成功

而後輸入 nvm install stable 安裝最新穩定版 node

而後安裝一些經常使用的工具，例如：

yarn: npm i -g yarn

webpack: npm i -g webpack

vscode安裝

訪問vscode官網直接下載vscode最新版本。

一些推薦的vscode插件

外觀

主題：Brackets Light Pro ，淺色系主題，我的比較喜歡

圖標：VSCode Great Icons，給不一樣類型的文件配置不一樣的圖標，很是直觀；

字體：Fira Code，自從發現並開始使用 Fira Code，我就再也沒多看自其它字體一眼，字體若是比較優雅，尤爲是對數學運算符的處理，寫代碼時你真的會感受在寫詩，哈哈，Fira Code 的安裝過程稍微複雜點，可是效果絕對是值當的；

風格檢查

ESLint：插件式架構，有多種主流的編碼風格規則集可供選擇，典型的有

Airbnb、Google 等，你甚至能夠攢個本身的，按下不表；

StyleLint，一樣插件式架構的樣式檢查工具，不過我在配置其檢查 react-native 中 styled-components 組件樣式時確實費了不小的功夫，能夠單獨寫篇文章了；

TSLint：TypeScript 目前不是個人主要編程語言，但也早早的準備好了；

MarkdownLint：Markdown 若是不合法，可能在某些場合致使解析器異常，由於 Markdown 有好幾套標準，在不一樣標準間部分語法支持多是不兼容的；

其餘軟件推薦

Go2Sheel，能夠在Finder里加一個圖標，點擊即在此目錄打開終端

Sketch，前端必備，和交互設計師合做很方便

SourceTree或Tower，很優秀的git可視化工具，用命令的能夠無視

MacDown，一款免費markdown編輯器，Mou也很好，只是在當前版本下很卡

Charles，抓包工具，我只是以爲chrome developer tool就很好用了

Offie 2016，不得不說微軟的這個產品仍是挺棒的