Initialize MacBook for FrontEnd Development_version="html5+rdfa 1.0-CSDN博客

本文链接：https://blog.csdn.net/wxqee/article/details/79272316

Install

brew

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

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

Check installation.

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

iterm2

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

brew cask install iterm2

vim

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 https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim)

.vimrc

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 http://vim-scripts.org/vim/scripts.html
" Plugin 'L9'
" Git plugin not hosted on GitHub
Plugin 'git://git.wincent.com/command-t.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 - https://github.com/ctrlpvim/ctrlp.vim
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 - https://github.com/easymotion/vim-easymotion

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:

:PluginInstall

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

Chrome

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

https://www.google.cn/chrome/browser/desktop/index.html

Workspace Chat

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

Open your browser to download

nvm

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

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

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

Check installation:

nvm --version

node

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 nodejs.org 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

Configure

Terminal with color

Edit file .bash_profile can help.

~/.bash_profile

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'