摘要：更多前端內(nèi)容閱讀之前非用戶請(qǐng)自動(dòng)忽略，此文針對(duì)用戶，我個(gè)人使用頻率非常高，端開發(fā)者可以選擇性的嘗試部分工具?；蛘哒{(diào)起的調(diào)試工具，跟編輯器親密合體。目前在使用，嘗試。

  
更多前端內(nèi)容http://www.codefrom.com/p/JavaScript

非Mac用戶請(qǐng)自動(dòng)忽略，此文針對(duì)Mac用戶，我個(gè)人使用頻率非常高，PC端開發(fā)者可以選擇性的嘗試部分工具。

安裝homebrew，不裝真對(duì)不起自己

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

homebrew

換掉/bin/bash請(qǐng)使用/bin/zsh，安裝oh-my-zsh。

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

oh-my-zsh

使用homebrew安裝tmux

brew install tmux

tmux

安裝vim bundle

git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/vundle

Vundle.vim
安裝nvm來管理node環(huán)境

brew install nvm

nvm
安裝Xcode command line tools

xcode-select --install

運(yùn)行命令后，按照指引，你將完成 Xcode command line tools 安裝
目前個(gè)人使用Atom編輯器和vim結(jié)合開發(fā)”前端”，如果終端版vim使用不習(xí)慣，可以用Macvim（GUI）
Atom

macvim

安裝iTerm 2，你懂的

iTerm 2

我使用Dash來查詢API文檔

Dash

上述終端工具的配置可使用我的配置文件 | 使用指南

git clone https://github.com/lcepy/icepy.vim.git ~/icepy.vim

cp -r .vimrc ~/

cp -r .vimrc.bundles ~/

cp -r .tmux ~/

cp -r .tmux.conf ~/

cp -r .zshrc ~/

或者

cp -r ~/icepy.vim/* ~/

icepy vim shell conf

使用提示

  
如果不想使用YouCompleteMe可以注釋掉，因?yàn)榇诵枰狝pple LLVM clang編譯器

  vim目錄，可以按F5

  在終端輸入tmux，control+b （按一下）然后再按D（注意是大寫），如果想關(guān)閉control+b 再按shift+7

  使用nvm install v0.12.6 安裝node環(huán)境

  sudo npm install -g npm （記得更新一下npm）

  我使用git來管理我的源代碼

  :BundleInstall 或者 vim+PluginInstall+qall 來安裝vim插件

我常用的“前端”環(huán)境（包括node+mongodb+Hybrid App）

我使用TypeScript來編寫JavaScript代碼，它的類型系統(tǒng)，面向?qū)ο蟮姆绞奖容^符合我的預(yù)期，而且我能在編譯環(huán)節(jié)就可以排除錯(cuò)誤，基本上團(tuán)隊(duì)寫的代碼都一樣，維護(hù)起來不會(huì)出現(xiàn)JavaScript有一千個(gè)哈姆雷特的情況，況且TypeScript也是下一代Angularjs所采用的。

sudo npm install -g typescript

tsc helloworld.ts

sudo npm install -g tsd

TypeScript

d.ts

我用tsd來處理第三方模塊，這樣才能讓編譯器通過編譯。

node開發(fā)環(huán)境

forever可以在后臺(tái)啟用node服務(wù)，好用。
forever
開發(fā)階段使用它無需自己在終端不停的重啟node服務(wù)
node-supervisor
調(diào)試debug工具
node-inspector
mongodb開發(fā)環(huán)境

brew install mongodb

配置文件在/usr/local/etc/mongod.conf

systemLog:
      destination: file
      path: /usr/local/var/log/mongodb/mongo.log
      logAppend: true
storage:
      dbPath: /Users/xiangwenwen/mongodb/data
net:
      bindIp: 127.0.0.1

在終端運(yùn)行mongod —config /usr/local/etc/mongod.conf
tmux session右窗口處運(yùn)行mongo
瀏覽器端開發(fā)環(huán)境
主要使用bower來管理我的前端文件，雖然我不寫CSS，但是我依然選擇sassc來編譯，這是C語言寫的編譯器可以翻譯成CSS。

npm install -g bower

brew install sassc

模塊化和構(gòu)建工具
關(guān)于模塊化和構(gòu)建工具，三年前使用著grunt和RequireJS，AMD CMD真沒啥好爭(zhēng)論的，一年前一直用著glup，而今年我準(zhǔn)備將使用ES6 modules來做模塊化，自動(dòng)構(gòu)建工具grunt+glup結(jié)合的方式。

npm install -g grunt-cli

npm install -g glup

JavaScript
目前基本上已經(jīng)全線使用ES5了，所以還要針對(duì)IE系列開發(fā)的同學(xué)可以忽略，HTML5特性也大量的在使用中，ES2015會(huì)是今年重點(diǎn)學(xué)習(xí)的方向。
promises管理異步JavaScript是我處理回調(diào)的首選選擇。
代碼質(zhì)量，這個(gè)目前基本不做了，因?yàn)門ypeScript
ESLint
JSCS
客戶端模版
目前我在使用jade，今年開始使用ES2015內(nèi)置的模版。
調(diào)試工具
一個(gè)就夠了，chrome tools。
或者option + command + i Atmo調(diào)起chrome的調(diào)試工具，跟編輯器親密合體。
Hybrid App
目前在使用ionic，嘗試React Native。

npm install -g cordova ionic

ionic
React Native
Hybrid App 調(diào)試工具，主要分為兩個(gè)部分，一個(gè)是safari，另外一個(gè)是自己編寫的iOS版調(diào)試日志工具M(jìn)FLog，可以嵌入到Hybrid App中，分為Objective-C和Swift版。
我常用的”前端”庫或插件

移動(dòng)版的jQuery
zepto
圖表繪制庫
echarts
工具類函數(shù)
lodash
模塊化
webpack
requirejs
大框架
Angular
Angular UI
Angular UI
Cordova Plugins
cordova plugins
動(dòng)畫庫
famous
構(gòu)建API
restify
dozerjs
CMS
keystonejs
Express 構(gòu)建網(wǎng)站
Express
mongoose
mongoose
CSS UI
Bootstrap
Foundation
netease
async
async
hexo編寫博客
hexo
我常用的其他工具
用來編寫Api 契約文檔
apiary
模擬數(shù)據(jù)
mockjs
查看CSS HTML5的支持情況
caniuse
研究瀏覽器引擎內(nèi)核的文獻(xiàn)
瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘
寫在最后，我使用頻率最高的工具是Github^_^。