Mac前端开发环境的搭建（配置）-转载

钱包包包妮 發表於 2019-5-1 19:10:00

Mac前端开发环境的搭建（配置）--转载

原文链接：http://www.cnblogs.com/yangyoucun/p/5145237.html
<h3 id="工具lantern">1、***工具：lantern</h3>
<blockquote>
***工具不是必须的，如果你想安装的话下面是Git地址，可进入安装
</blockquote>
地址：蓝灯(Lantern)最新版本下载
<h3 id="命令行工具iterm2">2、命令行工具：iterm2</h3>
<blockquote>
建议安装该命令行工具，前端开发中会遇到各种通过命令行的形式来完成操作的工具，所以一款好的命令行工具是非常必须的。
</blockquote>
官网：iterm2
虽然mac自带终端，也不是很难看，但功能不是很多，term2是mac上非常好的一款命令行工具，可以完全替代系统自带的终端。term2具有很多优点：
<ul>
<li>1、选中即复制，不用command＋c了；</li>
<li>2、全文查找并高亮显示：command＋f</li>
<li>3、方便的分屏显示：垂直分屏：command＋d，水平分屏：command＋shift＋d</li>
<li>4、自定义快捷键</li>
<li>5、强大的界面自定义，设置配色方案，透明背景，等等</li>
<li>6、其他功能，我还没有体验到的</li>
</ul>
我主要做了两个配置如下（如下是我的界面截图）：
<ul>
<li>打开全屏（Preferences - Profiles - Window - Settings For New Windows）</li>
<li>背景透明度（Preferences - Profiles - Window - transparency）</li>
</ul>
<img src="http://img.youthol.top/iterm2.png">
<h3 id="终端软件包管理工具brew">3、终端软件包管理工具：brew</h3>
<blockquote>
homebrew工具建议安装，因为后面会有一些工具的安装就是使用的brew
</blockquote>
官网：Homebrew
就和ubuntu下的apt－get功能类似，可以很方便的管理软件。
安装方式，直接在终端里输入：
<div class="cnblogs_code">
<pre>1 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"</pre>
</div>
运行完即可安装软件了，安装方式和apt－get相同：
<div class="cnblogs_code">
<pre>1 sudo brew install xxx</pre>
</div>
<h2 id="终端复用工具tmux">4、终端复用工具：tmux</h2>
<blockquote>
tmux是一款终端复用软件，我第一次发现他的神奇之处是在实习的时候，别人在电脑上敲的命令在我的屏幕上竟然可以同步显示，就和直播一样，简直不可思议。后来换了单位以后用到的较少了，分屏切换主要在iterm2上进行了，不过，该工具依然特别好用。
</blockquote>
官网：tmux
可以直接通过brew安装：
<div class="cnblogs_code">
<pre>1 sudo brew install tmux</pre>
</div>
以下是tmux的部分优点：
<ul>
<li>可横向和纵向分割窗口</li>
<li>窗格可以自由移动和调整大小，或直接利用四个预设布局之一</li>
<li>可在多个缓冲区进行复制和粘贴</li>
<li>可通过交互式菜单来选择窗口、会话及客户端</li>
<li>提供了强劲的、易于使用的命令行界面</li>
</ul>
<h3 id="安装nodenpmgit">5、安装node、npm、git</h3>
<blockquote>
这三款工具是必安装的，大部分前端工具都依赖Node，npm是node自带的包管理器，git是版本管理工具
</blockquote>
直接通过brew安装即可，我没有尝试，我是通过官网下载的程序安装的。安装node自带npm，git貌似系统自带。
<div class="cnblogs_code">
<pre>1 brew install node
2 brew install git</pre>
</div>
<h3 id="zsh安装on-my-zsh">6、zsh安装on my zsh</h3>
<blockquote>
建议安装，可以让命令行界面更美观，此外配合autojump使用功能会更强大。
</blockquote>
有时候会发现执行命令时前面一串系统自带的字符串很长，想移去，此时久可以用zsh
<div class="cnblogs_code">
<pre>1 wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh</pre>
</div>
zsh的强大之处在于可以自定义快捷键。比我，我要执行webpack，但是每次都要输入webpack太麻烦了，就算为了节省力气，使用webpack －－watch，也要输入很长的命令，而通过wp则简单的很：
只需在<code>～/.zshrc</code>中输入以下规则即可。
<div class="cnblogs_code">
<pre>alias wp='webpack'
alias wpw='webpack --progress --colors --watch'
alias wps='webpack-dev-server --progress --colors'</pre>
</div>
这样，我们直接在命令行中输入wp就是执行的webpack，输入wpw，即启动了观察模式，输入wps，则启动了服务器，是不是很简单？！
<h3 id="autojump">7、autojump</h3>
<blockquote>
强烈建议安装使用
</blockquote>
和zsh结合使用，功能更强大，比如如果我要进入一个很深的目录，我需要不断的<code>cd</code>才可以，但是通过autojump，我可以直接使用如下命令：
比如目录机构为：
<pre><code class="hljs groovy">a/b/c/d/e</code></pre>
强大的跳转命令：
<div class="cnblogs_code">
<pre>1 j e</pre>
</div>
这样搞是不是很爽？
<hr>
<blockquote>
备注：下面是Vim的配置，如果对vim不熟悉也可以不用vim，本地开发直接使用相应的编辑器就可以了，但是如果是服务器开发的话，vim就是必须品了，建议大家熟悉一些vim命令，技多不压身啊。
</blockquote>
<h3 id="vim包管理工具vunble">8、vim包管理工具vunble</h3>
<blockquote>
看个人喜好安装。相信大家也都听说过Vim的名气，如果是在本地开发的话可以不用安装vim的各种插件及配色方案，当然如果你习惯使用vim除外
</blockquote>
接下来就是配置vim编辑器，首先是Vundle,即bundle，vim的插件管理工具
Ggithub：Vundle.vim
安装vunble：
<div class="cnblogs_code">
<pre>1 git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim</pre>
</div>
然后，在～目录下新建.vimrc，输入：
<div class="cnblogs_code">
<pre>set nocompatible
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin 'VundleVim/Vundle.vim'</pre>
</div>
然后，退出vim的编辑模式，输入：BundleInstall（注意前面要有冒号），此时插件开始安装。
<h3 id="配置vim">9、配置vim</h3>
这里推荐一下我收集的一个前端VIM配置方案https://github.com/Gavin-YYC/vimrc
前面已经安装了vunble，那么其他的插件安装变得更简单，先来进行一些简单的vim配置：
<div class="cnblogs_code">
<pre>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 " 设置命令历史行数</pre>
</div>
<h3 id="vim配色方案molokai">10、vim配色方案molokai</h3>
Github：molokai
配置很简单，在<code>～/.vim/colors</code>下，复制进去<code>molokai.vim</code>即可。
<h3 id="vim安装插件">11、vim安装插件</h3>
通过vunble安装：
在<code>.vimrc</code>中，输入：<code>Bundle 'mattn/emmet-vim'</code>，然后退出编辑模式，输入：<code>BunbleInstall</code>即可，如果没有，则推出vim重新进入，在执行安装命令。
<h3 id="编辑器的选择">12、编辑器的选择</h3>
前端开发中最常用的编辑器如下：
<ul>
<li>Sublime Text</li>
<li>PhpStorm</li>
<li>Visual Studio Code</li>
<li>Atom</li>
</ul>
我本人用过其中的三个，最后使用的是<code>Atom</code>，也已经用了两年多的时间，编辑器之间没有谁好谁坏，适合自己的就是最好的。 
来源：https://www.cnblogs.com/orzs/p/10800477.html

頁: [1]

琼殿技术论坛's Archiver

Mac前端开发环境的搭建（配置）--转载