前端開發mac裝機指南

前端開發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,很優秀的git可視化工具,用命令的可以無視

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

Charles,抓包工具,我只是覺得chrome developer tool就很好用了

Offie 2016,不得不說微軟的這個產品還是挺棒的


分享到:


相關文章: