.vimrc для фронтендера

в 8:12, , рубрики: .vimrc, vim, Веб-разработка, метки: ,

Привет, я занимаюсь фронтенд разработкой, и как-то так сложилось, что в своей повседневной работе активно использую vim.

В процессе работы накопился довольно большой, неплохо документированный конфиг, и в какой-то момент мне захотелось поделиться им с внешним миром, и возможно, что-нибудь в нем улучшить. Он может быть полезен не только веб разработчикам, но и в общем-то всем остальным.

Под катом я опишу основные фишки конфига. Vim использую в связке c iTerm и темой solarized, но конфиг с минимальными изменениями подходит для любого терминала и любой темы. Из-за подробного описания каждой опции он будет очень полезен для тех, кто по каким-то причинам решил перейти на вим недавно.

Как ни странно — в статье много картинок ;)

Фишки конфига

Краткое описание каждой опции или плагина

Обычно, конфиг для вима или очень минималистичный, или очень сложный для понимания, если ты не в теме. Если ты новичок, то ты сталкиваешься с двумя проблемами сразу:

  1. Как это настроить
  2. Как этим вашим вимом пользоваться (использование не настроенного вима добавляет много-много незабываемых минут на старте)

С решением второй проблемы я ничем помочь не могу, зато могу помочь решить первую — конфиг разбит на понятные блоки, и каждая опция или плагин кратко прокомментированы.
.vimrc для фронтендера

Установка Плагинов

В качестве менеджера плагинов используется vundle.
При первом заходе в vim, он установится автоматически и поставит все необходимые плагины.
Физически плагины будут находиться в

~/.vim/bundle

Список самих плагинов находится в .vimrc файле.
.vimrc для фронтендера
В нем указаны пути до репозиториев, откуда нужно забирать плагины. Если в качестве пути указанно только имя пользователя и название репозитория:

Bundle 'altercation/vim-colors-solarized'

То оно автоматически разворачивается в путь до гитхаба.

https://github.com/altercation/vim-colors-solarized

После добавления какого-то нового плагина в список, нужно сказать vundle чтобы он поставил его, а заодно и обновил существующие. Это делается командой :BundleInstall

Предустановленные полезные плагины

Vim-snipmate + Vim-snippets

Один из самых популярных плагинов для поддержки сниппетов, и куча стандартных сниппетов к нему. Подстановка происходит по нажатию на Tab.
Например если напечатать fun и нажать Tab то fun раскроется в объявление функции, а курсор переместится на первый аргумент сниппета - function_name:
.vimrc для фронтендера
Переход между аргументами сниппета происходит также по Tab
Сразу есть очень много уже готовых сниппетов для целой кучи языков. Они находятся тут:

~/.vim/bundle/vim-snippets/snippets/

Этот путь появляется после первого запуска vim.
В файле с названием _.snippets находятся сниппеты, которые могут быть полезны независимо от языка — например сниппет вставляющий копирайт или рыбный текст.

Syntastic

Он позволяет подключить множество статических анализаторов и проверять код на ошибки при сохранении и открытии файла.
По умолчанию вместе с конфигом устанавливается только jshint (для этого необходимо, чтобы у вас уже был установлен npm).

При нахождении ошибки, слева в окне появляются метки, указывающие на строку с ошибкой, а если курсор уже находится на строке с ошибкой, то её текст пишется в строке состояния вима.
.vimrc для фронтендера

Tcomment_vim

Небольшой плагин, который добавляет хоткеи для работы с комментариями:

  • gcc — переключает состояние комментарий/не комментарий, для текущей строки
  • gc то же самое но для выделенного блока текста.
NERDtree

Добавляет в vim возможность отображать каталоги, как древовидную структуру.
.vimrc для фронтендера
Их можно открывать в соседнем табе по нажатию на t или в текущем — по Enter

Если выбрать какую-нибудь папку или файл, и нажать m то можно будет его удалить, переименовать, или сделать что-то еще, что мы обычно хотим делать с файлами.
.vimrc для фронтендера
Конфиг добавляет несколько удобных хоткеев — например по f можно открыть split-view, в котором будет выделен текущий файл.
При выборе другого файла в этом split-view, он откроется в этом же окне. Этим удобно пользоваться при большом окне консоли.
.vimrc для фронтендера

Fugitive

Позволяет делать все необходимые операции с гитом сразу из вима. В конфиге по дефолту есть несколько полезных элиасов, чаще всего пользуюсь:

  • b — посмотреть blame для текущей строки
  • g — показывает в сплите статус текущей ветки
  • :Gdiff — показывает в splitview дифф сделанных изменений
FuzzyFinder

Позволяет быстро и удобно находить файлы и папки. Он поймет, что нужно искать, даже если вводить слова с очепятками, ошибками, неправильными путями и.т.д.

Хоткей для открытия ctrl+t
.vimrc для фронтендера
Из серьезных недостатков — значительный лаг при первом поиске в больших каталогах.

Другие плагины

Из достаточно интересных, но до сих пор не названных, остались еще Vim-surround и Vim-unimpaired, кроме них есть еще несколько других, полный список можно найти в файле конфига.
Все плагины уже готовы к работе.

Разная форма крусора для insert и command mode

Курсор в insert mode меняет свою форму с кирпичика, на пайп, тем самым экономя мне большое количество нервных клеток.
.vimrc для фронтендера
Код специфичен для iTerm, но это можно настроить, наверное, для любого терминала

Крутая и щадящая для глаз тема Solarized

Использую светлую ее версию в связке с аналогичной темой для iterm
Именно она видна на всех скриншотах в этом посте.

Если по каким-то причинам она вам не подходит, или вы хотите поставить что-нибудь своё, ее всегда можно убрать из конфига удалив бандл 'altercation/vim-colors-solarized' и раздел с заголовком Solarized

Мелкие полезные фишки

  • Показываются trailing spaces, табы и некоторые другие символы, которые в обычной ситуации не отображаются
    .vimrc для фронтендера
  • Настроенны умные отступы, можно нажать == на выбранной строке и в 99 процентах случаев vim автоматически сделает все отступы правильными.
    .vimrc для фронтендера
  • Подсветка найденных результатов сбрасывается при нажатии на Enter.
  • Отдельный хоткей для включения/выключения past mode — p. Этот режим нужен при вставке больших кусков кода из буфера обмена.
  • После повторного открытия файла позиция курсора в нем восстанавливается. То есть, если закончил его редактировать на 69 строке, при повторном открытии файл откроется именно на 69 строке.
  • Убраны большинство надоедливых предупреждений, на мой взгляд они только мешают.
  • При использовании vimdiff, не отображаются изменения в пробельных символах.

В Планах

Добавить умный автокомплит для javascript. Пока его нет, но я думаю что он появится в самое ближайшее время.

Где взять? :)

Посмотреть репозиторий и забрать конфиг можно тут: github.com/L0stSoul/vim-config

Автор: Beyondtheclouds

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js