面向web前端及node開發人員的vim配置

時間  2019-11-09
標籤 面向 web 前端 node 開發人員 vim 配置 欄目 HTML 简体版
原文   原文鏈接

鑑於 window 下基本用不到 vim，因此下面內容再也不說起 window，具體能夠在相應 github 中查看手冊
操做基礎：已裝有上有 nodejs(npm)。沒裝的能夠移步官網：https://nodejs.org/en/
<!--善其事利其器(3) - -->
另有 sublime 配置方式，請移步：sublime配置及使用技巧javascript

插件管理工具 pathogen

github地址: githubcss

mkdir -p ~/.vim/autoload ~/.vim/bundle && \
curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

插件

安裝插件都在 ~/.vim/bundle/ 中安裝，如下部分操做可能須要 root 權限html

  • vim-sensible vim新人專屬 github 
cd ~/.vim/bundle/
git clone git://github.com/tpope/vim-sensible.git
cd ~/.vim/bundle/
git clone https://github.com/vim-airline/vim-airline-themes.git
cd ~/.vim/bundle/
git clone https://github.com/vim-airline/vim-airline-themes ~/.vim/bundle/vim-airline-themes
  • Emmet 快速創建html樹 github 
cd ~/.vim/bundle/
git clone https://github.com/mattn/emmet-vim.git
  • editorconfig 編輯器配置 github 
cd ~/.vim/bundle/
git clone https://github.com/editorconfig/editorconfig-vim.git

新建文件 vim ~/.vim/.editconfig (可自定義，一般放在項目根目錄),鍵入如下設置：前端

root = true

indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace = true
  • vim-multiple-cursors 支持多行編輯 github 
cd ~/.vim/bundle/
git clone https://github.com/terryma/vim-multiple-cursors.git
  • unite-vim 快速管理項目中的文件 github 
cd ~/.vim/bundle/
git clone https://github.com/Shougo/unite.vim.git
  • vim-javascript 縮進和語法支持 github 
cd ~/.vim/bundle/
git clone https://github.com/pangloss/vim-javascript.git
  • jsDoc 對 vim-javascript 的補充，支持 es6和 TypeScirpt github 
cd ~/.vim/bundle/
git clone https://github.com/heavenshell/vim-jsdoc.git
  • Fugitive git版本控制 github 
git clone git://github.com/tpope/vim-fugitive.git
vim -u NONE -c "helptags vim-fugitive/doc" -c q
  • syntastic 語法檢查 github 
cd ~/.vim/bundle/
git clone --depth=1 https://github.com/vim-syntastic/syntastic.git

syntastic 須要一些其餘的html5

npm install -g jslint
npm install -g csslint
cd ~/.vim/bundle/
git clone https://github.com/hail2u/vim-css3-syntax.git
brew install tidy-html5
  • vim-css-color 自動預覽顏色 github 
cd ~/.vim/bundle/
git clone https://github.com/skammer/vim-css-color.git
  • vim-snipmate 自動完成代碼塊 github 
cd ~/.vim/bundle/
git clone https://github.com/tomtom/tlib_vim.git
git clone https://github.com/MarcWeber/vim-addon-mw-utils.git
git clone https://github.com/garbas/vim-snipmate.git
# Optional:
git clone https://github.com/honza/vim-snippets.git
  • vim-surround 輔助格式控制(用於括號、引號等) github 
cd ~/.vim/bundle/
git clone git://github.com/tpope/vim-surround.git
  • jsbeauty-vim 自動美化代碼，可配合 vim-autoformat 使用 github 
cd ~/.vim/bundle/
git clone https://github.com/maksimr/vim-jsbeautify.git
cd vim-jsbeautify && git submodule update --init --recursive
  • vim-markdown 把高亮功能推廣到 markdown github 
cd ~/.vim/bundle/
git clone https://github.com/plasticboy/vim-markdown.git
  • vim-instant-markdown 預覽 markdown githjub 
npm -g install instant-markdown-d
  • vim-markdown-toc 爲 markdown 生成標題 github 
cd ~/.vim/bundle/
git clone https://github.com/mzlogin/vim-markdown-toc.git
  • youcompleteme 代碼提示和補全 github

這個放在最後由於它比較複雜。屬於可選的插件，根據本身需求安裝。
首先，在 vim normal 模式輸入 :version 查看其版本，要求版本大於7.4.143, 不然更新它。
其次，在 vim normal 模式輸入 :echo has('python') || has('python3'), 若是輸出爲0，請更新 vim 以支持 python。
以後，在終端輸入：java

cd ~/.vim/bundle/
git clone https://github.com/Valloric/YouCompleteMe.git
cd ~/.vim/bundle/YouCompleteMe/
git submodule update --init --recursive
cd ~/.vim/bundle/YouCompleteMe/third_party/ycmd/third_party/tern_runtime
npm install --production

若是你須要支持 typescript，安裝：node

npm install -g typescript
cd ~/.vim/bundle/
git clone https://github.com/groenewege/vim-less

到這裏尚未完，做爲前端人，這個還不能正常工做，它須要一些依賴，下面咱們來安裝這些依賴：python

回到 bundle 目錄 安裝jquery

cd ~/.vim/bundle
git clone https://github.com/ternjs/tern_for_vim.git
cd ~/.vim/bundle/tern_for_vim
npm install

以後須要在您的項目根目錄創建一個 .tern-project 文件，沒有內容，空白便可。該文件內部結構以下:css3

{ "libs": [ "browser", "jquery" ], "loadEagerly": [ "importantfile.js" ], "plugins": {
    "requirejs": {
      "baseURL": "./",
      "paths": {}
    }
  }
}

此部分詳細配置在此 http://ternjs.net/doc/manual.html

  • apt-vim 自動管理插件 github

這裏再安裝一個插件自動管理插件，也比較麻煩，根據本身需求安裝：

  1. 自動安裝
curl -sL https://raw.githubusercontent.com/egalpin/apt-vim/master/install.sh | sh

2.手動安裝
須要Python2.7.x或Python3.0+

cd ~/.vim/bundle/
git clone https://github.com/egalpin/apt-vim.git
cd apt-vim
sudo ./apt-vim init

編輯 ~/.bashrc 或 ~/.bash_profile , 添加下面一句話

export PATH=$PATH:~/.vimpkg/bin

編輯 ~/.vimrc 添加：

execute pathogen#infect()
call pathogen#helptags()

繼續在終端執行：

source ~/.bashrc
apt-vim install

若是這裏提示了：Completed successfully. 那就大功告成了。

到此爲止，做爲一個前端人的 vim 就基本搭建好了，若是還有什麼好用的插件歡迎分享交流，若是你以爲這些插件還足夠，能夠去知乎、stackoverflow、或 github 上再挖掘一些。一些更高級插件會隨着博主的積累，不斷更新這篇內容的，歡迎關注。

下面附了我 .vimrc 和 .editorconfig 文件的內容：

"vimrc
"vim original config
set ignorecase        " ignore upper- or lowercase in search model
set smartcase         " if there is uppercase in search string ignore 'ignorecase' setting. it only works with 'ignorecase' setting
set autowrite         " auto write changes into file after :next、:rewind、:last、:first、:previous、:stop、:suspend、:tag、:!、:make、<C-]> or <C-^> runs, as well as jumps to another file with :buffer、<C-O>、<C-I>、'{A-Z0-9}' or `{A-Z0-9}`
set nocompatible      "Donot compate with vi, to avoid some bugs
filetype on           "check the file type
set autoindent        " use auto-indentation
set smartindent       " use smart indentation
set tabstop=2         " set the width of tab key
set softtabstop=2     " set the width of soft key
set shiftwidth=2      " auto-indent with 2 spaces
set backspace=2       " enable to use backspace
set showmatch         " show the matched braces
set linebreak         " wrap without breakword
set whichwrap=b,s,<,>,[,]   "jump to previous/next line when cursor at the head/end of line when input 'b'/'w' in normal model
set relativenumber    " show relative line number
set previewwindow     " show preview window
set history=1000      " set command history to 1000
set laststatus=2      " show the last activited window's status line always
set ruler             " show line number and column number in status  line

"command line setting
set showcmd           " show inputted command in command line
set showmode          " show current model in command line
set showmatch         "show match brace
set guioptions=T      "remove the toolbar in GUI
filetype on           "check the file type

"finding setting
set incsearch         " show matched words when input string
set hlsearch

"pathongen
execute pathogen#infect()
syntax on
filetype plugin indent on

"airline
let g:airline_theme='molokai'    "use a theme called 'molokai'
let g:airline#extensions#tabline#enabled=1    "show the tab line on the top
let g:airline_powerline_fonts=1    "use powerline fonts

"emmet
let g:user_emmet_mode='n'    "only enable normal mode functions.
let g:user_emmet_mode='inv'  "enable all functions, which is equal to
let g:user_emmet_mode='a'    "enable all function in all mode.
let g:user_emmet_install_global=0
autocmd FileType html,css EmmetInstall    "enable for just html/css
let g:user_emmet_leader_key='<C-Z>'    "change the default key(<C-Y>) to <C-Z>,  the trailing ',' still needs to be entered as well

"editConfig
let g:EditorConfig_exclude_patterns = ['fugitive://.*']    "ensure that this plugin works well with Tim Pope's fugitive
let g:EditorConfig_exclude_patterns = ['scp://.*']    "avoid loading EditorConfig for any remote files over ssh
let g:EditorConfig_exec_path = '~/.vim/.editorconfig'
let g:editorconfig_Beautifier = '~/.vim/.editorconfig'
"vim-javascript
let g:javascript_plugin_jsdoc=1    "Enables syntax highlighting for JSDocs.
let g:javascript_plugin_ngdoc=1    "Enables some additional syntax highlighting for NGDocs. Requires JSDoc plugin to be enabled as well.

"jsDoc
let g:jsdoc_enable_es6=1    "Enable to use ECMAScript6's Shorthand function, Arrow function.
let g:javascript_plugin_flow=1    "Enables syntax highlighting for Flow.

"syntastic
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 1
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
let g:syntastic_enable_highlighting=1

"apt-vim
execute pathogen#infect()
call pathogen#helptags()

"jsbeautify
autocmd FileType javascript noremap <buffer>  <c-f> :call JsBeautify()<cr>
autocmd FileType json noremap <buffer> <c-f> :call JsonBeautify()<cr>
autocmd FileType jsx noremap <buffer> <c-f> :call JsxBeautify()<cr>
autocmd FileType html noremap <buffer> <c-f> :call HtmlBeautify()<cr>
autocmd FileType css noremap <buffer> <c-f> :call CSSBeautify()<cr>

"vimCSS3syntsx
augroup VimCSS3Syntax
  autocmd!
  autocmd FileType css setlocal iskeyword+=-
augroup END

"vimCSScolor
let g:cssColorVimDoNotMessMyUpdatetime = 1

"YCM
let g:ycm_semantic_triggers =  { 'scss,css': [ 're!^\s{2,4}', 're!:\s+' ], 'html': ['<', '"', '</', ' '] }

"less2css
let g:less_autocompile = 1  " 這是開關 設置1保存less自動生成css  設置0關閉
function! s:auto_less_compile() " {{{
  if g:less_autocompile != 0
    try
      let css_name = expand("%:r") . ".css"
      let less_name = expand("%")
      if filereadable(css_name) || 0 < getfsize(less_name)
        let cmd = ':!lessc '.less_name.' 'css_name.' '
        silent execute cmd
      endif
    endtry
  endif
endfunction " }}}
autocmd BufWritePost *.less call s:auto_less_compile()
;.editorconfig
root = true

indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace = true

[**.js]
path=~/.vim/bundle/js-beautify/js/lib/beautify.js
bin=node

[**.jsx]
e4x = true
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程