歡迎光臨
每天分享高質量文章

10分鐘教你為自己打造一個專屬VIM

Vim 是一個上古神器,本篇文章主要持續總結使用 Vim 的過程中不得不瞭解的一些指令和註意事項,以及持續分享一個前端工作者不得不安裝的一些插件,而關於 Vim 的簡介,主題的選擇,以及為何使用 vim-plug 來管理插件等內容,有興趣的同學下來可以自己瞭解和對比下。
— 楓上霧棋

 

 

本文導航
轉載自 | https://segmentfault.com/a/1190000011466454
 作者 | SF / 楓上霧棋

Vim 是一個上古神器,本篇文章主要持續總結使用 Vim 的過程中不得不瞭解的一些指令和註意事項,以及持續分享一個前端工作者不得不安裝的一些插件,而關於 Vim 的簡介,主題的選擇,以及為何使用 vim-plug 來管理插件等內容,有興趣的同學下來可以自己瞭解和對比下。

安裝

sudo apt-getinstall vim// Ubuntu

其他平臺,可以自行谷歌。

新手指南

vimtutor// vim 教程

上面是史上最簡單,最全面的Vim基礎教程,至今無人超越。

下麵是作者基於上面的歸納:

移動光標

# hjkl# 2w 向前移動兩個單詞# 3e 向前移動到第 3 個單詞的末尾# 0 移動到行首# $ 當前行的末尾# gg 檔案第一行# G 檔案最後一行# 行號+G 指定行# +o 跳轉回之前的位置# +i 傳回跳轉之前的位置

退出

#  進入正常樣式# :q! 不儲存退出# :wq 儲存後退出

刪除

# x 刪除當前字符# dw 刪除至當前單詞末尾# de 刪除至當前單詞末尾,包括當前字符# d$ 刪除至當前行尾# dd 刪除整行# 2dd 刪除兩行

修改

# i 插入文本# A 當前行末尾添加# r 替換當前字符# o 打開新的一行併進入插入樣式

撤銷

# u 撤銷# +r 取消撤銷

複製粘貼剪切

# v 進入可視樣式# y 複製# p 粘貼# yy 複製當前行# dd 剪切當前行

狀態

#+g 顯示當前行以及檔案信息

查找

# / 正向查找(n:繼續查找,N:相反方向繼續查找)# ? 逆向查找# % 查找配對的 {,[,(# :set ic 忽略大小寫# :set noic 取消忽略大小寫# :set hls 匹配項高亮顯示# :set is 顯示部分匹配

替換

# :s/old/new 替換該行第一個匹配串# :s/old/new/g 替換全行的匹配串# :%s/old/new/g 替換整個檔案的匹配串

摺疊

# zc 摺疊# zC 摺疊所有嵌套# zo 展開摺疊# zO 展開所有摺疊嵌套

執行外部命令

# :!shell 執行外部命令

.vimrc

.vimrc 是 Vim 的配置檔案,需要我們自己創建:

cd Home               // 進入 Home 目錄touch .vimrc          // 配置檔案# Unix# vim-plug# Vimcurl -fLo ~/.vim/autoload/plug.vim --create-dirs     https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim# Neovimcurl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs     https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

其他平臺,可以查看 vim-plug[1]

基本配置

取消備份

set nobackupset noswapfile

檔案編碼

setencoding=utf-8

顯示行號

setnumber

取消換行

setnowrap

顯示光標當前位置

setruler

設置縮進

set cindentset tabstop=2set shiftwidth=2

突出顯示當前行

setcursorline

查找

set icset hlsset is

左下角顯示當前 vim 樣式

setshowmode

代碼摺疊

# 啟動 vim 時關閉摺疊代碼set nofoldenable

主題

syntax enableset background=darkcolorscheme solarized
◈ altercation/vim-colors-solarized[2]
◈ Anthony25/gnome-terminal-colors-solarized[3]

插件配置

樹形目錄

Plug 'scrooloose/nerdtree'Plug 'jistr/vim-nerdtree-tabs'Plug 'Xuyuanp/nerdtree-git-plugin'autocmd vimenter * NERDTreemap  :NERDTreeTogglelet NERDTreeShowHidden=1let g:NERDTreeShowIgnoredStatus = 1let g:nerdtree_tabs_open_on_console_startup=1let g:NERDTreeIndicatorMapCustom = {     "Modified"  : "✹",     "Staged"    : "✚",     "Untracked" : "✭",     "Renamed"   : "➜",     "Unmerged"  : "═",     "Deleted"   : "✖",     "Dirty"     : "✗",     "Clean"     : "✔︎",     'Ignored'   : '☒',     "Unknown"   : "?"     }# o 打開關閉檔案或目錄# e 以檔案管理的方式打開選中的目錄# t 在標簽頁中打開# T 在標簽頁中打開,但光標仍然留在 NERDTree# r 掃清光標所在的目錄# R 掃清當前根路徑# X 收起所有目錄# p 小寫,跳轉到光標所在的上一級路徑# P 大寫,跳轉到當前根路徑# J 到第一個節點# K 到最後一個節點# I 顯示隱藏檔案# m 顯示檔案操作選單# C 將根路徑設置為光標所在的目錄# u 設置上級目錄為根路徑# ctrl + w + w 光標自動在左右側視窗切換# ctrl + w + r 移動當前視窗的佈局位置# :tabc 關閉當前的 tab# :tabo   關閉所有其他的 tab# :tabp   前一個 tab# :tabn   後一個 tab# gT      前一個 tab# gt      後一個 tab
◈ scrooloose/nerdtree[4]
◈ vim-nerdtree-tabs[5]
◈ nerdtree-git-plugin[6]

代碼,引號,路徑補全

Plug 'Valloric/YouCompleteMe'Plug 'Raimondi/delimitMate'Plug 'Shougo/deoplete.nvim', { 'do': ':UpdateRemotePlugins' }
◈ Valloric/YouCompleteMe[7]
◈ Raimondi/delimitMate[8]
◈ Shougo/deoplete.nvim[9]

語法高亮,檢查

Plug 'sheerun/vim-polyglot'Plug 'w0rp/ale'let g:ale_linters = {    'javascript': ['eslint'],    'css': ['stylelint'],}let g:ale_fixers = {    'javascript': ['eslint'],    'css': ['stylelint'],}let g:ale_fix_on_save = 1let g:ale_sign_column_always = 1let g:ale_sign_error = '●'let g:ale_sign_warning = '▶'nmap   (ale_previous_wrap)nmap   (ale_next_wrap)
◈ w0rp/ale[10]
◈ sheerun/vim-polyglot[11]

檔案,代碼搜索

Plug 'rking/ag.vim'Plug 'kien/ctrlp.vim'
◈ kien/ctrlp.vim[12]
◈ ggreer/the_silver_searcher[13]
◈ rking/ag.vim[14]

加強版狀態欄

Plug 'vim-airline/vim-airline'Plug 'vim-airline/vim-airline-themes'let g:airline_theme='papercolor'
◈ vim-airline/vim-airline[15]
◈ vim-airline/vim-airline-themes[16]

代碼註釋

Plug 'scrooloose/nerdcommenter'# cc // 註釋# cm 只用一組符號註釋# cA 在行尾添加註釋# c$ /* 註釋 */# cs /* 塊註釋 */# cy 註釋並複製# c 註釋/取消註釋# ca 切換 // 和 /* */# cu 取消註釋let g:NERDSpaceDelims = 1let g:NERDDefaultAlign = 'left'let g:NERDCustomDelimiters = {             'javascript': { 'left': '//', 'leftAlt': '/**', 'rightAlt': '*/' },             'less': { 'left': '/**', 'right': '*/' }         }
◈ scrooloose/nerdcommenter[17]

git

Plug 'airblade/vim-gitgutter'Plug 'tpope/vim-fugitive'
◈ airblade/vim-gitgutter[18]
◈ tpope/vim-fugitive[19]

Markdown

Plug 'suan/vim-instant-markdown'let g:instant_markdown_slow = 1let g:instant_markdown_autostart = 0# :InstantMarkdownPreview
◈ suan/vim-instant-markdown[20]

Emmet

Plug 'mattn/emmet-vim'let g:user_emmet_leader_key=''let g:user_emmet_settings = {          'javascript.jsx' : {             'extends' : 'jsx',          },       }
◈ mattn/emmet-vim[21]

html 5

Plug'othree/html5.vim'
◈ othree/html5.vim[22]

css 3

Plug 'hail2u/vim-css3-syntax'Plug 'ap/vim-css-color'augroup VimCSS3Syntax  autocmd!  autocmd FileType css setlocal iskeyword+=-augroup END
◈ hail2u/vim-css3-syntax[23]
◈ ap/vim-css-color[24]

JavaScipt

  1. Plug 'pangloss/vim-javascript'
  2. let g:javascript_plugin_jsdoc = 1
  3. let g:javascript_plugin_ngdoc = 1
  4. let g:javascript_plugin_flow = 1
  5. set foldmethod=syntax
  6. let g:javascript_conceal_function             = "ƒ"
  7. let g:javascript_conceal_null                 = "ø"
  8. let g:javascript_conceal_this                 = "@"
  9. let g:javascript_conceal_return               = "⇚"
  10. let g:javascript_conceal_undefined            = "¿"
  11. let g:javascript_conceal_NaN                  = "ℕ"
  12. let g:javascript_conceal_prototype            = "¶"
  13. let g:javascript_conceal_static               = "•"
  14. let g:javascript_conceal_super                = "Ω"
  15. let g:javascript_conceal_arrow_function       = "⇒"
  16. let g:javascript_conceal_noarg_arrow_function = " "
  17. let g:javascript_conceal_underscore_arrow_function = " "
  18. set conceallevel=1
◈ pangloss/vim-javascript[25]

(註:上述腳本中存在特殊字符,有的情況下顯示不正確,請直接用上述鏈接的內容。)

React

  1. Plug 'mxw/vim-jsx'
  2. let g:jsx_ext_required = 0
◈ mxw/vim-jsx[26]

Prettier

  1. Plug 'prettier/vim-prettier', {
  2.   'do': 'yarn install',
  3.   'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql'] }
  4. let g:prettier#config#bracket_spacing = 'true'
  5. let g:prettier#config#jsx_bracket_same_line = 'false'
  6. let g:prettier#autoformat = 0
  7. autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql PrettierAsync
  8. # :Prettier
◈ prettier/vim-prettier[27]

總結

最後,呈上參考配置 .vimrc[28],如果關於 vim 有更好的 idea,歡迎在評論中交流。

赞(0)

分享創造快樂