Initialize MacBook for FrontEnd Development

xiaoxiao2021-02-28  4



A tool to make MacBook more like Unix when working on terminal.

ruby -e "$(curl -fsSL"

Check installation.

xiaoqiangwang@localhost:~$ brew -v Homebrew 1.5.2 Homebrew/homebrew-core (git revision 0912; last commit 2018-02-05)


This is a terminal client to take place of terminal offered by MacBook default.

brew cask install iterm2


MacBook supports vim by default, and this install guide is my style, you might not need to do this.

Initialize folder structure for Vundle.vim:

(mkdir -p ~/.vim/bundle; git clone ~/.vim/bundle/Vundle.vim)


syntax on set noswapfile set ts=2 set sw=2 " ------------------------------------------------------------ " Vundle " ------------------------------------------------------------ set nocompatible " be iMproved, required filetype off " required " set the runtime path to include Vundle and initialize set rtp+=~/.vim/bundle/Vundle.vim call vundle#begin() " alternatively, pass a path where Vundle should install plugins "call vundle#begin('~/some/path/here') " let Vundle manage Vundle, required Plugin 'VundleVim/Vundle.vim' " The following are examples of different formats supported. " Keep Plugin commands between vundle#begin/end. " plugin on GitHub repo Plugin 'tpope/vim-fugitive' " plugin from " Plugin 'L9' " Git plugin not hosted on GitHub Plugin 'git://' " git repos on your local machine (i.e. when working on your own plugin) " The sparkup vim script is in a subdirectory of this repo called vim. " Pass the path to set the runtimepath properly. Plugin 'rstacruz/sparkup', {'rtp': 'vim/'} " Install L9 and avoid a Naming conflict if you've already installed a " different version somewhere else. " Plugin 'ascenator/L9', {'name': 'newL9'} " <plugin wangxiaoqiang> Plugin 'scrooloose/nerdtree' Plugin 'fholgado/minibufexpl.vim' Plugin 'ctrlpvim/ctrlp.vim' Plugin 'othree/html5.vim' Plugin 'easymotion/vim-easymotion' " </plugin> " All of your Plugins must be added before the following line call vundle#end() " required filetype plugin indent on " required " To ignore plugin indent changes, instead use: "filetype plugin on " " Brief help " :PluginList - lists configured plugins " :PluginInstall - installs plugins; append `!` to update or just :PluginUpdate " :PluginSearch foo - searches for foo; append `!` to refresh local cache " :PluginClean - confirms removal of unused plugins; append `!` to auto-approve removal " " see :h vundle for more details or wiki for FAQ " Put your non-Plugin stuff after this line " ------------------------------------------------------------ " NERDTree " ------------------------------------------------------------ "NERDTree: autoload when startup vim autocmd StdinReadPre * let s:std_in=1 autocmd VimEnter * if argc() == 0 && !exists("s:std_in") | NERDTree | endif "NERDTree: C-n to open NERDTree map <C-n> :NERDTreeToggle<CR> " NERDTree: File highlighting function! NERDTreeHighlightFile(extension, fg, bg, guifg, guibg) exec 'autocmd filetype nerdtree highlight ' . a:extension .' ctermbg='. a:bg .' ctermfg='. a:fg .' guibg='. a:guibg .' guifg='. a:guifg exec 'autocmd filetype nerdtree syn match ' . a:extension .' #^\s\+.*'. a:extension .'$#' endfunction call NERDTreeHighlightFile('jade', 'green', 'none', 'green', '#151515') call NERDTreeHighlightFile('ini', 'yellow', 'none', 'yellow', '#151515') call NERDTreeHighlightFile('md', 'blue', 'none', '#3366FF', '#151515') call NERDTreeHighlightFile('yml', 'yellow', 'none', 'yellow', '#151515') call NERDTreeHighlightFile('config', 'yellow', 'none', 'yellow', '#151515') call NERDTreeHighlightFile('conf', 'yellow', 'none', 'yellow', '#151515') call NERDTreeHighlightFile('json', 'yellow', 'none', 'yellow', '#151515') call NERDTreeHighlightFile('html', 'yellow', 'none', 'yellow', '#151515') call NERDTreeHighlightFile('styl', 'cyan', 'none', 'cyan', '#151515') call NERDTreeHighlightFile('css', 'cyan', 'none', 'cyan', '#151515') call NERDTreeHighlightFile('coffee', 'Red', 'none', 'red', '#151515') call NERDTreeHighlightFile('js', 'Red', 'none', '#ffa500', '#151515') call NERDTreeHighlightFile('php', 'Magenta', 'none', '#ff00ff', '#151515') " ------------------------------------------------------------ " html5.vim " ------------------------------------------------------------ " Disable event-handler attributes support: "let g:html5_event_handler_attributes_complete = 0 " Disable RDFa attributes support: "let g:html5_rdfa_attributes_complete = 0 " Disable microdata attributes support: "let g:html5_microdata_attributes_complete = 0 " Disable WAI-ARIA attribute support: "let g:html5_aria_attributes_complete = 0 " ------------------------------------------------------------ " CtrlP " ------------------------------------------------------------ " ref - let g:ctrlp_map = '<c-p>' let g:ctrlp_cmd = 'CtrlP' let g:ctrlp_working_path_mode = 'ra' let g:ctrlp_root_markers = ['pom.xml', '.p4ignore', 'package.json'] set wildignore+=*/node_modules/*,*/.git/*,*.so,*.swp,*.zip " ------------------------------------------------------------ " vim-easymotion " ------------------------------------------------------------ " ref - let g:EasyMotion_smartcase = 1 "let g:EasyMotion_startofline = 0 " keep cursor colum when JK motion map <Leader><Leader>j <Plug>(easymotion-j) map <Leader><Leader>k <Plug>(easymotion-k) map <Leader><leader>h <Plug>(easymotion-linebackward) map <Leader><leader>l <Plug>(easymotion-lineforward) map <Leader><leader>. <Plug>(easymotion-repeat) nmap s <Plug>(easymotion-s) " ------------------------------------------------------------ " " ------------------------------------------------------------

Exit vim and reopen .vimrc to install vim plugins by running command:


Wait moments, and you can use the new features when use vim next time.


Open your browser to download a install package of latest chrome.

Workspace Chat

A chat client supported by facebook, always helpful for team work.

Open your browser to download


A node version control tool, which looks like maven in java.

curl -o- | bash

Or you can install a latest version by your self from GitHub.

Check installation:

nvm --version


Install node with specified version by nvm.

Open a new terminal after install nvm tool, and run the subcommand install like below:

nvm install 12

Node.js v12 is the latest stable version. (2020-05-31), you can get the latest version from official site.

Or you can install manually for entire system scope node Official Site.

After a few seconds, you check the node installation by:

node -v


Terminal with color

Edit file .bash_profile can help.


export TERM="xterm-color" PS1='\[\e[0;33m\]\u\[\e[0m\]@\[\e[0;32m\]\h\[\e[0m\]:\[\e[0;34m\]\w\[\e[0m\]\$ ' # Tell ls to be colourful export CLICOLOR=1 export LSCOLORS=Exfxcxdxbxegedabagacad # Tell grep to highlight matches export GREP_OPTIONS='--color=auto'

Can also found at MAC OS X 命令终端的颜色显示。


Will Keep on Update This Guide…