在Mac OSX下设置前端开发环境
发布在_haochuan的Random Notes2016年3月21日view:2329YiksiAssow前端开发BrettBat工具前端工程师web
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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

本文章所提到的所有东西并没有提供详细的说明以及用法,如需了解请自行搜索。 英文版请前往: 我的博客:SETUP A NEW MAC FOR FRONT END DEVELOPMENT MEDIUM:SETUP A NEW MAC FOR FRONT END DEVELOPMENT

更多关于前端的内容请关注本人知乎专栏

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

Google Chrome

几乎是每个前端开发者必备的浏览器,下载地址: https://www.google.com/chrome.

一些常用到得Chrome插件: - JSON Formatter(显示格式化过得JSON文件) - Postman(发送request) - React Dev Tools(React测试工具) - Page load time(计算网页load时间)

iTerm2

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

两个我常用的主题
字体

我在用 12pt Monaco.

Homebrew

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

安装
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, 你可以在下面地址找到我的设置文件 my zsh setting.

Vim

非vim党请跳过此段。

安装

尽管vim在MAC OSX里是内置的,但是为了安装一些强大的插件,你需要下载安装最新版本。

brew install vim
brew link vim
设置: spf13-vim

spf13-vim 是一个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

请在这里下载 here.

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( 'http://packagecontrol.io/' + 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)
一些常用的包
怎样用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

开发工具

brew install git

可以直接在官网下载安装包,或者:

brew install node
gem install sass

Node开发和部署工具

npm install nodemon -g
npm install pm2 -g
npm install -g grunt-cli
npm install -g gulp
npm install -g webpack
npm install -g jshint
brew update
brew install mongo

Mac OSX 应用


目前只能想起这么多了,之后会随时更新
附上一些个人觉得有趣好用的东西
  • 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
    • Fast and lightweight rich text editor
    • Semantic markup
    • Standardized HTML between browsers
    • Cross browser support including Chrome, Firefox, Safari, and IE 9+
  • 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
评论
发表评论
1年前
赞了此文章!
WRITTEN BY
_haochuan
非计算机科学家 || 非艺术家 || 我是个乐手 || 我要打篮球
TA的新浪微博
PUBLISHED IN
_haochuan的Random Notes

包括但不仅限于前端, Javascript, node.js, react.js, front-end development stack, vim, sublime text的想到什么写什么的…地方

我的收藏