Настройка редактора vim для веб разработчика.
Почему vim?
Я являюсь фанатом данного редактора, на протяжении последнего года я пишу в VsCode с использованием neovim.
Чем же так хорош данный редактор? Ведь с первой версии прошло, ни много ни мало, почти 30 лет. Основное преимущество - скорость работы с текстом, она действительно потрясающая. Все взаимодействие с кодом происходит посредством клавиатуры. Это невероятно удобно, все ваши мысли могут быть реализованы с помощью шорткатов и макросов. Выделение текста, переход по зависимостям, поиск и форматирование кода происходят быстро и лаконично (разумеется требуется небольшая снаровка). Основные сочитания клавиш можно посмотреть тут. Кроме того, vim можно использовать на любом linux-line дистрибутиве.
В данной небольшой статье я оставлю, и разберу свой конфиг файл для vim.
Общие плагины, полезные большинству разработчиков.
- Менеджеры пакетов. В vim их существует несколько, я рассмотрю Plug.
Установка
curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
Также можно добавить скрипт для в конфиг файл для автоматической загрузки, что мы и сделаем.
if empty(glob('~/.vim/autoload/plug.vim'))
silent !curl -fLo ~/.vim/autoload/plug.vim --create-dirs
\ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
autocmd VimEnter * PlugInstall --sync | source $MYVIMRC
endif
Плагины добавляются в .vimrc следующим образом "Plug "". После чего можно установить их :PlugInstall в интерактивной строке ввода.
Установка плагинов должна быть выполнена в блоке
call plug#begin('~/.vim/plugged')
...
call plug#end()
- Темплейты. Лично мне приятно разрабатывать в красивом интерфейсе с удобночитаемой подсветкой, для vim существует множество темплейтов. Лично мне пришелся по душе этот.
Настройка
Добавим в .vimrc
let g:material_style='palenight'
set background=dark
colorscheme vim-material
set termguicolors " Fix color scheme bug in Hyper.js
hi Normal guibg=NONE ctermbg=NONE
Также настроим цветовую схему
if (has("nvim"))
"For Neovim 0.1.3 and 0.1.4 < https://github.com/neovim/neovim/pull/2198 >
let $NVIM_TUI_ENABLE_TRUE_COLOR=1
endif
"For Neovim > 0.1.5 and Vim > patch 7.4.1799 < https://github.com/vim/vim/commit/61be73bb0f965a895bfb064ea3e55476ac175162 >
"Based on Vim patch 7.4.1770 (`guicolors` option) < https://github.com/vim/vim/commit/8a633e3427b47286869aa4b96f2bfc1fe65b25cd >
" < https://github.com/neovim/neovim/wiki/Following-HEAD#20160511 >
if (has("termguicolors"))
set termguicolors
endif
- Airline - мощный инструмент для панелей, как нижних, так и верних.
Настройка
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'
...
let g:airline#extensions#tabline#formatter = 'unique_tail'
let g:airline#extensions#tabline#enabled = 1 " top pane
let g:airline_theme = "palenight" " template
Настройка
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } } " File search
Plug 'junegunn/fzf.vim' " File search
Также добавим конфиги, для fzf
let $FZF_DEFAULT_OPTS = '--reverse'
let $FZF_DEFAULT_COMMAND = "rg --files --hidden --glob '!.git/**'"
- NERDTree - боковое дерево файлов
Настройка
Plug 'preservim/nerdtree' " File tree
6. Красивые глифы для NERDtree, а также других элементов редактора.
Настройка
Plug 'ryanoasis/vim-devicons' " Nice icons for nerd tree commander
Стоит отметить, для полноценный работы vim-devicons необходм специальный шрифт, я использую Monaco с лигатурами (Mac OS) поэтому прикрепляю его тут. Также, если вам нужен просто Monaco шрифт с лигатурами, без NerdTree иконок можете скачать его сдесь
Поддержка языков
Prettier - автоформатирование кода.
Подключение
Установка
Plug 'prettier/vim-prettier', {
\ 'do': 'yarn install',
\ 'branch': 'release/1.x',
\ 'for': [
\ 'javascript',
\ 'typescript',
\ 'css',
\ 'less',
\ 'scss',
\ 'json',
\ 'graphql',
\ 'markdown',
\ 'vue',
\ 'lua',
\ 'python',
\ 'html',
\ 'swift' ] } " Good code autoformatting
Настройка
let g:prettier#autoformat = 1
let g:prettier#exec_cmd_async = 1
let g:prettier#config#parser = 'babylon'
vim-coc - мощный инструмент для линтеров, форматирования кода, переходу к объявлению типов, реализаций, ссылок. polyglot - поддержка синтаксиса для множества языков
Plug 'sheerun/vim-polyglot' "Syntax highlighting for different languages
Plug 'neoclide/coc.nvim' , { 'branch' : 'release' } " Amazing autocomplete/typing support for much languages
Настройка для COC
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)
nmap <silent> [g <Plug>(coc-diagnostic-prev)
nmap <silent> ]g <Plug>(coc-diagnostic-next)
Мой coc-config.json
{
"vls": {
"command": "vls",
"filetypes": ["c", "cpp", "objc", "objcpp"],
"trace.server": "verbose",
"initializationOptions": {
"cacheDirectory": "/tmp/ccls"
}
},
"coc.preferences.formatOnSaveFiletypes": [
"css",
"markdown",
"html",
"scss",
"pug",
"python",
"vue"
],
"python.jediEnabled": false,
"python.linting.flake8Enabled": true,
"python.linting.enabled": true,
"python.linting.flake8Args": [
"--max-line-length=120",
"--ignore=E402,F841,F401,E302,E305"
]
}
Javascript/Typescript
Для установки подсветки синтаксиса для js/ts/graphql добавим
Plug 'pangloss/vim-javascript' " JavaScript support
Plug 'Quramy/tsuquyomi' " typescript
Plug 'maxmellon/vim-jsx-pretty' " JS and JSX syntax
Plug 'jparise/vim-graphql' " GraphQL syntax
Для автокомплита укажем в настройках
let g:coc_global_extensions = [ 'coc-tsserver' ]
Angular
Plug 'curist/vim-angular-template'
Plug 'burnettk/vim-angular'
Vue js
Plug 'posva/vim-vue'
Достаточно долго провозился с настройкой перехода к type/method defenition. Для корректной работы необходимо :CocInstall coc-vetur
HTML
Plug 'alvan/vim-closetag' " Automatic tag closing
Plug 'mattn/emmet-vim' " Emmet, fast HTML inserting
Настройка автозакрытия тегов
let g:closetag_filenames = '*.html,*.xhtml,*.phtml'
let g:closetag_filetypes = 'html,xhtml,phtml'
let g:closetag_xhtml_filetypes = 'xhtml,jsx'
let g:closetag_regions = {
\ 'typescript.tsx': 'jsxRegion,tsxRegion',
\ 'javascript.jsx': 'jsxRegion',
\ }
Golang
Plug 'fatih/vim-go', { 'do': ':GoUpdateBinaries' } " Golang support
Python
Plug 'davidhalter/jedi-vim' " Autocomplete/syntax for python
Plug 'jmcantrell/vim-virtualenv' " User virtualenv for current python interpretor
Plug 'mitsuhiko/vim-jinja' " Jinja support for vim
Plug 'nvie/vim-flake8' " Linter for python code
Для корректной работы также необходимо установить :CocInstall coc-python
Devops
Plug 'chr4/nginx.vim' " Nginx hightlighting
Git
Blamer - для вывода последней информации о коммите в текущей строке.
Fugitive - плагин для управления гитом
Plug 'APZelos/blamer.nvim' " Show last editor of current line
Plug 'tpope/vim-fugitive' " Usefull utility for working with git
Настройка
let g:blamer_enabled = 1 " enable blamer
let g:blamer_show_in_insert_modes = 0 " disable blamer in insert mode
Некоторые дополнительные плагины для удобства редактирования/просмотра кода
Plug 'tomtom/tcomment_vim' " Fast comment current line or block
Plug 'Yggdroot/indentLine' " Hightlighting for indents
Plug 'tmhedberg/SimpylFold' " Simple folding blocks of code
Plug 'SirVer/ultisnips' " Snippets
Plug 'honza/vim-snippets' " snipets engine
Кастомные настройки и мапинг
Настройки
set encoding=UTF-8
" Folding configs
set foldmethod=syntax
set foldnestmax=5
set foldlevelstart=1
set number " enable showing of numbers
set relativenumber " relative numbers for better navigation
set directory=~/.vim/backup " Move .swp files to home directory
Маппинг
" Resize pane
noremap <silent> <C-S-Left> :vertical resize -5<CR>
noremap <silent> <C-S-Right> :vertical resize +5<CR>
" Save file like VsCode
noremap <silent> <C-S> :update<CR>
vnoremap <silent> <C-S> <C-C>:update<CR>
inoremap <silent> <C-S> <C-O>:update<CR>
" Tab switching
map gn :bn<cr>
map gp :bp<cr>
map gd :bd<cr>
nmap <silent> <C-p> :Files<CR> " Fast file opening for search
" Clipboard
noremap <Leader>y "*y
noremap <Leader>p "*p
noremap <Leader>Y "+y
noremap <Leader>P "+p
" MAC os binding for NERDTree
nnoremap † <Esc> :NERDTreeToggle<CR> " ALT+T - toggle file
nnoremap ƒ <Esc> :NERDTreeFind<CR>== " ALT+F reveal current file in nerdtree
Все настройки можно найти тут. Также этот тред будет периодически обновлятся и дополнятся. На текущий момент мой воркспейс выглядит так:
Также, если вы вдруг, используете hyper, вам могут понадобиться настройки для него, т.к. с цветами он работает из ряда вон плохо. Попробовав несколько терминалов могу порекомендовать Iterm2. Он поддерживает лигатуры (что для меня, является важным критерием) и достаточно производительный. Если лигатуры вам неинтересны (а также установка бекграунда) то рекомедую Alacritty, он очень шустрый, просто невероятно шустрый (особенно в сравнении с hyper, написанным на электроне).
hyper настройки
// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
config: {
updateChannel: 'stable',
fontSize: 14,
fontFamily: '"Ligamonacop Nerd Font", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
fontWeight: 'bold',
fontWeightBold: 'bold',
lineHeight: 1.2,
letterSpacing: 1.2,
cursorColor: 'rgba(248,28,229,0.8)',
cursorAccentColor: '#000',
cursorShape: 'BLOCK',
cursorBlink: true,
foregroundColor: '#fff',
backgroundColor: '#000',
selectionColor: 'rgba(248,28,229,0.3)',
borderColor: '#333',
css: '',
termCSS: `
x-screen x-row { font-variant-ligatures: contextual; }
`,
showHamburgerMenu: '',
showWindowControls: '',
padding: '12px 14px',
colors: {
black: '#000000',
red: '#C51E14',
green: '#1DC121',
yellow: '#C7C329',
blue: '#0A2FC4',
magenta: '#C839C5',
cyan: '#20C5C6',
white: '#C7C7C7',
lightBlack: '#686868',
lightRed: '#FD6F6B',
lightGreen: '#67F86F',
lightYellow: '#FFFA72',
lightBlue: '#6A76FB',
lightMagenta: '#FD7CFC',
lightCyan: '#68FDFE',
lightWhite: '#FFFFFF',
},
shell: '',
shellArgs: ['--login'],
env: {},
bell: 'SOUND',
copyOnSelect: false,
defaultSSHApp: true,
quickEdit: false,
macOptionSelectionMode: 'vertical',
webGLRenderer: false,
MaterialTheme: {
theme: 'Palenight',
backgroundOpacity: '1',
accentColor: '#64FFDA',
vibrancy: 'dark'
},
},
plugins: [
"hyper-material-theme",
"hyper-opacity",
// "hyperpower",
"hyper-search",
// "hyper-vivifyscrum",
"hyper-pane",
"hyper-font-ligatures"
],
localPlugins: [],
keymaps: {
// Example
// 'window:devtools': 'cmd+alt+o',
},
};