新年新气象,在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. 前端开发环境webstorm搭建

    1. 下载node.js https://nodejs.org/en/ 2. 安装 webpack 用管理员开个命令行 (mac: open terminal) npm install webpack ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. AR/VR技术交流

    本人建了一个QQ群(群号:331922761),欢迎对AR,VR技术感兴趣的同学加入一起学习讨论.

  2. Struts框架——(三)动态ActionForm

    一.DynaActionForm的引入意义 使用ActionForm把表单数据单独封装起来,而且提供了自动的数据验证,简化了代码的编写,给我们带来了极大的方便. 但是,ActionForm也存在一些明 ...

  3. listview(3、动态刷新)

    listview的动态刷新主要是调用adapter的notifyDataSetChanged. 在下面的例子中除了记录正常的刷新外,还记录一种错误的情况(注释掉的),作为备忘. notifyDataS ...

  4. c#操作IIS站点

    /// <summary> /// 获取本地IIS版本 /// </summary> /// <returns></returns> public st ...

  5. Ubuntu下制作ISO文件

    利用Ubuntu自带的命令mkisofs就可以制作iso文件,具体方法如下: 1.   如果你是直接从cd压制iso文件的,执行 sudo umount /dev/cdromdd if=/dev/cd ...

  6. Android 应用内HttpClient 与 WebView 共享 Cookie

    DefaultHttpClient httpclient=....; String toUrl="https://cap.cityu.edu.hk/studentlan/details.as ...

  7. JS基础知识:Javascript事件触发列表

    Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言. JavaScript使我们有能 ...

  8. Delphi 项目配置选项

    打开项目设置窗口: 通过菜单:项目>选项 快捷键    :Shift+Ctrl+F11 Delphi编译器选项说明  Conditional defines 指定条件编译器指令中引用的符号. O ...

  9. VS2013 切换用户

    控制面板---------------用户账户---------------凭据管理器----------------Windows凭据,可以修改和删除登录用户:根据TFS服务器的IP地址或网址或服务 ...

  10. es6 语法 (Generator)

    { // 长轮询 let ajax=function* (){ yield new Promise(function(resolve,reject){ setTimeout(function () { ...