Mac OSX 開發環境安裝

gistfile1.md

Mac OSX 開發環境安裝

推薦安裝的應用程式

• iTerm2 - 比內建的終端機漂亮且強大
• Sublime Text 3
• BetterTouchTool - 拖拉視窗最大化、增加特定程式的滑鼠手勢
• MacDown - 寫 Markdown 筆記方便，可以先寫好再貼到 GitHub、gist 作筆記。
• Alfred 2 - 取代內建的 Spotlight，可看 介紹。

---

Xcode

務必安裝。從 App Store 安裝。
若要用 iOS Simulator 模擬器也得裝這個。

---

homebrew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

---

用 zsh 取代 OS X 內建的 Bash

brew install zsh

# 將 zsh 換成預設的 shell
chsh -s /usr/local/bin/zsh

再安裝 oh-my-zsh

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

好了之後，更改主題，編輯 ~/.zshrc

vim ~/.zshrc

按 i 進入編輯模式，找到 ZSH_THEME= 這行，改為 ZSH_THEME="dst" 後，再按 ESC 鍵，打 :wq 存檔離開。

註：也可參考其他主題配色，請看 這邊。

---

python & pip & virtualenv

會連帶安裝 pip。

brew install python --with-brewed-openssl

sudo pip install virtualenv

vim ~/.zshrc

# pip should only run if there is a virtualenv currently activated
export PIP_REQUIRE_VIRTUALENV=true
# cache pip-installed packages to avoid re-downloading
export PIP_DOWNLOAD_CACHE=$HOME/.pip/cache

若安裝 PIL 套件發生錯誤

錯誤訊息類似：

/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.9.sdk/usr/include/tk.h:78:11: fatal error: 'X11/Xlib.h' file not found

include <X11/Xlib.h>
           ^
1 error generated.

解決方式，執行：

sudo ln -s /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.8.sdk/System/Library/Frameworks/Tk.framework/Versions/8.5/Headers/X11/ /usr/local/include/X11

再進行安裝就可以了。

---

mongodb

brew install mongodb

# OSX 啟動時即執行 mongodb
ln -sfv /usr/local/opt/mongodb/*.plist ~/Library/LaunchAgents

# 建立 mongodb 目錄
sudo mkdir -p /data/db

# 設定權限
sudo chown `whoami` /data/db

---

Ruby

安裝 git

brew install git
brew install readline

安裝 RVM

curl -L https://get.rvm.io | bash -s stable --ruby

好了之後，可能要手動跑一下

source ~/.rvm/scripts/rvm

安裝 ruby 1.9.3

rvm install 1.9.3
rvm 1.9.3 --default

預設就是裝 2.2.1 版了，1.9.3 版已經停止維護。此步驟做參考就好。

如果不想用 ruby-sass 跟 compass 的話，也可以不裝 ruby 跟 compass。替代方案是 node-sass。

---

Compass

會連帶安裝好 Sass

gem install compass	

---

node.js

npm 在 node 0.6.3 之後已內建於 node，不必另外安裝。

這邊先安裝 nvm，node 的版本管理環境。

git clone git://github.com/creationix/nvm.git ~/.nvm
echo ". ~/.nvm/nvm.sh" >> ~/.zshrc
source ~/.nvm/nvm.sh
nvm install -s v4.1.2 # 穩定版本是 4.1.2 跟 0.12.7
nvm alias default v4.1.2

---

bower

npm install -g bower

---

gulp.js

npm install -g gulp

---

sublime 捷徑

ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

---

pow

安裝

curl get.pow.cx | sh

pow 可以安裝 Anvil 這套 GUI 工具輔助設定

pow 使用在 python 開發時有 port 的情況

echo 8888 ~/.pow/xxx # 之後就可以用 http://xxx.內網IP.xip.io 連上囉!

---

推薦安裝的 Chrome 擴充功能

• Checker Plus for Gmail - 快速查看 Gmail
• ColorZilla - 滴管工具
• Enable Copy - 解除網頁的複製限制
• Fontface Ninja - 查看網頁中的字體
• Google Analytics Debugger - 測試埋的 GA Tracking Code 有沒有生效的工具
• Google 瀏覽內容轉送手機擴充功能 - 將正在瀏覽的頁面直接傳到手機內 (需在手機也安裝應用程式)
• HTML5 Outliner - 查看 HTML5 結構
• JavaScript Errors Notifier - 顯示 JavaScript 錯誤
• JSON Prettifier - 把 JSON 格式弄漂亮
• LiveReload
• Page Ruler - 尺規工具
• PerfectPixel by WellDoneCode - 一個 pixel 都不能差的墊圖工具
• Postman - 測試 API 神器
• 擴充功能Pretty Beautiful Javascript - 把 JavaScript 弄漂亮
• 擴充功能TJDict 線上字典
• Web Developer - 前端網頁輔助工具
• XML Tree - 把 XML 弄漂亮
• Semantic inspector - Scheme.org 檢視工具
• QR-Code Tag Extension - 把目前瀏覽的網頁網址做成 QRCode

---

Sublime Text 3 安裝套件與設定參考

設定：

{
	"color_scheme": "Packages/User/SublimeLinter/Oceanic Next (SL).tmTheme", // 或是 base16-ocean.dark (SL).tmTheme。配色 - 看愛用哪套自己改
	"detect_slow_plugins": false,
	"draw_white_space": "all",
	"ensure_newline_at_eof_on_save": true,  // 存檔時確保最後一行是空行
	"fold_buttons": true,
	"folder_exclude_patterns":  // 不要在側邊欄顯示哪些資料夾
	[
		".svn",
		".git",
		".hg",
		"CVS",
		"env",
		"venv",
		".sass-cache",
		"node_modules"
	],
	"font_size": 15,
	"ignored_packages":
	[
		"Vintage",
		"GitGutter"
	],
	"show_full_path": true,  // 在標題列顯示完整路徑
	"soda_folder_icons": true,
	"tab_size": 2,  // 縮排的單位
	"theme": "Soda Dark 3.sublime-theme",  // 主題 - 看愛用哪套自己改
	"translate_tabs_to_spaces": true,  // 將 tab 改為 space
	"trim_trailing_white_space_on_save": true  // 存檔時自動削除行尾的空白
}

安裝套件：

	"AngularJS",
	"Babel",
	"Better CoffeeScript",
	"BracketHighlighter",
	"CoffeeCompile",
	"ColorPicker",  // 選色器 (cmd + shift + c)
	"CSS Format",  // 把 CSS 整理漂亮
	"DocBlockr",
	"EditorConfig",  // 讀取專案中的特定設定 (例如可讀取專案指定的縮排是幾個字元)
	"Emmet",  // HTML 標籤快速產生
	"Git",  // Sublime 裡面也可操作 Git
	"GitGutter",  // 編輯時快速於編輯行前方顯示 git diff 記錄
	"HTML Boilerplate",  // HTML 樣板快速產生 (先打 htmlboiler 再按 tab 產生)
	"HTML2Slim",  // HTML 轉 Slim
	"HTMLBeautify",  // 整理 HTML 變漂亮
	"Jade",
	"Javascript Beautify",  // 整理 JavaScript 變漂亮
	"JavaScriptNext - ES6 Syntax",
	"Jinja2",  // Python Flask 的樣板引擎 syntax 支援
	"JSX",
	"LESS",
	"Libraries from CDN",
	"LiveScript",
	"Markdown Preview",  // 快速於瀏覽器中預覽 Markdown 語法
	"nginx",
	"Open-Include",
	"Package Control",
	"ReactJS",
	"SCSS Snippets",
	"SideBarEnhancements",  // 加強側邊欄功能，推薦必裝
	"spacegray",
	"Stylus",
	"SublimeLinter",  // 一堆 Linter
	"SublimeLinter-coffeelint",
	"SublimeLinter-contrib-scss-lint",
	"SublimeLinter-jshint",
	"SublimeLinter-pep8",
	"SyncedSideBar",  // 目前在看哪個檔案，側邊欄的檔案焦點就會到哪
	"Syntax Highlighting for Sass",
	"Theme - Soda",
	"Theme - Spacegray"

ESLint in Sublime Linter

透過 npm 安裝 eslint：

npm install -g eslint

然後在 Sublime Text 3 中安裝 SublimeLinter、SublimeLinter-contrib-eslint。

接著更改 SublimeLinter 的設定檔（User）：

SublimeLinter.sublime-settings:

{
    "user": {
        "paths": {
            "linux": [],
            "osx": [
                "/Users/patw/.nvm/versions/node/v6.5.0/bin/" // 這邊看安裝 node 的位置在哪，我是用 nvm 裝的
            ],
            "windows": []
        }
    }
}

重開 Sublime Text 3。

vim 設定

cd ~
sudo rm -rf .vimrc
git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim
vim .vimrc

" 檔案編碼
set encoding=utf-8
set fileencodings=utf-8,cp950

" 喜好設定
syntax on " 語法上色
set nocompatible
set nu
set tabstop=4
set softtabstop=4
set expandtab
set ic
set hlsearch
set incsearch
set history=100
set cursorline

filetype off                 " required!
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" let Vundle manage Vundle
" required!
Plugin 'VundleVim/Vundle.vim'
" My Bundles here:
"
" original repos on github
Plugin 'JSON.vim'
Plugin 'hail2u/vim-css3-syntax'
Plugin 'cakebaker/scss-syntax.vim'
Plugin 'othree/html5.vim'
Plugin 'ap/vim-css-color' "css 顏色
Plugin 'evgenyzinoviev/vim-vendetta' "colorscheme
Plugin 'itchyny/lightline.vim' "statusline
Plugin 'ervandew/supertab'
Plugin 'tpope/vim-fugitive' "status git branch
Plugin 'junegunn/vim-easy-align' " 自動對齊工具
" All of your Plugins must be added before the following line
call vundle#end()            " required
filetype plugin indent on    " required
" To ignore plugin indent changes, instead use:
"filetype plugin on
"
" Brief help
" :PluginList       - lists configured plugins
" :PluginInstall    - installs plugins; append `!` to update or just :PluginUpdate
" :PluginSearch foo - searches for foo; append `!` to refresh local cache
" :PluginClean      - confirms removal of unused plugins; append `!` to auto-approve removal
"
" see :h vundle for more details or wiki for FAQ
" Put your non-Plugin stuff after this line

在 vim 內執行 :PluginInstall 即可安裝所有的 plugin。

觸控版設定

defaults import com.apple.AppleMultitouchTrackpad 匯出的觸控版設定檔.plist

references