如果你想快速搭好一個開發(fā)環(huán)境，首先身為一個程序員你需要一個代理淀零，否則的話,連接國外網(wǎng)絡(luò)速度會很慢,體驗也很不好秩贰。并且我們是靠技術(shù)吃飯,需要墻外的世界,更重要有Google幫助我們節(jié)約大量的時間。
個人博客地址
代理
在翻墻中最常用的便是shandowsocks, 當(dāng)然不缺錢的話也可以購買surge使用。
不過這些軟件軟件在終端環(huán)境下是無法代理網(wǎng)絡(luò)連接的蛙紫。需要在終端配置才行。
較簡便的方法便是在當(dāng)前終端下執(zhí)行下面代碼途戒。
export ALL_PROXY=socks5://127.0.0.1:1080
127.0.0.1:1080 便是你代理軟件的端口號坑傅。 使用shandowsocks話只要執(zhí)行上面代碼就好。
不過執(zhí)行后只會在當(dāng)前終端下起作用,如果新建窗口那就得還在新窗口下重新執(zhí)行上面代碼才行喷斋。
另外一種方法便是使用 proxychai-ng 進(jìn)行終端代理了, 雖然剛開始配置會麻煩些,但是長久考慮會方便很多唁毒。具體使用在下面會講到。
開始使用iterm2
首先你需要一個好用并且好看的命令行工具,在這推薦的就是item了星爪。
裝完item,選擇zsh作為我們的終端, mac有自帶zsh 不過不是新版本
如果不介意這些的話
chsh -s /bin/zsh
當(dāng)然如果你想用最新版的那先安裝brew 當(dāng)然就算不用你后面也得安裝 ??????
zsh強(qiáng)大的自動補(bǔ)全功能太方便了
安裝brew
安裝brew很簡單
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
當(dāng)然你也可以配合代理速度有顯著的提高
export ALL_PROXY=socks5://127.0.0.1:1080
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
配置item
想使用最新版本的zsh 執(zhí)行
brew install zsh
安裝完成后執(zhí)行下面命令切換zsh終端
chsh -s /usr/local/bin/zsh
接下來便是安裝 oh-my-zsh
oh-my-zsh對本身就很強(qiáng)的的zsh進(jìn)行武裝,包含好了很多好用的配置和插件, 比如大量的git別名, 解壓工具x
,安裝方式如下
curl -L http://install.ohmyz.sh | sh
接下來開始選擇我們的主題,主題可以通過這個網(wǎng)址來查看
我選擇的是 arrow 以前是使用 agnoster 不過有點審美疲勞變換了一個,更換主題的方法是
open ~/.zshrc
將ZSH_THEME的值改為你選擇的主題 比如
ZSH_THEME = "arrow"
source ~/.zshrc //每次修改配置后需要重啟配置才能生效
還有配色, 網(wǎng)上有很多配色主題,前往查看配色下載或clone下項目,主題目錄在schemes里,
不過我使用的是自己配的顏色浆西。
導(dǎo)入方法為
打開iterm2偏好設(shè)置 -> Profiles -> colors -> 右下角的Color Presets ->import你的主題 然后在選擇主題
另外item2還有很多好用的功能, 比如可以調(diào)透明度, 模糊 還可以添加背景圖片, 都在 Profiles中。
另外我在item2設(shè)置了HotKey 顽腾。只需要 ? + ` 就能快速呼喚item
zsh插件autojump
autojump是一個非常方便的路徑跳轉(zhuǎn)插件,擺脫了各種cd ../**/等麻煩的路徑切換,autojump會記錄終端進(jìn)入的目錄, 通過 命令 j + 一部分的文件夾名字 就可以跳轉(zhuǎn)到對應(yīng)的目錄
安裝也很方便也是通過brew
brew install autojump
不過有需要配置
open ~/.zshrc
找到
plugins=(git) 在括號里加上 autojump, 插件以空格隔開 plugins=(git autojump)
source ~/.zshrc
安裝proxychains-ng
brew install proxychains-ng
open /usr/local/etc/proxychains.conf //安裝成功后
//在最底下找到socks4 替換為
socks5 127.0.0.1 1080
在 OS X EI Capitan 以上版本, 需要關(guān)閉SIP才能正常使用
具體流程 -> 重啟電腦 聽到開機(jī)聲后 按住option鍵 出現(xiàn)了啟動盤選擇后 ? ＋ R 進(jìn)入恢復(fù)模式
在菜單欄選擇終端 輸入
csrutil enable --without debug
重啟電腦,輸入
proxychains4 curl google.com
如果顯示html文檔則安裝成功
使用方式就是開頭加個 proxychains4 就好
另外brew 還可以裝各種數(shù)據(jù)庫 mongodb redis 等等數(shù)據(jù)庫 還有 wget這種下視頻神器
開始配置node環(huán)境
首先我們當(dāng)然的安裝node了,不過我選擇的不是通過去官方網(wǎng)址下載,或者通過brew安裝,而是通過n安裝室谚。
n是node版本管理器,類似的還有nvm 這里我選擇使用n
首先在github找到n的倉庫地址 下載或者clone下來之后,在終端里進(jìn)入n的目錄執(zhí)行
make install
這樣n就安裝成功了, 可以使用 n 你指的的node版本號安裝了, 例如
n 6.7.0
執(zhí)行后便開始安裝node6.7.0版本
如果沒有使用終端代理的話這安裝過程可能會很緩慢。
如果 提示 Error: sudo required 那么有兩種解決辦法
第一種 前面加個sudo 不過一旦使用了sudo 很容易產(chǎn)生各種權(quán)限問題
推薦第二種
open /usr
右鍵local 顯示簡介 在最下面的共享與權(quán)限 -> ? 將你當(dāng)前賬號加入 并且權(quán)限設(shè)置成讀與寫,并選擇成為所有者和應(yīng)用到包含的項目中崔泵。在執(zhí)行一次安裝命令應(yīng)該沒有問題了
另外你可以通過 n 版本號快速的切換或者安裝node,非常方便,尤其對于多個項目使用的node環(huán)境不一樣的時候
其他常用操作 n ls 查看所有node版本號 n rm 版本號 刪掉對應(yīng)node
安裝完node后會自動安裝好npm, 前段都應(yīng)該知道npm是干嘛的包, 不知道的得好好補(bǔ)補(bǔ)了秒赤。
因為npm的源在國外所以下載速度非常慢, 還有國內(nèi)有鏡像
我使用淘寶的鏡像 使用 cnpm 安裝方式
npm install -g cnpm --registry=https://registry.npm.taobao.org
現(xiàn)在就可以使用cnpm 快速的安裝依賴包了 不過通過cnpm安裝可能會出現(xiàn)一些莫名的問題
另外最近Facebook 也推出了包管理器 yarn 個人感是比npm穩(wěn)定而且快多了。
編輯器
前端的編輯器的很多 Atom , sublime , webstorm , Visual Studio Code
在這里我推薦Atom 為什么因為 好看! 好看! 好看! 重要的事情寫三次
雖然Atom 啟動的時候確實會有點卡, 但是在接受范圍內(nèi), 而且sublime插件裝多了也會有點卡
webstorm 雖然很強(qiáng)大,但是并不需要那么多功能,而且會很卡
Visual Studio Code 是微軟推出,總體來說功能強(qiáng)大,性能也很好的編輯器, 寫node也很方便,但是就是太丑
sublime 可配置性很高的編輯器, 配置起來可以很好看并且方便,雖然有時候也會使用,比如atom卡得實在受不了的時候,但是sublime有些插件確實是沒Atom那么好用,
在這里列出一些我推薦的插件和主題
主題選擇
atom-material-syntax-dark
atom-material-ui //很好看的主題
插件
language-babel //es6 jsx 高亮提示
emmet // 都知道吧
atom-ternjs //非常強(qiáng)大的代碼提示插件, 而且可配置性也很高
color-picker //顏色選擇器
pigments //顏色高亮
linter // 代碼檢查工具
linter-eslint //JavaScript代碼檢查工具 規(guī)范你的代碼 依賴于linter 推薦 airbnb 的eslint規(guī)則
hyperclick //跳轉(zhuǎn)變量或者import/require模塊
js-hyperclick //配合hyperclick使用
regex-railroad-diagram //正則表達(dá)式以圖形方式顯示,很直觀!
atom-beautify //代碼格式化,還行,如果對代碼格式要求不高的話
file-icons //文件圖標(biāo)
Docblockr //代碼注釋
ctrl + e 光標(biāo)移動到行尾是比較長使用的快捷鍵, 但是使用emmet之后,鍵位會沖突所以需要修改鍵位
打開 **Atom -> keymap ** 在底部輸入
'atom-text-editor:not([mini])':
'ctrl-e': 'editor:move-to-end-of-line'
'ctrl-r': 'emmet:expand-abbreviation'
我把ctrl-r 改成 emmet的生成html元素的快捷鍵, 另外emmet對jsx語法支持也非常好
regex-railroad-diagram
Mogr2/auto-orient/strip)
.tern-project
個人常用的配置
{
"ecmaVersion": 7,
"libs": [
"browser",
"jquery"
],
"dontLoad": [
"node_modules/**/*.js"
],
"plugins": {
"node": {
"dontLoad": "",
"load": "",
"modules": ""
},
"modules": {
"dontLoad": "",
"load": "",
"modules": ""
},
"es_modules": {},
"commonjs": {}
}
}
END
至此,前端開發(fā)環(huán)境已經(jīng)搭好了
