在Mac OSX下設置前端開發環境

時間 2019-11-11

標籤 mac osx 設置前端開發環境欄目 MacBook 简体版

原文原文鏈接

如下內容將會詳細介紹本人在MAC OSX下關於前端開發環境的安裝和設置，若是您是前端開發人員，而且手上有個全新的或者從新安裝過系統的mac，你可能會在如下內容裏發現你所須要的東西。css

Google Chrome

幾乎是每一個前端開發者必備的瀏覽器，下載地址: https://www.google.com/chromehtml

一些經常使用到得Chrome插件:前端

[JSON Formatter（顯示格式化過得JSON文件）](https://chrome.google.com/webstore/detail/json-formatter/pblpfhfcojodgcifojnofommahgbaple?utm_source=chrome-ntp-icon)
[Postman（發送request）](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?utm_source=chrome-ntp-icon)
[React Dev Tools（React測試工具）](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?utm_source=chrome-ntp-icon)
[Page load time（計算網頁load時間）](https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig?utm_source=chrome-ntp-icon)

iTerm2node

MAC OSC下最好的terminal app，沒有之一react

兩個我經常使用的主題webpack

[tomorrow](chriskempson/tomorrow-theme · GitHub)
[dracula-theme](zenorocha/dracula-theme · GitHub)

字體git

我在用 `12pt Monaco`.github

Homebrew

就像它的官網說的，它是MAC OSX下失傳已久的包管理器web

安裝mongodb

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

經常使用命令

Update homebrew's directory of formulas: `brew update`
Update a package: `brew upgrate <package name>`
Install a package: `brew install <package name>`
Link/unlink a package: `brew link/unlink <package name>`

Oh My Zsh

Terminal裏bash的最佳替代品，強大的自動補全功能，能自動補全命令、參數、文件名、進程、用戶名、變量、權限符等，以及各類插件以及主題的支持。

安裝

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

設置

設置文件的路徑爲 `~/.zshrc`, 你能夠在下面地址找到個人設置文件random-notes/.zshrc at master · haochuan/random-notes · GitHub

Vim

非vim黨請跳過此段。

安裝

儘管vim在MAC OSX裏是內置的，可是爲了安裝一些強大的插件，你須要下載安裝最新版本。

brew install vim
brew link vim

設置: spf13-vim

[spf13-vim](spf13/spf13-vim · GitHub) 是一個vim的集成開發環境，內置集成不少經常使用的插件。

Vundle
NERDTree
Neocomplcache
Syntastic
Fugitive
Tagbar

安裝 (要求有git)

curl https://j.mp/spf13-vim3 -L > spf13-vim.sh && sh spf13-vim.sh

Sublime Text 3

請在這裏下載Sublime Text.

Package Control

首先安裝 [package control](Package Control):

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'Package Control' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

一些經常使用的包

General

[SideBarEnhancements](SideBarEnhancements) - 邊欄菜單功能的擴充

[Alignment](Alignment - Packages) - 多行代碼對齊

[DocBlockr](DocBlockr - Packages) - 代碼文檔

[Comment-Snippets](Comment-Snippets) - 代碼註釋snippets
[Vintageous](Vintageous - Packages) - 強大的vim模擬
[Block Cursor Everywhere](Block Cursor Everywhere) - 能夠在vim模式裏使用塊狀cursor

Front End

[Emmet](Emmet - Packages) - 快速寫html和css利器
[ColorPicker](ColorPicker - Packages) - 調用你本機的調色板應用來選取顏色
[Color Highlighter](Color Highlighter) - 在編輯器裏顯示顏色的背景色

Other

[Markdown Preview](Markdown Preview) - 在瀏覽器裏預覽markdown

Theme and Color

[Tomorrow Color Schemes](Tomorrow Color Schemes)
[Afterglow](Theme - Afterglow)
[Oceanic Next Color Scheme](Oceanic Next Color Scheme)

怎樣用dropbox來同步不一樣機器裏的sublime text設置

第一臺機器

cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
mkdir ~/Dropbox/Sublime
mv User ~/Dropbox/Sublime/
ln -s ~/Dropbox/Sublime/User

其餘機器

cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
rm -r User
ln -s ~/Dropbox/Sublime/User

開發工具

[git](Git)

brew install git

[Node.js and Npm](Node.js)

能夠直接在官網下載安裝包，或者：

brew install node

[SASS](Sass: Syntactically Awesome Style Sheets)

gem install sass

[Nodemon](remy/nodemon · GitHub) and [pm2](Unitech/pm2 · GitHub)

Node開發和部署工具

npm install nodemon -g
npm install pm2 -g

[Grunt](http://gruntjs.com/), [gulp](gulp.js - the streaming build system), and [webpack](webpack module bundler)

npm install -g grunt-cli
npm install -g gulp
npm install -g webpack

[jshint](JSHint, a JavaScript Code Quality Tool)

npm install -g jshint

[MongoDB](MongoDB for GIANT Ideas)

brew update
brew install mongo

Mac OSX 應用

- [Dropbox](https://www.dropbox.com/)

- 文件同步

- [Alfred 2](Alfred - Productivity App for Mac OS X)

- 效率利器

- [Bartender 2](http://www.macbartender.com/)

- MAC OSC頂部菜單管理

- [SizeUp](http://www.irradiatedsoftware.com/sizeup/)

- 快速調整窗口位置和大小

- [iStat Menus](https://bjango.com/mac/istatmenus/)

- 監控電腦cpu，ram，network，溫度

-----

目前只能想起這麼多了，以後會隨時更新

附上一些我的以爲有趣好用的東西

[node-notifier]( https://github.com/mikaelbr/node-notifier)

A Node.js module for sending notifications on native Mac, Windows and Linux (or Growl as fallback)

[z]( https://github.com/rupa/z)

Tracks your most used directories, based on 'frecency'. After a short learning phase, z will take you to the most 'frecent' directory that matches ALL of the regexes given on the command line, in order. For example, z foo bar would match /foo/bar but not /bar/foo.