如何讓 vim 成為我們的神器

Scorpion 發布于2019-06-28 10:24 / 2117人閱讀

摘要：是一個上古神器，剛剛接觸的同學可能很難駕馭，本篇文章主要帶領大家快速入門，并持續分享當前流行的一些安裝新手指南教程移動光標向前移動兩個單詞向前移動到第個單詞的末尾移動到行首當前行的末尾文件第一行文件最后一行行號指定行跳轉回之前的位置返回

Vim 是一個上古神器，剛剛接觸的同學可能很難駕馭，本篇文章主要帶領大家 快速入門，并 持續分享 當前流行的一些 vim-plugin

安裝

sudo apt-get install vim  // Ubuntu

新手指南

vimtutor  // 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 剪切當前行

文件

# :e! 強制刷新該文件
# +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 執行外部命令

字體

#  - 縮小
#  shift + 放大
#  0 還原

分屏

$ Ctrl+W v  // 左右
$ Ctrl+W s  // 上下

# 移動光標
$ Ctrl+W h/j/k/l  // 左/上/下/右

# 移動分屏
$ Ctrl+W H/J/K/L  // 左/上/下/右

# 修改屏幕尺寸
$ Ctrl+W =/+/-

基本配置

.vimrc 是 Vim 的配置文件，需要我們自己創建

cd
touch .vimrc

取消備份

set nobackup
set noswapfile

文件編碼

set encoding=utf-8

查找

set ic
set hls
set is

顯示行號

set number

顯示光標當前位置

set ruler

設置縮進

set cindent

set tabstop=2
set shiftwidth=2

突出顯示當前行

set cursorline

左下角顯示當前 vim 模式

set showmode

代碼折疊

set nofoldenable

主題

syntax enable
set background=dark
colorscheme solarized

altercation/vim-colors-solarized

Anthony25/gnome-terminal-colors-solarized

插件配置

使用 vim-plug 管理插件

樹形目錄

Plug "scrooloose/nerdtree"
Plug "jistr/vim-nerdtree-tabs"
Plug "Xuyuanp/nerdtree-git-plugin"

autocmd vimenter * NERDTree
map  :NERDTreeToggle
let NERDTreeMinimalUI = 1
let NERDTreeShowHidden = 1

let g:nerdtree_tabs_open_on_console_startup = 1
let g:nerdtree_tabs_focus_on_files = 1

let 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

vim-nerdtree-tabs

nerdtree-git-plugin

代碼，引號，路徑補全

Plug "Valloric/YouCompleteMe"
Plug "Raimondi/delimitMate"
Plug "Shougo/deoplete.nvim", { "do": ":UpdateRemotePlugins" }

Valloric/YouCompleteMe

Raimondi/delimitMate

Shougo/deoplete.nvim

語法高亮，檢查

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 = 1

let g:ale_sign_column_always = 1
let g:ale_sign_error = "●"
let g:ale_sign_warning = "?"

nmap   (ale_previous_wrap)
nmap   (ale_next_wrap)

w0rp/ale

sheerun/vim-polyglot

文件，代碼搜索，打開最近打開的文件

Plug "rking/ag.vim"
Plug "kien/ctrlp.vim"
Plug "vim-scripts/mru.vim"

let g:ag_highlight=1
let g:ag_working_path_mode="r"

# :Ag! content

set wildignore+=*.zip,*.exe

let g:ctrlp_map = ""
let g:ctrlp_custom_ignore = {
   "dir":  "v[/](node_modules|DS_Store|dist|build|coverage)|(.(git|hg|svn)$)",
   "file": "v.(exe|so|dll)$",
   }

# : 切換匹配模式
#  or , ：在新的 tab 中打開

let MRU_Exclude_Files = "^/tmp/.*|^/var/tmp/.*"
let MRU_Window_Height = 15

# :MRU

kien/ctrlp.vim

ggreer/the_silver_searcher

rking/ag.vim

vim-scripts/mru.vim

加強版狀態欄

Plug "itchyny/lightline.vim"

let g:lightline = {
       "colorscheme": "powerline",
       "active": {
         "left": [ [ "mode", "paste" ],
                   [ "gitbranch", "readonly", "filename", "modified", "helloworld" ] ],
         "right": [ [ "lineinfo" ],
                    [ "percent" ],
                    [ "fileformat", "fileencoding", "filetype" ] ]
       },
       "component": {
         "helloworld": "Hello, 楓上霧棋!"
       },
       "component_function": {
         "gitbranch": "fugitive#head"
       },
       }

itchyny/lightline.vim

代碼注釋

Plug "scrooloose/nerdcommenter"

# c 注釋/取消注釋
# cc // 注釋
# cm 只用一組符號注釋
# cA 在行尾添加注釋
# c$ /* 注釋 */
# cs /* 塊注釋 */
# cy 注釋并復制
# ca 切換　// 和 /* */
# cu 取消注釋

let g:NERDSpaceDelims = 1
let g:NERDDefaultAlign = "left"
let g:NERDCustomDelimiters = {
             "javascript": { "left": "http://", "leftAlt": "/**", "rightAlt": "*/" },
             "less": { "left": "/**", "right": "*/" }
         }

let g:NERDAltDelims_javascript = 1
let g:NERDDefaultNesting = 0

scrooloose/nerdcommenter

git

Plug "airblade/vim-gitgutter"
Plug "tpope/vim-fugitive"

airblade/vim-gitgutter

tpope/vim-fugitive

Markdown

Plug "suan/vim-instant-markdown"
Plug "junegunn/goyo.vim"
Plug "amix/vim-zenroom2"

let g:instant_markdown_slow = 1
let g:instant_markdown_autostart = 0
# :InstantMarkdownPreview

# :Goyo

suan/vim-instant-markdown

junegunn/goyo.vim

amix/vim-zenroom2

Emmet

Plug "mattn/emmet-vim"

let g:user_emmet_leader_key=""
let g:user_emmet_settings = {
          "javascript.jsx" : {
             "extends" : "jsx",
         },
          }

mattn/emmet-vim

html 5

Plug "othree/html5.vim"

othree/html5.vim

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

ap/vim-css-color

JavaScipt

Plug "pangloss/vim-javascript"

let g:javascript_plugin_jsdoc = 1
let g:javascript_plugin_ngdoc = 1
let g:javascript_plugin_flow = 1
set foldmethod=syntax
let g:javascript_conceal_function             = "?"
let g:javascript_conceal_null                 = "?"
let g:javascript_conceal_this                 = "@"
let g:javascript_conceal_return               = "?"
let g:javascript_conceal_undefined            = "?"
let g:javascript_conceal_NaN                  = "?"
let g:javascript_conceal_prototype            = "?"
let g:javascript_conceal_static               = "?"
let g:javascript_conceal_super                = "Ω"
let g:javascript_conceal_arrow_function       = "?"
let g:javascript_conceal_noarg_arrow_function = "?"
let g:javascript_conceal_underscore_arrow_function = "?"
set conceallevel=1

pangloss/vim-javascript

js-beautify

Plug "maksimr/vim-jsbeautify"

autocmd FileType html noremap   :call HtmlBeautify()

js-beautify

React

Plug "mxw/vim-jsx"

let g:jsx_ext_required = 0

mxw/vim-jsx

Prettier

Plug "prettier/vim-prettier", {
   "do": "yarn install",
   "for": ["javascript", "typescript", "css", "less", "scss", "json", "graphql", "markdown"] }

let g:prettier#config#bracket_spacing = "true"
let g:prettier#config#jsx_bracket_same_line = "false"
let g:prettier#config#trailing_comma = "es5"
let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*md PrettierAsync

# :Prettier

prettier/vim-prettier

自動規范化中文排版

Plug "hotoo/pangu.vim"

# :Pangu

hotoo/pangu.vim

總結

最后，提供 to-vim-tmux-zsh 倉庫可供參考，其中，除包含 vim 的配置，還有 tmux 和 zsh 的分享

GPU云服務器云服務器讓我們一起如何成為亞馬遜的賣家如何成為前端高手如何成為linux高手

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/24980.html

征服恐懼！用 Vim 寫 iOS App

摘要：我們都知道和都是文本編輯器中的上古神器，你也許用，配合完成過大型或者的開發，你也許配合過其他插件，完成過，代碼的開發，但是很少有人試過的開發吧，畢竟的框架包含了很多東西，以及天生很長的名字，讓我們沒辦法把此神器用起來，今天我就來給大家講下我們都知道 Vim 和 Emacs 都是文本編輯器中的上古神器，你也許用 ctags，cscopes 配合 Vim 完成過大型 C 或者 C++ 的...

endless_road 2019-06-28 10:17 評論0 收藏0
Vim實戰指南(四)：ex命令

摘要：原文地址實戰指南四命令是下的一個文本編輯器。你已經見過中的，沒錯，這些就是來自于命令。當你希望顯示某行，輸入命令，顯示器上才會顯示那行。而控制這個顯示器顯示文本的命令行工具，就是。原文地址：Vim實戰指南(四)：ex命令 Introduction ex是Unix下的一個文本編輯器。至于為什么突然講到這個，那是因為vi就是ex的visual mode。你已經見過vi中的:w, :q!，...

icyfire 2019-06-28 10:12 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0