Простая конфигурация vim для разработки внешнего интерфейса

Давайте рассмотрим несколько популярных плагинов Vim для веб-разработки. Сегодня мы сосредоточимся только на плагинах, относящихся к веб-интерфейсу. В следующих статьях я хочу рассмотреть другие полезные плагины, такие как nerdtree, vim-airport и т. Д.

Прежде всего, мы должны установить Vim или Neovim. Если он у вас уже есть, обновите его до последней версии. Начнем с нуля. После установки редактора давайте создадим .vimrc, если вы используете Vim, или init.vim для Neovim.

touch ~/.vimrc
touch ~/.config/nvim/init.vim

Для быстрого начала работы с Vim нам нужно установить любой менеджер плагинов. Мне нравится vim-plug, и я буду использовать его в этой статье. Вы можете найти руководство по установке на странице Github. После установки нам нужно отредактировать init.vim/.vimrc файл.

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

source ~/.config/nvim/init.vim

Затем нам необходимо установить последнюю версию Node.js. Я бы рекомендовал использовать NVM для контроля версий.

coc.nvim

Первый плагин, который мы рассмотрим, - coc.vim. На мой взгляд, это лучший Intellisense, который мы можем использовать в Vim. Лучший способ изучить этот плагин - попробовать его, а затем использовать документацию, чтобы настроить его для себя. Это будет легко, потому что coc.vim имеет отличную документацию. Кроме того, базовую конфигурацию вы можете найти на главной странице GitHub. Он поддерживает множество языков и фреймворков. Полный список вы можете найти здесь.

Давайте отредактируем файл конфигурации, а затем вызовем команду :PlugInstall.

После этого мы должны настроить конфигурацию для этого плагина. А пока воспользуемся примером конфигурации. Скопируйте и вставьте его в init.vim/.vimrc файл под определением плагинов.

Затем давайте установим несколько расширений coc:

Этого должно хватить для быстрой демонстрации, но при желании вы можете установить расширения для angular, vue и т. Д. После установки этих расширений вы можете использовать автоматический импорт, автозаполнение, получать информацию о сигнатуре метода, и другие потрясающие функции. Остальные функции можно найти в документации по плагинам и расширениям.

Синтастический

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

Затем добавьте дополнительную конфигурацию для синтаксического плагина, который я описал ниже, и перезагрузите файл конфигурации vim. После этого вызовите :PlugInstall command.

Теперь мы можем использовать функции плагина. Чтобы проверить, как отображаются эти ошибки, перейдите к файлу README, затем создайте или откройте проект с eslint/tslint конфигурацией и сравните его с представлением из документации.

Красивее

С линтингом это выглядит очень красиво, но мы должны вручную отформатировать код в соответствии с нашими требованиями. Я ленив и стараюсь максимально автоматизировать процессы, особенно при кодировании. Один из самых популярных инструментов для форматирования кода - красивее, и мне нравится использовать его в своих проектах. Чтобы использовать prettier вместе с редактором vim, нам нужно установить vim-prettier. Просто добавьте этот плагин в конфигурацию vim-plug, а затем перезагрузите редактор vim с помощью команды source.

Вот и все. Для использования prettier вместе с vim не требуется дополнительная настройка. Просто добавьте .prettierrc файл в свой проект, при желании добавьте правила. В противном случае prettier будет использовать правила по умолчанию. По умолчанию используется Leader + p для вызова более красивого и форматного кода; Кстати, по умолчанию главный ключ - \.

Конечно, это не полное руководство по плагинам интерфейса vim. Но этого хватит для быстрой демонстрации в рамках одной статьи. В следующих статьях я рассмотрю другие темы, такие как git, навигация, поиск и т. Д. Надеюсь, эта небольшая статья была интересной, и вы почерпнули из нее что-то полезное.