Initialize MacBook for FrontEnd Development

xiaoxiao2021-02-28  4

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'

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

_

Will Keep on Update This Guide…

转载请注明原文地址: https://www.6miu.com/read-2250137.html

最新回复(0)