私属前端开发环境配置指南

Posted on | Edited on | In | | Views:

从去年11月入手rmbp，把玩了一年多，只是熟悉了一些基本操作。迟钝之余，终于想到用文字来记录下自己的经验感想。感慨一下，上一次码字又是何时了呢？按下不表，先回正题。

本文主题是前端开发环境的配置指南，也就是记录从刚拿到MacBook开始应该做的一些易用性配置以及应用、浏览器、本地服务器、插件和快捷键等等一系列入门指南。虽然这一次已经不是新机器啦，但是借着升级到OS X 10.11 EI Caption的东风，重新配置了开发环境，也解决一下之前新手入门时期的完全生涩。

尽管在网络上能搜索到很多相关的指南。但是终究觉得还是写一篇自己的用得顺手，如果有幸让读者感到有所收获，自然更是欣喜。

建议每一个入门级的开发者都能写一篇属于自己的开发环境配置指南。

易用性设置

包括Trackpad、Dock栏、Finder、菜单栏、Spotlight、互联网账户的设置

xcode

苹果应用商店下载，切勿去第三方。

Homebrew

ps：打开终端运行(CMD+T可新建tab页)

  • 安装
1
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • 环境变量设置
1
$ echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.bash_profile

Homebrew基本使用

安装一个包：$ brew install <package_name>

更新包目录：$ brew update

如果更新命令失败，我们可以尝试用下面的代码：

1
2
3
$ cd /usr/local
$ git fetch origin
$ git reset --hard origin/master

查看是否需要更新：$ brew outdated

更新包：$ brew upgrade <package_name>

清理旧版本包缓存：$ brew cleanup

查看安装过的包列表：$ brew list --versions

Homebrew Cask

使用cask安装管理OSX图形界面程序

1
2
$ brew install caskroom/cask/brew-cask
$ brew cask install google-chrome

或者

1
2
3
4
$ brew tap caskroom/cask  // 添加 Github 上的 caskroom/cask 库
$ brew install brew-cask  // 安装 brew-cask
$ brew cask install google-chrome // 安装 Google 浏览器
$ brew update && brew upgrade brew-cask && brew cleanup // 更新
  • 搜索

搜索app是否支持brew cask 安装查看：caskroom.io

  • quicklook 插件

语法高亮、markdown渲染、json预览等

常用quicklook插件安装

QuickLook Plugins List

1
2
3
4
5
6
7
8
9
10
How to Install
To install QuickLook plugins, you should copy the “*.qlgenerator” file into /Library/QuickLook/ or ~/Library/QuickLook/. Note that “*” in the filename will vary based on exactly which QuickLook item you choose to install.

If a QuickLook folder is not present, feel free to create one.

After copying the file into the directory you will need to logout and then back in to your account for it to become active. Alternatively, you can prevent having to logout by running the following command in Terminal:

qlmanage -r

This will force OS X to search /Library/QuickLook and ~/Library/QuickLook for plugins and load them accordingly.

iTerm2

安装iterm2终端:brew cask install iterm2

设置快捷键：隐藏和显示的快捷键

安装zsh:brew install zsh zsh-completions

改变默认shell:chsh -s /bin/zsh

装完zsh之后，安装oh-my-zsh:

1
curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh

安装主题：下载 Solarized dark iterm colors，在 Profiles -> Default -> Colors -> Load Presets 将其导入，作为默认颜色。

使文字颜色生效：在Preference -> Text -> Text Rendering -> uncheck Draw Bold

编辑.zshrc

1
2
3
4
5
6
7
8
9
10
ZSH_THEME=pygmalion
# Use sublimetext for editing config files
alias zshconfig="subl ~/.zshrc"
alias envconfig="subl ~/Projects/config/env.sh"
plugins=(git colored-man colorize github jira vagrant virtualenv pip python brew osx zsh-syntax-highlighting)
alias -s html=subl   # 在命令行直接输入后缀为 html 的文件名，会在 sublime 中打开
alias -s rb=subl     # 在命令行直接输入 ruby 文件，会在 sublime 中打开
alias -s py=subl       # 在命令行直接输入 python 文件，会用 sublime 中打开，以下类似
alias -s js=subl
alias -s txt=subl

env.sh 用于维护别名（aliases），输出（exports）和路径改变（path changes）等等，以免影响 ~/.zshrc

（Ps:需要brew install添加python和ruby模块，并且不能另外再安装python在外面（除系统自带的python和ruby以外）否则运行会出错，virtualenvwrapper.sh不会在该在的目录下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#!/bin/zsh

# PATH
export PATH="/usr/local/share/python:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
export EDITOR='subl -w'
# export PYTHONPATH=$PYTHONPATH
# export MANPATH="/usr/local/man:$MANPATH"

# Virtual Environment
export WORKON_HOME=$HOME/.virtualenvs
export PROJECT_HOME=$HOME/Projects
source /usr/local/bin/virtualenvwrapper.sh

# Owner
export USER_NAME="YOUR NAME"
eval "$(rbenv init -)"

# FileSearch
function f() { find . -iname "*$1*" ${@:2} }
function r() { grep "$1" ${@:2} -R . }

#mkdir and cd
function mkcd() { mkdir -p "$@" && cd "$_"; }

# Aliases
alias cppcompile='c++ -std=c++11 -stdlib=libc++'

iTerm2使用:iTerm2使用指南

zsh使用:池建强终极shell

Important: 新增、修改环境变量，都需要source；删除则需要exit之后logout，重新打开shell并login。

git

安装:brew install git

通过which git来确定安装在目录/usr/local/bin/git

git设置:这些信息都会被添加到.gitconfig

1
2
3
4
5
# 设置用户名和邮箱，同github
$ git config --global user.name "Your Name Here"
$ git config --global user.email "your_email@youremail.com"
# 读取osx里的密码，不用每次都输入帐号密码
$ git config --global credential.helper osxkeychain

设置sublime作为默认的mergetool

1
2
3
4
$ git config --global mergetool.sublime.cmd "subl -w \$MERGED"
$ git config --global mergetool.sublime.trustExitCode false 
$ git config --global merge.tool sublime
$ git mergetool -y

创建 ~/.gitignore设置.gitignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Folder view configuration files
.DS_Store
Desktop.ini

# Thumbnail cache files
._*
Thumbs.db

# Files that might appear on external disks
.Spotlight-V100
.Trashes

# Compiled Python files
*.pyc

# Compiled C++ files
*.out

# Application specific files
venv
node_modules
.sass-cache

Sublime Text 3

安装和配置

  • 安装
1
2
brew tap caskroom/versions
brew cask install sublime-text3
  • 配置

配置信息分为Default和User两个版本，通过修改User的配置来完成个性化配置

通过ctrl+`打开控制台，输入以下代码

1
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)

插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Emmet -> 代码缩写、补完
DocBlock -> 注释模版
SideBarEnhancementsn -> 侧边栏增强
ColorPicker -> 拾色器 cmd＋shift＋c
BracketHighlighter -> 括号匹配提示
LiveReload -> 免刷新 (已经不能用了)
ColorHighlighter -> css颜色代码显示颜色
LiveStyle -> css实时改变
JsFormat -> Js／JSON格式化 ctrl＋alt＋f
AutoFileName -> 自动补充文件名
Git -> 版本管理
GitGutter -> git diff 图像化
Markdown Editing -> Markdown编辑
OmniMarkupPreviewer -> markdown预览
SublimeLinter -> 配合其余几个语法检测插件使用
Terminal -> 终端工具
  • LiveReload实时预览

事实上，最简单的办法是通过package control安装。

OSX users安装

1
2
3
4
cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/

rm -rf LiveReload
git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload

浏览器插件下载

chrome浏览器下需要配置liveReload插件:勾选允许访问文件网址

在sublime text3 配置LiveReload

方法一:

preferences -> Packge Settings -> LiveReload -> Settings -> User:

1
2
3
4
5
6
{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"
    ]
}

方法二:

1
2
3
1. ctrl+shift+p
2. LiveReload: Enable/disable plugins
3. Enable - SimpleReload

  • JsFormat

    默认的快捷键为Ctrl + Alt + f

  • SublimeLinter Settings
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "none",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
            "pep8": {
                "@disable": false,
                "args": [],
                "disable": "",
                "enable": "",
                "excludes": [],
                "ignore": "",
                "max-line-length": null,
                "rcfile": "",
                "select": ""
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "paths": {
            "linux": [],
            "osx": [
                "/usr/local/bin/"   //换成自己的目录
            ],
            "windows": []
        },
        "python_paths": {
            "linux": [],
            "osx": [
                "/usr/local/bin/"
            ],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "php": "html",
            "python django": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

我的快捷键设置

基本上使用默认配置，但是因为有些按键冲突了，比如在终端中打开的快捷键和打开最近关闭的一个文件的快捷键就冲突啦，需要自己重新设置一下。

Preferences -> Key Bindings - Users

1
2
3
4
5
6
7
8
[
    // Format HTML/CSS simply, and jsformat.
    { "keys": ["super+shift+r"], "command": "reindent" , "args": { "single_line": false } },
    //在浏览器中打开当前文件
    { "keys": ["super+shift+8"], "command": "open_in_browser"},
    //打开最近关闭的一个文件
    { "keys": ["super+shift+o"], "command": "reopen_last_file" },
]

本地服务器

基本上配置一个mac自带的本地apache服务器就足够前端开发用啦！我在配置本地服务器的时候遇到了不能访问http://localhost/~username/的问题。下面是我的解决过程。

启动Apache:$ sudo apachectl start

查看Apache版本:$ httpd -v

访问http://localhost/~username/,提示Not Found

我们需要以下步骤:

首先配置username.conf(需要管理员权限,sudo):
/etc/apache2/users/username.conf

将以下代码保存到conf文件中:

1
2
3
4
5
<Directory "/Users/yang/Sites/">
    Options Indexes MultiViews
    AllowOverride None
    Require all granted
</Directory>

给权限:$ sudo chmod 755 /etc/apache2/users/username.conf

启用几个支持:在/etc/apache2/httpd.conf中

查找并去掉代码行前边的#，启用如下:

1
2
3
4
LoadModule authz_core_module libexec/apache2/mod_authz_core.so
LoadModule authz_host_module libexec/apache2/mod_authz_host.so
LoadModule userdir_module libexec/apache2/mod_userdir.so
Include /private/etc/apache2/extra/httpd-userdir.conf

接着运行:$ sudo nano /etc/apache2/extra/httpd-userdir.conf

开启:Include /private/etc/apache2/users/*.conf

重启Apache:$ sudo apachectl restart

此时，就能进入http://localhost/~username/啦！

Apache localhost/~username/ not working

Mac OS X Yosemite 10.10 配置 Apache+PHP 教程注意事项

Node.js

nvm 安装

方法一:

用$ brew install nvm安裝nvm

这个时候需要注意这个问题，重启终端，node系统环境变量会失效，所以需要下面的步骤。

$ brew info nvm会输出一段信息，根据提示操作

  1. 创建 .nvm 文件:mkdir ~/.nvm

  2. 然后把 nvm-exec 文件拷贝到新建的 .nvm 目录下

    cp $(brew --prefix nvm)/nvm-exec ~/.nvm/

  3. 然后去编辑bash配置文件$ ~/.bash_profile,

    如果使用zsh那么编辑 $~/.zshrc配置文件

    open ~/.bash_profile或open ~/.zshrc

  4. 把下面的内容粘贴进去

    1
    2
    export NVM_DIR=~/.nvm
    source $(brew --prefix nvm)/nvm.sh

  5. 最后让你的 shell 配置及时生效

    source ~/.bash_profile或source ~/.zshrc

    这样之后不会再出现关闭终端重启,或者重启机器发现 node ,npm 等系统环境变量失效的问题了.

方法二:(推荐)

CUrl方式安装

1
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

编辑 $~/.zshrc配置文件,写入下面这两行代码，保存后source ~/.zshrc

1
2
export NVM_DIR=~/.nvm
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

使用nvm安装node.js

用`$ nvm ls-remote`指令看一下有哪些版本可以安裝

用`$ nvm install <version>`安装指定版本

`$ nvm ls`查看安装的版本

设置默认版本`$ nvm alias default <version>`　

Npm Usage

安装包:


1
2
$ npm install <package>     # 安装在本地项目中
$ npm install -g <package>  # 安装在全局


推荐全局安装的包:


1
2
$ npm install -g coffee-script
$ npm install -g grunt-cli





安装包，并且将其保存你项目中的 package.json 文件:
`$ npm install <package> --save`

查看 npm 安装的内容:


1
2
$ npm list     # 本地
$ npm list -g  # 全局


查看过期的包（本地或全局）:`$ npm outdated [-g]`

更新全部或特别指定一个包:`$ npm update [<package>]`

卸载包:`$ npm uninstall <package>`

参考

Node Version Manager

搭建 Node.js 开发环境

node.js 版本控制 nvm 和 n 使用 及 nvm 重启终端失效的解决方法

Node.js 安裝與版本切換教學 (for MAC)

Python

  • 安装

为了不污染系统自带的Python，我们得通过homebrew安装属于私有的Python

$ brew install python

装完之后通过$ which python查看所在目录应该在/usr/local/bin/python

这种方法装完python之后同时也会把Pip(依赖Setuptools)装好.

1
2
$ pip install --upgrade setuptools
$ pip install --upgrade pip
  • Pip Usage

安装包:$ pip install <package>

更新包:$ pip install --upgrade <package>

查看包:$ pip freeze

卸载包:$ pip uninstall <package>

  • Virtualenv

Install:$ pip install virtualenv

Usage:

建立一个虚拟目录

1
2
$ cd myproject/
$ virtualenv venv --distribute

如果需要继承全局环境下安装的包，使用

$ virtualenv venv --distribute --system-site-packages

首先需要激活一下：$ source venv/bin/activate

然后再运行$ pip install <package>，就会安装到venv文件夹里，并且不会影响到其他项目。

$ deactivate离开虚拟环境。

Important:记住在venv里添加.gitignore文件，避免源代码混入奇怪的东西。

安装:$ pip install virtualenvwrapper

1
2
3
export WORKON_HOME=$HOME/.virtualenvs
export PROJECT_HOME=$HOME/Devel
source /usr/local/bin/virtualenvwrapper.sh

在.zshrc中的这段就是这里的配置信息

Ruby

同样的，为了不污染系统自带ruby，我们得自己再通过homebrew安装一个ruby

1
2
3
$ brew install rbenv ruby-build rbenv-gem-rehash rbenv-default-gems
$ echo 'eval "$(rbenv init -)"' >> ~/Projects/config/env.sh
$ sourcezsh

常用应用

  • 开发工具:

    Sublime Text 3,iTerm2,Github,Chrome,Firefox,Parallels

  • 日常应用:

    The Unarchiver,BetterZip3,PhotoShop CC,Movist,Evernote,Skitch,Rime

    Karabiner,Noizio,MacDown,Mou,CheatSheet

参考

mac日常开发环境指南

Mac OS X Setup Guide

Mac 开发配置学习手册

总结

尽管网络上有这么多的资源，各种blog，论坛，问答。但是最好的手册是官网。基本上按照官网提供的方法来，就会少出这样那样的问题了。而且官方文档也大都提供了各类的解决方案。也许有人要说了，我不懂英文。但是身为一个做技术的，哪怕硬着头皮也要上呀！而且绝大多数官方都用比较浅显易懂的文字表述清楚了，所以不要怕！

本来以为写这篇东西会很快，但是结果发现还是多多少少遇到了各种问题。毕竟不是完全干净的系统了，里面还是残留了不少之前的痕迹，导致了各种的问题。诸如Python、nvm安装的一些问题。好在，最终都成功解决了。看着手中经过擦拭打磨后越发锋利的剑，那是必须开怀大笑😄！

坚持原创技术分享，您的支持将鼓励我继续创作！