在Mac OSX下设置前端开发环境

时间:2016-02-26 12:22:32   收藏:0   阅读:2644

技术分享

以下内容将会详细介绍本人在MAC OSX下关于前端开发环境的安装和设置,如果您是前端开发人员,并且手上有个全新的或者重新安装过系统的mac,你可能会在以下内容里发现你所需要的东西。

Google Chrome

几乎是每个前端开发者必备的浏览器,下载地址:

一些常用到得Chrome插件:

iTerm2

MAC OSC下最好的terminal app,没有之一

 

两个我常用的主题

 

字体

我在用 `12pt Monaco`.

 

Homebrew

就像它的官网说的,它是MAC OSX下失传已久的包管理器

安装

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

 

常用命令

 

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的集成开发环境,内置集成很多常用的插件。

 

安装 (要求有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


Front End

Other

Theme and Color

 

怎样用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](), [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]()

- 文件同步

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

- 效率利器

- [Bartender 2]()

- MAC OSC顶部菜单管理

- [SizeUp]()

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

- [iStat Menus]()

- 监控电脑cpu,ram,network,温度

-----

目前只能想起这么多了,之后会随时更新

附上一些个人觉得有趣好用的东西

 

[node-notifier]()

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

 

[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.

[quill]()

 

[impress.js]()

It‘s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

[mousetrap]()

Simple library for handling keyboard shortcuts in Javascript

[jsdoc]()

An API documentation generator for JavaScript

[Moment.js]()

Parse, validate, manipulate, and display dates in JavaScript.

[Ghost]()

Ghost is a simple, powerful publishing platform that allows you to share your stories with the world.

[Faker]()

A library for generating fake data such as names, addresses, and phone numbers.

[GitBook]()

Modern book format and toolchain using Git and Markdown

 

[bluebird]()

Bluebird is a full featured promise library with unmatched performance.

[tldr]()

tldr is a collection of simplified and community-driven man pages.

[is.js]()

Micro check library

 

 

 

转自:http://zhuanlan.zhihu.com/haochuan/20481407?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!