新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的)。macbook air,身上已无分文。。。接下来半年的房租都不知道该怎么半了,都怪消费太冲动。

不过,眼下需要解决的不是房租问题,而是在新电脑上搭建开发环境,正好在搭建的时候总结一下:

1、FQ工具:lantern

地址:https://github.com/getlantern/lantern

2、命令行工具:term2

官网:http://www.iterm2.com/

虽然mac自带终端,也不是很难看,但功能不是很多,term2是mac上非常好的一款命令行工具,可以完全替代系统自带的终端。term2具有很多优点:
1:选中即复制,不用command+c了;
2:全文查找并高亮显示:command+f
3:方便的分屏显示:垂直分屏:command+d,水平分屏:command+shift+d
4:自定义快捷键
5:强大的节目自定义,设置配色方案,透明背景,等等
此外还有其它有点,我暂时没用到。

3、终端软件包管理工具:brew

官网:http://brew.sh/

就和ubuntu下的apt-get功能类似,可以很方便的管理软件。
安装方式,直接在终端里输入:

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

运行完即可安装软件了,安装方式和apt-get相同:

sudo brew install xxx

4、终端复用工具:tmux

官网:http://tmux.github.io/

可以直接通过brew安装:

sudo brew install tmux

tmux强大之处不在多说,谁用谁知道。

5、安装node、npm、git

直接通过brew安装即可,我没有尝试,我是通过官网下载的程序安装的。安装node自带npm,git貌似系统自带。

6、vim包管理工具vunble

接下来就是配置vim编辑器,首先是Vundle,即bundle,vim的插件管理工具
github:https://github.com/VundleVim/Vundle.vim

安装vunble:

$ git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

然后,在~目录下新建.vimrc,输入:

set nocompatible
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin 'VundleVim/Vundle.vim'

然后,退出vim的编辑模式,输入:BunbleInstall(注意前面要有冒号),此时插件开始安装。

7、配置vim

这里推荐一下我收集的一个前端VIM配置方案https://github.com/Gavin-YYC/vimrc

前面已经安装了vunble,那么其他的插件安装变得更简单,先来进行一些简单的vim配置:

set nu              " 显示行号
syntax on           " 语法高亮
autocmd InsertLeave * se nocul  " 用浅色高亮当前行
autocmd InsertEnter * se cul    " 用浅色高亮当前行
set ruler           " 显示标尺
colorscheme molokai " 设置配色方案 molokai
set autoindent      " 设置自动缩进
set backspace=2
set nowrap          " 不自动换行
set tabstop=4       " tab相当于四个字符
set softtabstop=4   " 按一次tab前进4个字符
set expandtab       " 用空格代替tab
set ai!             " 设置自动缩进
set cindent shiftwidth=4 " 缩进的字符个数
set hlsearch        " 高亮搜索的关键字
set ignorecase      " 搜索忽略大小写
set history=100     " 设置命令历史行数

8、vim配色方案molokai

github:https://github.com/tomasr/molokai
配置很简单,在~/.vim/colors下,复制进去molokai.vim即可。

9、vim安装插件

通过vunble安装:
在.vimrc中,输入:Bundle 'mattn/emmet-vim',然后退出编辑模式,输入:BunbleInstall即可,如果没有,则推出vim重新进入,在执行安装命令。

10、zsh安装on my zsh

有时候会发现执行命令时前面一串系统自带的字符串很长,想移去,此时久可以用zsh

wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh

zsh的强大之处在于可以自定义快捷键。比我,我要执行webpack,但是每次都要输入webpack太麻烦了,就算为了节省力气,使用webpack --watch,也要输入很长的命令,而通过wp则简单的很:

只需在~/.zshrc中输入以下规则即可。

alias wp='webpack'
alias wpw='webpack --progress --colors --watch'
alias wps='webpack-dev-server --progress --colors'

这样,我们直接在命令行中输入wp就是执行的webpack,输入wpw,即启动了观察模式,输入wps,则启动了服务器,是不是很简单?!

11、autojump

和zsh结合使用,功能更强大

原文地址:绿岛之北总结:Mac开发环境的搭建

总结:Mac前端开发环境的搭建(配置)的更多相关文章

  1. Mac Android开发环境变量的配置(java、sdk、ndk、gradle)

    1.打开terminal 2.然后输入 vi .bash_profile 后按"e"进入编辑模式 3.输入想要配置的环境变量(Java.sdk.ndk.gradle): expor ...

  2. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  3. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  4. 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  5. 用 Docker 快速配置前端开发环境

    来源于:http://dockone.io/article/1714 今天是你入职第一天. 你起了个大早,洗漱干净带着材料去入职. 签了合同,领了机器,坐到工位,泡一杯袋装红茶,按下开机键,输入密码, ...

  6. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  7. 用grunt搭建自动化的web前端开发环境-完整教程

    原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...

  8. 用grunt搭建自动化的web前端开发环境

    用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...

  9. 【Yeoman】热部署web前端开发环境

    本文来自 “简时空”:<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利器,写了<Sp ...

随机推荐

  1. 后台接收URL地址的参数

    其实很简单,只是写一下加强记忆 后台接收URL传递过来的参数有两种方法: 第一种用request接收 HttpServletRequest request = ServletActionContext ...

  2. java中String对象的split方法

    在java.lang包中有String.split()方法,返回是一个String[]数组,今天碰到一个自己没注意的问题: 1.特殊分隔符 String str1 = "123|456|78 ...

  3. [转]eclipse最佳设置

    设置工作空间的项目编码, 防止出现乱码     Window - Preferences - General - Workspace     将"Text file encoding&quo ...

  4. Cocos2d-x 3.2 学习笔记(一)环境搭建

    目前项目无事,时间比较充裕,因此来学习下cocos2dx,当然本人也是新手一个, 写此笔记做备忘和脚步. 最近3.2版本更新出來了!官方说这是自2.x分支以来修复了超过450个bug,3.2版本是目前 ...

  5. PLSQL Developer 不能连接 oracle 12c 64位 的解决办法 for win 64

    1.安装Oracle 12c 64位 2.安装32位的Oracle客户端( instantclient-basic-nt-12.1.0.1.0) 1) 下载instantclient-basic-nt ...

  6. A Realistic Evaluation of Memory Hardware Errors and Software System Susceptibility

    http://www.cs.rochester.edu/~kshen/papers/usenix2010-li.pdf Abstract Memory hardware reliability is ...

  7. Java SE series:1. environment configure and Hello world! [We use compiler and packager to create an application!]

    1. cli (command line interface) and gui (graphic user interface) use javahome path, search classpath ...

  8. 【转载】s3c2440裸机开发调试环境(MDK4.6,Jlink v8,mini2440)

    用于arm裸机程序开发的IDE基本有 以下3个:MDK,IAR,还有ADS.具体它们的具体情况在这里我就不多说了,百度一下就明白了.由于之前开发c51,stm32时候都使用了MDK开发环境,而且MDK ...

  9. MyBatis学习总结_09_使用MyBatis Generator自动创建代码

    一.构建一个环境 1. 首先创建一个表: CREATE TABLE t_user ( USER_ID INT NOT NULL AUTO_INCREMENT, USER_NAME CHAR(30) N ...

  10. Evaluate Reverse Polish Notation(堆栈)

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...