JavasSript之CentOS7.4安装VIM

JavasSript之CentOS7.4安装VIM

下载vim插件管理器

安装Git并从Github上下载vim插件管理器Vundle：

yum install git
git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

vim配置

文件路径：～/.vimrc，内容：

set nocompatible

" Vundle plugin start
filetype off
set rtp+=~/.vim/bundle/Vundle.vim

call vundle#begin()

Plugin 'VundleVim/Vundle.vim'
Plugin 'scrooloose/nerdtree'
Plugin 'Valloric/YouCompleteMe'
Plugin 'jiangmiao/auto-pairs'
Plugin 'pangloss/vim-javascript'
Plugin 'vim-syntastic/syntastic'
Plugin 'altercation/vim-colors-solarized'
Plugin 'maksimr/vim-jsbeautify'

call vundle#end()
" Vundle plugin end

" ycm config start
set completeopt=longest,menu
let g:ycm_seed_indentifiers_with_syntax=1
let g:ycm_autoclose_preview_window_after_completion=1
let g:ycm_complete_in_strings=1
autocmd Insertleave * if pumvisible()==0|pclose|endif
" ycm config end

" vim-javascript config start
let g:javascript_plugin_jsdoc=1
" vim-javascript config end

" vim-jsbeautify config start
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>

autocmd BufWritePre *.js call JsBeautify()
" vim-jsbeautify config end

" syntastic config start
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*

let g:syntastic_javascript_checkers = ['eslint']
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 1
let g:syntastic_check_on_open = 0
let g:syntastic_check_on_wq = 1
" syntastic config end

filetype plugin indent on

syntax on
set nu
set t_Co=256

autocmd InsertLeave * se nocul
autocmd InsertEnter * se cul

set smartindent
set smarttab
set confirm
set tabstop=4
set softtabstop=4
set shiftwidth=4
set expandtab
set hlsearch
set incsearch
set gdefault
set encoding=utf8
set langmenu=zh_CN.UTF-8
set helplang=cn
set ruler
set showcmd
set scrolloff=3
set showmatch
set matchtime=5
set autowrite
set linespace=2
set whichwrap=b,s,<,>,[,]
set laststatus=2
set ts=4
set expandtab
set autoindent

set wildignore+=node_modules/**

let g:solarized_termcolors=256
colorscheme solarized
set background=dark

map <C-n> :NERDTreeToggle<CR>

插件配置

vim-jsbeautify

文件路径：~/.editorconfig，内容：

;.editorconfig

root = true

[**.js]
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
space_after_anon_function = true
brace_style = end-expand

[**.json]
indent_style = space
indent_size = 4
trim_trailing_whitespace = true

[**.css]
indent_style = space
indent_size = 4

[**.html]
indent_style = space
indent_size = 4
brace_style = expand

eslint

文件路径：~/.eslintrc.json，内容：

{
    "env": {
        "es6": true,
        "node": true
    },
    "plugins": [
        "node",
        "promise"
    ],
    "extends": "eslint:recommended",
    "rules": {
        "arrow-spacing": ["error", {
            "before": true,
            "after": true
        }],
        "block-spacing": ["error", "always"],
        "space-before-blocks": ["error", "always"],
        "key-spacing": ["error", {
            "beforeColon": false,
            "afterColon": true
        }],
        "keyword-spacing": ["error", {
            "before": true,
            "after": true
        }],
        "no-console": "off",
        "indent": ["error", 4],
        "quotes": ["error", "single"],
        "camelcase": ["error", {
            "properties": "never"
        }],
        "comma-spacing": ["error", {
            "before": false,
            "after": true
        }],
        "eqeqeq": ["error", "always", {
            "null": "ignore"
        }],
        "semi": ["error", "always"],
        "semi-style": ["error", "last"],
        "space-unary-ops": ["error", {
            "words": true,
            "nonwords": false
        }],
        "brace-style": ["error", "stroustrup", {
            "allowSingleLine": true
        }]
    }
}

YouCompleteMe

文件路径：~/.tern-config，内容：

{
    "plugins": {
        "node": {}
    }
}

安装插件

环境准备

yum install nodejs automake gcc gcc-c++ kernel-devel cmake python-devel python3-devel
npm install eslint eslint-plugin-node eslint-plugin-promise -g

安装插件

任意位置打开vim，然后输入命令:PluginInstall，等待几分钟。

安装YouCompleteMe支持

~/.vim/bundle/YouCompleteMe/install.py --js-completer

升级vim

YouCompleteMe需要的vim版本高于系统vim默认版本，将vim升级到8即可。

yum remove vim-* -y
wget -P /etc/yum.repos.d/ https://copr.fedorainfracloud.org/coprs/mcepl/vim8/repo/epel-7/mcepl-vim8-epel-7.repo
yum -y install vim-enhanced

总结

因为WebStorm正版需要付费，老是去找盗版也不好意思，就捡起vim这个老古董，使用一段时间了，整体感觉良好，不比IDE差，而且随处可用，非常方便，也许它就是我编程生涯最后一个编辑器～

博客原文