Как редактировать HTML в Vim? - PullRequest
Новая
       37

Как редактировать HTML в Vim?

11 голосов
/ 10 мая 2011

Я новичок в Vim и пытаюсь к этому привыкнуть. Я просто создал файл .vimrc и заставил Vim отображать номера строк и выполнять пошаговый поиск. Я также включил подсветку синтаксиса. Теперь я хочу, чтобы вещи облегчали написание HTML. Я искал html.vim в / usr / share / vim и нашел это: 

/usr/share/vim/vim72/syntax/html.vim
/usr/share/vim/vim72/ftplugin/html.vim
/usr/share/vim/vim72/indent/html.vim

Теперь, что мне нужно сделать, чтобы включить автоматический отступ HTML? Скопируйте эти файлы в ~ / .vim? Симлинк им? Или Vim автоматически загружает их из / usr / share / vim /? (Это уже делает подсветку синтаксиса HTML, так что я думаю, что это возможно - но это не делает автоматический отступ HTML) Я слышал, что set autoindent в .vimrc поможет, но что с файлами .c? Я думал, что им нужно set cindent, но работает ли cindent с HTML?

Ответы [ 2 ]

19 голосов
/ 10 мая 2011

Самое первое, что вы должны сделать, это попробовать vimtutor и выполнить его пару раз. Как только основы будут рассмотрены, вы можете начать играть с плагинами ...

SnipMate вдохновлен фрагментами текста TextMate и / или так прекрасен, по умолчанию имеет множество фрагментов HTML, и вы легко можете добавить свой собственный. Чтобы использовать его, введите div, затем нажмите Tab , чтобы получить: 

<div id="|">

</div>

с кареткой между "", готовой для ввода идентификатора; снова нажмите Tab , чтобы переместить курсор на пустую строку: 

<div id="myId">
    |
</div>

Красивая. Однако многие редакторы имеют эту функцию.

Если у вас много HTML-кода для написания - скажем, несколько электронных писем / новостных рассылок в день - другой плагин под названием SparkUp позволяет создавать сложный HTML с помощью всего нескольких нажатий клавиш и некоторого знания CSS. Вы начинаете набирать что-то вроде: 

table[id=myTable] > tr*3 > td*2 > img

затем вы нажмете <C-e> ( Ctrl E ), чтобы получить: 

<table cellspacing="0" id="myTable">
  <tr>
    <td>
      <img src="|" alt="" />
    </td>
    <td>
      <img src="" alt="" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="" alt="" />
    </td>
    <td>
      <img src="" alt="" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="" alt="" />
    </td>
    <td>
      <img src="" alt="" />
    </td>
  </tr>
</table>

с кареткой внутри первого пустого "". Нажмите <C-n> и <C-p>, чтобы перейти к следующему / предыдущему полю.

Magical. Плагин доступен для большего количества редакторов.

Я второй текстовые объекты и Surround.vim, которые невероятно полезны.

Еще одна интересная функция - это режим визуального блока (:help visual-block), в котором можно выбирать столбцы текста. Скажем, у вас есть: 

<ul>
    <li><p>My text doesn't mean anything</p></li>
    <li><p>My text doesn't mean anything</p></li>
    <li><p>My text doesn't mean anything</p></li>
    <li><p>My text doesn't mean anything</p></li>
</ul>

поместите курсор на > первого <li>, затем нажмите <C-v> и переместите курсор вниз к четвертому <li>. Нажмите I (заглавная I), чтобы перейти в режим INSERT непосредственно перед > и введите class="myElement", затем <Esc>, чтобы получить: 

<ul>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
</ul>

Хо да!

Серьезно, Вим великолепен.

13 голосов
/ 10 мая 2011

Взгляните на плагин AutoCloseTag , чтобы закрыть теги по мере их ввода. И set autoindent должен обрабатывать отступ HTML.

Также вы должны прочитать документы в :help text-objects, чтобы узнать об использовании внутреннего и внешнего выбора тегов. Например, в обычном режиме вы можете сделать c i t , чтобы изменить текст внутри текущего тега. Или в визуальном режиме a t расширит визуальный выбор для инкапсуляции тега вокруг курсора.

Наконец, посмотрите на плагин Surround.vim , который может окружать выделенный или текстовый объект тегом или изменять тег вокруг него.

...