码迷,mamicode.com
首页 > Web开发 > 详细

Mac下进行Node.js开发环境的配置

时间:2015-10-02 22:33:52      阅读:350      评论:0      收藏:0      [点我收藏+]

标签:

         我们知道,Mac是一款天生可以提升我们开发效率的系统,合理的使用Mac下面的神器,有助于提升我们的开发效率。个人是个VIM控,今天分享一下,我在mac下是如何进行Node.js的开发环境搭建的。先给大家看看最终的效果图片吧!

技术分享

Iterm2

        首先,推荐Iterm2这款命令行神器。它是一款终端替代工具,支持 Macos 10.5+ 版本。它具备很多优点:比如开源免费、快捷键丰富、水平垂直分屏、远程使用vi时兼容性好。如果再加上一点,就是它UI也比较友好,如果你喜欢捣鼓,可以配置主题,让iterm2界面更加友好,对自己的日常开发也是个视觉享受。

 

常用键位介绍:

  • 分窗口操作:shift+command+d(横向)command+d(竖向)
  • 查找和粘贴:command+f,呼出查找功能,tab 键选中找到的文本,option+enter 粘贴
  •    自动完成: command+; 根据上下文呼出自动完成窗口,上下键选择
  •    粘贴历史: shift+command+h5、回放功能:option+command+b
  •    分屏切换: command + ] 和 command + [ 在分屏之间进行切换 
  •          全屏: command+enter和command+shift+enter
  •       标签页: command + t 新建标签页,command + w关闭标签页

   

安装:

  •  可以直接去iterm2官网(http://iterm2.com/)下载zip包,然后将app拖进应用程序下面。
  •  更加优雅的方式是使用homebrew-cask。这是个命令行神器哦,有了 Cask,再也不用手动下载软件包 DMG,打开,拖进应用程序文件夹了,一切都可以交给程序去做。
    • 安装 Cast:

    • $ brew tap phinze/homebrew-cask && brew install brew-cask

       

    • 用法:

      $ brew cask search 列出所有可以被安装的软件
      $ brew cask search xx 查找所有和 xx 相关的应用
      $ brew cask info xx 查看xx应用的信息
      $ brew cask uninstall xx 卸载 xx
    • 安装iterm2
      $ brew cask install iterm2

       

 

  •   iterm2 的配置

            iterm2安装完了,接下来就是对iterm2进行一个主题上的配置了,使得它的UI更加满足我们的视觉享受。个人比较推荐solarized,先从github(https://github.com/altercation/solarized/tree/master/iterm2-colors-solarized)上将solarized下载下来。然后打开iterm2,点击 iTerm -> Preferences.然后点击Profiles tab,你会看到Colors。点击Colors之后,你将会看到如下图所示:
     技术分享
          点击Load Presets..按钮,并且选择Import..这项,然后将你从github上clone下来的solarized包iterm2-colors-solarized/Solarized Dark.itemcolors文件导入进去。导入完成后,你可能会发现,iterm2的主题并没有改变啊。这个时候,有两点需要注意一下:

  • 你需要在 ~/.bash_profile文件下进行配置,增加一行代码即可。 

    export CLICOLOR=1

     

  • 要想使你的配置生效,你还需要点击iTerm -> Preferences.之后点击Profiles tab,然后点击Keys,你会看到下图所示

            技术分享

  • 好的,如果你走完上面几步,应该可以看到迄今为止,iterm2的最终配置效果了。         


             技术分享

 

安装oh-my-zsh

 

        大多数linux程序员会偏向Bash,因为发行版通常默认的就是它。Bash确实是不错的Shell,但仍有用很多不尽人意的地方,如自动补全的功能不够强大,定位较长路径不够方便,命令历史管理不够完善等。zsh号称终极 Shell,可是由于配置过于复杂,之前一直无人问津。好在有个程序员开发出了一个能够让你快速上手的zsh项目,叫做oh-my-zsh。zsh有几个强大的优点:比如支持更加聪明的目录补全,和强大的插件机制。相信可以让你日常的开发效率提示很多。

  • 自动安装 

    $ sh -c "$(wget https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

     

  • 手动安装
    $ git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh
    
    $ cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

 

安装MacVIM

        如果你偏爱GUI程序,MacVIM会让你爽歪歪。Macvim本质上就是Vim,Vim中能用的在MacVim也一样。但是MacVim和OS X配合得更好,MacVim支持各种常见的快捷键。另一方面,如果使用 Vim,则只能多开一个 tab。而且受限于 Terminal,可视范围和高亮的颜色数都比 MacVim 差。

  •   MacVIM安装
    $ brew install macvim --with-override-system-vim
    $ brew linkapps

     

Node.js开发常用VIM插件配置

 

熟练运用各种VIM插件有助于提升Node.js开发效率,也能发挥出VIM神级编辑器的强大之处。先贴一下我的vim配置文件吧

~/.vimrc

set nocompatible " be iMproved
filetype off " required!

set rtp+=~/.vim/bundle/vundle
call vundle#rc()

" let Vundle manage Vundle
" required!
Bundle ‘gmarik/vundle‘
Bundle ‘altercation/vim-colors-solarized‘
Bundle ‘jlanzarotta/bufexplorer‘
Bundle ‘scrooloose/nerdtree‘
Bundle ‘godlygeek/tabular‘
Bundle ‘mileszs/ack.vim‘
Bundle ‘easymotion/vim-easymotion‘

filetype plugin indent on " required!

set bs=2
set ts=4
set sw=4
set number
" shows row and column number at bottom right corner
set ruler

" For solarized plugin (color scheme)
" https://github.com/altercation/vim-colors-solarized
syntax enable
set background=dark
colorscheme solarized

" NERDTree config
map <C-n> :NERDTreeToggle<CR>

 

 

下面开始介绍如何配置这些常见的VIM插件。

 

  • 第一步,选择一个插件管理工具Pathogen(或者 Vundle,如果你不使用这两者中的一个,那么你不是一个严格意义上得vim用户。个人比较喜欢vundle,这里以vundle为例进行说明。
    • 安装Vundle,之后你就可以很方便的通过Vundle对插件进行管理了,so easy~

      $ git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle
    •  安装插件

      • 保存退出当前的vim
      • 重新打开vim,输入命令:BundleInstall,然后就开始安装你的插件了
    •  移除插件

      • 编辑.vimrc文件移除的你要移除的插件行
      • 保存退出当前的vim
      • 重新打开vim,输入命令:BundleClean
  • NERD_Tree:是树形文件系统导航 ,可以很方便的在文件和目录之前进行切换,安装了Nerd_tree之后,vim的界面就如同传统的IDE一样了。它提供了丰富的键盘操作方式来浏览和打开文件。       
    • 基本配置
      map <C-n> :NERDTreeToggle<CR> "按ctrl+n进行窗口的切换
      let NERDTreeChDirMode=2 "选中root即设置为当前目录
      let NERDTreeQuitOnOpen=1 "打开文件时关闭树
      let NERDTreeShowBookmarks=1 "显示书签
      let NERDTreeMinimalUI=1 "不显示帮助面板
      let NERDTreeDirArrows=1 "目录箭头 1 显示箭头 0传统+-|号

       

    • 常用快捷键
                      ctrl + w + h: 光标 focus 左侧树形目录
                      ctrl + w + l: 光标 focus 右侧文件显示窗口
                      ctrl + w + w: 光标自动在左右侧窗口切换
                      ctrl + w + r: 移动当前窗口的布局位置
                                 o: 在已有窗口中打开文件、目录或书签,并跳到该窗口
                                 t: 在新 Tab 中打开选中文件/书签,并跳到新 Tab
                                 i: split 一个新窗口打开选中文件,并跳到该窗口
                                 q: 关闭 NerdTree 窗口
    • 配置完成后的截图如下:

              技术分享

  • Tabular: 允许你在 Vim 中按等号、冒号、表格等来对齐文本。
  • Solarized: 安装了Solarized之后,你的javascript代码视觉效果将会杠杠的。
  • Ack: 一个grep命令更好的替代工具。
  • EasyMotion:Vim的移动操作很强大, hjkl左下上右, wb按词移动, fF前后搜索等等, 方便, 快速. 但也有软肋, 跨越多行的精确跳转就相当不尽人意. 幸好, 有一款堪称神级表现的插件: EasyMotion.
  • vim-nodejs-complete: 用于Node.js关键字补全。
  • js-hint: JS语法查错插件

 

安装NVM


nvm是Node.js的版本管理工具,有了它,你可以很方便的管理Node.js的版本。

  •  自动安装
    $ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash 
  •  手动安装
    $ git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
    $ . ~/.nvm/nvm.sh
  • 使用方法
    nvm install 4.1.1 下载、编译、安装v4.1.1版本的Node.js
    nvm use 0.10.1 切换到0.10.1版本
    nvm ls 列出本地的所有Node.js版本

     

    OK,Node.js的开发环境已经搭建完毕,之后就可以愉快的进行开发了。

 

 

参考链接:

        1.  Github上也有一篇关于Vim插件的推荐文章:   https://github.com/nodejs/node-v0.x-archive/wiki/Vim-Plugins

        2.  在Mac OS X上使用Solarized:  http://blog.pangyanhan.com/posts/2013-12-13-vim-install-solarized-on-mac-os-x.html

        3.   NVM  Node.js版本管理工具:   https://github.com/creationix/nvm

        4.      EasyMotion vim插件配置:   https://github.com/easymotion/vim-easymotion

        5. 如何从命令行里面安装MacVim:  http://stackoverflow.com/questions/2056137/how-to-run-mvim-macvim-from-terminal

 

Mac下进行Node.js开发环境的配置

标签:

原文地址:http://www.cnblogs.com/yeyan/p/4852791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!