总结:Mac前端开发环境的搭建(配置)

痴心易碎 提交于 2020-04-04 10:02:39

总结:Mac前端开发环境的搭建(配置)

现在是2018年1月26日星期五,原文写于2016年1月,时隔两年,文章内的很多内容插件或多或少都有更新,
很多人在参考配置的时候也或多或少的遇到些问题,我这里在重新走一遍流程并将文档更新下,如果遇到什么问题可联系我。


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

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

1、科学上网工具:lantern

科学上网工具不是必须的,如果你想安装的话下面是Git地址,可进入安装

地址:蓝灯(Lantern)最新版本下载

2、命令行工具:iterm2

建议安装该命令行工具,前端开发中会遇到各种通过命令行的形式来完成操作的工具,所以一款好的命令行工具是非常必须的。

官网:iterm2

虽然mac自带终端,也不是很难看,但功能不是很多,term2是mac上非常好的一款命令行工具,可以完全替代系统自带的终端。term2具有很多优点:

  • 1、选中即复制,不用command+c了;
  • 2、全文查找并高亮显示:command+f
  • 3、方便的分屏显示:垂直分屏:command+d,水平分屏:command+shift+d
  • 4、自定义快捷键
  • 5、强大的界面自定义,设置配色方案,透明背景,等等
  • 6、其他功能,我还没有体验到的

我主要做了两个配置如下(如下是我的界面截图):

  • 打开全屏(Preferences - Profiles - Window - Settings For New Windows)
  • 背景透明度(Preferences - Profiles - Window - transparency)

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

homebrew工具建议安装,因为后面会有一些工具的安装就是使用的brew

官网:Homebrew

就和ubuntu下的apt-get功能类似,可以很方便的管理软件。

安装方式,直接在终端里输入:

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

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

sudo brew install xxx

4、终端复用工具:tmux

tmux是一款终端复用软件,我第一次发现他的神奇之处是在实习的时候,别人在电脑上敲的命令在我的屏幕上竟然可以同步显示,就和直播一样,简直不可思议。后来换了单位以后用到的较少了,分屏切换主要在iterm2上进行了,不过,该工具依然特别好用。

官网:tmux

可以直接通过brew安装:

sudo brew install tmux

以下是tmux的部分优点:

  • 可横向和纵向分割窗口
  • 窗格可以自由移动和调整大小,或直接利用四个预设布局之一
  • 可在多个缓冲区进行复制和粘贴
  • 可通过交互式菜单来选择窗口、会话及客户端
  • 提供了强劲的、易于使用的命令行界面

5、安装node、npm、git

这三款工具是必安装的,大部分前端工具都依赖Node,npm是node自带的包管理器,git是版本管理工具

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

brew install node
brew install git

6、zsh安装on my zsh

建议安装,可以让命令行界面更美观,此外配合autojump使用功能会更强大。

有时候会发现执行命令时前面一串系统自带的字符串很长,想移去,此时久可以用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,则启动了服务器,是不是很简单?!

7、autojump

强烈建议安装使用

和zsh结合使用,功能更强大,比如如果我要进入一个很深的目录,我需要不断的cd才可以,但是通过autojump,我可以直接使用如下命令:

比如目录机构为:

a/b/c/d/e

强大的跳转命令:

j e

这样搞是不是很爽?


备注:下面是Vim的配置,如果对vim不熟悉也可以不用vim,本地开发直接使用相应的编辑器就可以了,但是如果是服务器开发的话,vim就是必须品了,建议大家熟悉一些vim命令,技多不压身啊。

8、vim包管理工具vunble

看个人喜好安装。相信大家也都听说过Vim的名气,如果是在本地开发的话可以不用安装vim的各种插件及配色方案,当然如果你习惯使用vim除外

接下来就是配置vim编辑器,首先是Vundle,即bundle,vim的插件管理工具

Ggithub: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的编辑模式,输入:BundleInstall(注意前面要有冒号),此时插件开始安装。

9、配置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     " 设置命令历史行数

10、vim配色方案molokai

Github:molokai

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

11、vim安装插件

通过vunble安装:

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

12、编辑器的选择

前端开发中最常用的编辑器如下:

我本人用过其中的三个,最后使用的是Atom,也已经用了两年多的时间,编辑器之间没有谁好谁坏,适合自己的就是最好的。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!