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

  
更多前端內容http://www.codefrom.com/p/JavaScript

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

安裝homebrew，不裝真對不起自己

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

homebrew

換掉/bin/bash請使用/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

運行命令后，按照指引，你將完成 Xcode command line tools 安裝
目前個人使用Atom編輯器和vim結合開發(fā)”前端”，如果終端版vim使用不習慣，可以用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可以注釋掉，因為此需要Apple LLVM clang編譯器

  vim目錄，可以按F5

  在終端輸入tmux，control+b （按一下）然后再按D（注意是大寫），如果想關閉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)，面向對象的方式比較符合我的預期，而且我能在編譯環(huán)節(jié)就可以排除錯誤，基本上團隊寫的代碼都一樣，維護起來不會出現(xiàn)JavaScript有一千個哈姆雷特的情況，況且TypeScript也是下一代Angularjs所采用的。

sudo npm install -g typescript

tsc helloworld.ts

sudo npm install -g tsd

TypeScript

d.ts

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

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

forever可以在后臺啟用node服務，好用。
forever
開發(fā)階段使用它無需自己在終端不停的重啟node服務
node-supervisor
調試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

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

npm install -g bower

brew install sassc

模塊化和構建工具
關于模塊化和構建工具，三年前使用著grunt和RequireJS，AMD CMD真沒啥好爭論的，一年前一直用著glup，而今年我準備將使用ES6 modules來做模塊化，自動構建工具grunt+glup結合的方式。

npm install -g grunt-cli

npm install -g glup

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

npm install -g cordova ionic

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

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