tl; dr; установить эту настройку vim https://github.com/jameslai/jvim
James Lai написал потрясающую статью о Frontend Vim, которая была 404-й, когда я ответил на это,Это помогло мне переключиться с ST2 на VIM, поэтому я публикую его здесь.
Почему я использую VIM в качестве моего редактора выбора для фронт-энда разработки
от ДжеймсЛай
Я использую VIM в течение многих лет, и я просто не могу уйти от этого.В то время как многим нравится использовать Sublime Text 2, и я не могу не поощрять это, но если вы хотите использовать редактор, который может масштабироваться с вашими знаниями, VIM должен быть вашим предпочтительным редактором.
Легко редактируйте контент в тегах
Как FED, мы постоянно редактируем контент в тегах.VIM облегчает это благодаря своему текстовому объекту «tag» - t.Вот типичный сценарий, у вас есть исходный код, который выглядит следующим образом:
<div>Some content within here</div>
В VIM, чтобы заменить содержимое этого тега, вам просто нужно нажать cit.Это изменит внутренний тег, и у вас останется следующее:
<div></div>
Простая замена атрибутов HTML
Как и выше, мы всегда имеем дело с контентом в кавычках, частов качестве атрибутов в нашем HTML.У вас может быть что-то похожее на:
<aside class="one-third author box">
В этом сценарии просто нажмите ci ". Возможно, самая важная часть этого трюка, если это был единственный контент в этой строке, вам даже не нужноВаш курсор где-нибудь рядом с самой цитатой! VIM достаточно умен, чтобы просто очистить содержание цитаты независимо от ее положения в строке, и у вас останется:
<aside class="">
Перейти назад и четвертыймежду тем, где вы редактировали
Как FED, мы постоянно перескакиваем назад и на четвертое место между ранее отредактированными вами местами. VIM поддерживает «список переходов», по которому легко перемещаться по Ctr + O (переход к предыдущим местам)) и Ctr + I (вперед). Это делает нашу процедуру редактирования множества файлов одновременно невероятно безболезненной.
Дополнительная информация о переходах
На Mac? В VIM:у вас снова есть правильный ключ удаления
Клавиатуры Mac не поставляются с обычным ключом удаления - у нас, по сути, есть клавиша возврата, но она помечена как удаление.Кроме того, вы можете обратиться к funcdelete, но эта функциональная клавиша наверняка найдет выход.Вместо этого нажмите x!
Переместите CSS как мастер
Часто мне нужно реорганизовать некоторые CSS и переместить свойства между селекторами.С помощью VIM я могу перемещать контент из разных строк в положение курсора с помощью простого:
:<linenumber>,<linenumber>m
Общие операции, подобные этим, смехотворно упрощаются с помощью VIM.
Перейти к концу или началулинии
Это необычно в моем рабочем процессе - необходимо перейти к концу строки.Возможно, я забыл точку с запятой в конце свойства CSS или строки Javascript.Чтобы перейти к концу строки, просто нажмите A, и вы находитесь в режиме вставки в конце строки.Нужно редактировать в начале (не считая табуляции)?Используйте I.
Редактируйте со скоростью мысли
Одной из основных концепций VIM является предотвращение необходимости тянуться к вашей мыши.Когда я в потоке, я никогда не берусь за мышь, если она не взаимодействует с веб-страницей, над которой я работаю.Успех в VIM означает, что ваша способность редактировать и манипулировать текстом почти приближается к тому, насколько быстро вы можете думать о проблеме.Из-за концепции текстовых объектов, размышление «Я хочу удалить эту строку» становится тривиальным dd или удалением слова с помощью daw.Когда вы думаете о проблеме, вам чаще всего нелегко дать команду редактору.На мой взгляд, возможность войти в ваш поток с VIM выше, чем у большинства других редакторов.
Легко разбиваемые окна
Что-то, что полностью изменило мои разработкиЯ учился, как действительно использовать разделенные окна в VIM.Да, VIM имеет разделенные окна, и они потрясающие!Некоторые редакторы поставляются с этой функциональностью, но она может быть громоздкой или трудной для запоминания.
Плевки являются мощными, потому что мы часто обращаемся к одному и тому же элементу во многих местах.Если вы обращаетесь к элементу, вам часто нужно, чтобы HTML-файл работал.Если вы применяете к нему стилизацию, вам нужно, чтобы CSS работал, а если вы применяете поведение, вы также хотите, чтобы Javascript был активирован.Увидев их одновременно, я избавил меня от множества буквальных головных болей при редактировании.Поток кажется очень «естественным», не говоря уже о том, как классно будет выглядеть ваш редактор.Часто в каждый момент времени у меня будет как минимум 4 сплита.
Отличный способ начать, набрав: Vex.Это открывает вертикальное окно исследования.Отсюда вы можете перейти к любому файлу, который вы хотите, и этот файл появится в разделении.Также есть всегда привлекательная команда: Sex, которая откроет окно проводника горизонтального разделения.
Вертикальные окна разделения
Дополнительная информация о разделениях
Дополнительная информация о проводнике файлов
Ваша настройка в любом месте
Возможно, одна из наиболее привлекательных функций - это возможность очень быстро настроить свою настройку.Я сохраняю свою конфигурацию VIM в GitHub repo , что означает, что независимо от того, на какой машине я работаю, у меня есть около 2 команд до полной готовности к настройке.
… дажена удаленных машинах
Разработчики внешнего интерфейса неизбежно будут работать на удаленном сервере в определенный момент.Черт, у многих из нас есть локальные Linux-боксы в виртуальной машине, которые реплицируют наши серверные среды.Вам понадобится редактор, и вместо того, чтобы возиться с VIM, потому что вы не знаете, как заставить его танцевать, или используете простой и слабый редактор, такой как nano, чтобы стать успешным в VIM на стороне клиента, вам нужнобыть главным на стороне сервера.
Заключительные мысли
VIM - удивительный редактор, и, хотя вы можете подумать, что он старый, он на самом деле более чем соответствует задаче сегодняшнего редактирования.Неважно, какой новый редактор появится на рынке, я могу попробовать их, чтобы узнать, какие там есть нововведения, но в итоге я всегда возвращаюсь в VIM для всего своего редактирования, и мне это нравится.