Bagaimana cara saya merapikan indentasi file HTML di VI?

130

Bagaimana cara memperbaiki lekukan file html besarnya yang semuanya kacau?

Saya mencoba "gg=Gperintah yang biasa , yang saya gunakan untuk memperbaiki indentasi file kode. Namun, sepertinya itu tidak berfungsi dengan baik pada file HTML. Itu hanya menghapus semua format.

Saya juga mencoba pengaturan :filetype = xml, untuk melihat apakah mengelabui ke berpikir ini adalah file XML akan membantu tetapi masih tidak melakukannya.

html vim vi indentation mmcdole
sumber

Jawaban:

91

Dengan filetype indent ondi dalam saya .vimrc, Vim indentasi file HTML dengan cukup baik.

Contoh sederhana dengan shiftwidth2:

<html>
  <body>
    <p>
    text
    </p>
  </body>
</html>
moinudin
sumber
15
Salin tempel html halaman pertanyaan ini ke file html. Buka dengan VIM, ketik "set smartindent", lalu "gg = G" dan itu tidak memperbaiki indentasi file.
mmcdole
15
Ini bekerja untuk saya. set ft = html <cr> atur si <cr> gg = G <cr>. Memformat halaman ini dengan cukup baik.
Don Reba
5
+1 memverifikasi bahwa "indentasi / nonaktif tipe file" mengaktifkan atau menonaktifkan sihir.
Wim Coenen
4
Ya, setelah mengatur indentasi pintar, filetype = html, dan dan filetype ident berfungsi untuk saya.
mmcdole
22
Dari chovy.com/web-development/fix-indentation-and-tabs-in-vim menemukan bahwa saya perlu memuat ulang file dengan: e setelah filetype indent on.
Marc Stober
189

Ada beberapa hal yang perlu dilakukan. Untuk meringkas semuanya dalam satu lokasi:

Atur opsi berikut:

:filetype indent on
:set filetype=html           # abbrev -  :set ft=html
:set smartindent             # abbrev -  :set si

Lalu pindahkan kursor ke atas file dan indentasi ke akhir: gg =G
Atau pilih teks yang diinginkan untuk indentasi dan tekan =untuk indentasi itu.

tylerl
sumber
@tyrel, terima kasih, tetapi bagi saya tidak berfungsi .. Ini adalah konten file: pastebin.com/gagia8W2 . File itu disebut home.html. Saya tidak punya masalah untuk membuat indentasi file .php. Di sini Anda memiliki .vimrc saya: pastebin.com/FAJ0MCA9
ziiweb
1
Apakah ada cara saya dapat mengatur ini di .vimrc? Saya tidak ingin mengatakannya setiap kali saya membuka file HTML yang merupakan file HTML. Terima kasih banyak untuk gg, =, G pintas. Sangat berguna.
zakishaheen
1
Perhatikan bahwa dalam vim 7.4default setting lekukan akan gagal untuk contoh ini, sebagai html, body, dan ptidak menjorok secara default. Lihat jawaban ini .
Cory Klein
2
smartindenttidak perlu. Juga disetel untuk C dan C ++, saya lebih suka menggunakan yang lebih umum autoindent.
Kos
Ini bekerja sangat baik dengan vim7.4. @tylerl apakah ada cara untuk membuat konfigurasi ini permanen untuk file html di 7.4?
xaph
62

Masalah utama menggunakan indentasi pintar adalah bahwa jika XML (atau HTML) berada pada satu baris karena mungkin akan kembali dari permintaan curl maka gg=Gtidak akan berhasil. Sebaliknya saya baru saja mengalami lekukan yang bagus menggunakan rapi langsung dipanggil dari VI:

:!tidy -mi -xml -wrap 0 %

Ini pada dasarnya memberitahu VI untuk memanggil rapi untuk membersihkan file XML tidak membungkus baris untuk membuatnya sesuai pada garis lebar 68 karakter default. Saya memproses file XML 29MB yang besar dan butuh 5 atau 6 detik. Saya kira untuk file HTML perintahnya seharusnya:

:!tidy -mi -html -wrap 0 %

Seperti disebutkan dalam komentar, tidyadalah alat dasar yang dapat Anda temukan di banyak sistem Linux / MacOS dasar. Ini adalah halaman projet jika Anda menginginkannya tetapi tidak: HTML Tidy .

oscaroscar
sumber
1
Saya tidak percaya html diperlukan, karena default ke html
lsiebert
4
Setuju dengan Anda @Isieber. Namun, saya kira itu membuatnya lebih mudah untuk memahami logika dan bahkan mungkin dianggap praktik yang baik oleh beberapa orang.
oscaroscar
2
FYI, rapi tersedak jika HTML menyertakan SVG (misalnya, bagan, dll.).
Alex Quinn
1
Ya, jika kode html berada pada satu baris, perintah indentasi vim tidak akan berfungsi!
wisbucky
Apa yang rapi selain kata dalam kamus? Ini bukan jawaban yang lengkap tanpa menghubungkan ke proyek.
Bruno Bronosky
49

Seperti yang dijelaskan tylerl di atas, tetapkan yang berikut ini:

:filetype indent on
:set filetype=html
:set smartindent

Namun, catatan bahwa dalam vim 7,4 tag HTML html, head, body, dan beberapa orang lain yang tidak menjorok secara default. Ini masuk akal, karena hampir semua konten dalam file HTML termasuk dalam tag tersebut. Jika Anda benar-benar menginginkannya, Anda bisa membuat tag itu di-indentasi seperti:

:let g:html_indent_inctags = "html,body,head,tbody"

Lihat " indentasi HTML tidak berfungsi di Vim 7.4 yang dikompilasi, ada ide? " Dan " skrip indentasi html alternatif " untuk informasi lebih lanjut.

Cory Klein
sumber
ini adalah pemenang dalam buku saya! Menggunakan Vim 7.4 di Windows dan ini bekerja dengan luar biasa! : D
Michael J
12

Ini adalah solusi saya yang berfungsi dengan baik untuk membuka HTML "jelek" dengan jarak yang baik:

vim fileIn.html -c "set sw=2 | %s/>/>\r/ | execute 'normal gg=G' | set nohlsearch | g/^\\s*\$/d"
  • The swperintah karena default saya adalah 4, yang terlalu tinggi untuk HTML.
  • Bagian selanjutnya menambahkan baris baru (Vim berpikir itu carriage return, desah) setelah setiap elemen ( >).
  • Kemudian indentasi ulang seluruh file dengan =.
  • Kemudian unhighlight >(karena saya miliki set hlsearchdi vimrc saya).
  • Kemudian hapus semua baris kosong / hanya spasi (lihat " Hapus baris kosong " untuk lebih banyak, juga ini dua kali diloloskan karena berada di shell).

Anda bahkan dapat menambahkan | wq! fileOut.htmlsampai akhir jika Anda tidak ingin memasukkan Vim sama sekali, tetapi cukup bersihkan file tersebut.

adam_0
sumber
Solusi rapi! Saya memodifikasinya :%s/>\s*/>\r/g(menambahkan gpengganti global, dan \s*menghapus spasi spasi tambahan). Saya juga menambahkan :%s/</\r</guntuk menambahkan baris baru sebelum braket terbuka. Kalau tidak, tag suka <td>foo</td>akan dipisah seperti <td>dan foo</td>.
wisbucky
Poin yang adil, saya telah mengganti global diaktifkan secara default yang mengapa tidak ada dalam solusi saya.
adam_0
7

Saya menggunakan skrip ini: https://github.com/maksimr/vim-jsbeautify

Di tautan di atas Anda memiliki semua info:

  1. Install
  2. Konfigurasikan (salin dari contoh pertama)
  3. Lari :call HtmlBeautify()

Melakukan pekerjaan dengan indah!

SimonW
sumber
3
haha, mengapa Anda ingin menggunakan node + js untuk membersihkan html di vim, yang telah memiliki kemampuan ini lebih lama dari node bahkan ada ... mengejutkan pikiran saya ..
mb21
4

Sudahkah Anda mencoba menggunakan skrip indentasi HTML di situs Vim?

JaredPar
sumber
+1, saya tidak melihat itu. Akan lebih baik jika saya tidak perlu menjalankan skrip tetapi sepertinya ini satu-satunya cara.
mmcdole
Skrip ini sudah tidak digunakan lagi sekarang, dan versi yang lebih baru hadir dengan vim (misalnya /usr/share/vim/vim74/indent/html.vim) "2014 Jul 04: Vim 7.4.356 atau yang lebih baru termasuk turunan dari skrip ini (skrip resmi sekarang dikelola oleh Bram dan termasuk perubahan besar-besaran)"
wisbucky
4

Berikut adalah solusi berat yang membuat Anda indentasi, ditambah semua pencetakan cantik HTML yang tidak perlu Anda pedulikan saat mengedit.

Pertama, unduh Tidy . Pastikan Anda menambahkan biner ke jalur Anda, sehingga Anda dapat memanggilnya dari lokasi mana pun.

Selanjutnya, buat file konfigurasi yang menjelaskan rasa HTML favorit Anda. Dokumentasi tidak bagus untuk Tidy, tapi di sini adalah ikhtisar , dan daftar semua opsi . Ini file konfigurasi saya:

bare: yes
break-before-br: no
clean: yes
drop-proprietary-attributes: yes
fix-uri: yes
indent-spaces: 4
indent: yes
logical-emphasis: yes
markup: yes
output-xhtml: yes
quiet: yes
quote-marks: yes
replace-color: yes
tab-size: 4
uppercase-tags: no
vertical-space: yes
word-2000: yes
wrap: 0

Simpan ini sebagai tidyrc_html.txtdi ftpluginfolder Anda (di bawah vimfiles).

Satu file lagi: tambahkan baris berikut ke (atau buat) html.vim, juga di ftplugin:

map <leader>tidy :%! tidy -config ~/vimfiles/ftplugin/tidyrc_html.txt <CR>

Untuk menggunakannya, cukup buka file HTML, dan ketik /tidy. (Itu /adalah <leader>kunci.)

Ini dia! Bukan solusi cepat, dengan cara apa pun, tetapi sekarang Anda sedikit lebih siap untuk mengedit file HTML yang besar dan kacau itu.

Kubung
sumber
2

Anda dapat mengintegrasikan tidy dan html-beautify secara otomatis dengan menginstal plugin vim-autoformat . Setelah itu, Anda dapat menjalankan formatter mana saja yang diinstal dengan satu keystroke.

Chiel ten Brinke
sumber
0

Saya mencoba perintah "gg = G" yang biasa, yang saya gunakan untuk memperbaiki indentasi file kode. Namun, sepertinya itu tidak berfungsi dengan baik pada file HTML. Itu hanya menghapus semua format.

Jika autoformat / indentasi vim gg=Gtampaknya "rusak" (seperti meninggalkan indentasi setiap baris), kemungkinan besar plugin indent tidak diaktifkan / dimuat. Seharusnya benar-benar memberikan pesan kesalahan daripada hanya melakukan indentasi buruk, jika tidak, pengguna hanya berpikir fitur autoformat / indentasi buruk, padahal sebenarnya cukup bagus.

Untuk memeriksa apakah plugin indent diaktifkan / dimuat, jalankan :scriptnames. Lihat apakah .../indent/html.vimada dalam daftar. Jika tidak, berarti plugin tidak dimuat. Dalam hal ini, tambahkan baris ini ke ~/.vimrc:

filetype plugin indent on

Sekarang jika Anda membuka file dan menjalankannya :scriptnames, Anda akan melihat .../indent/html.vim. Kemudian jalankan gg=G, yang seharusnya melakukan autoformat / indent yang benar sekarang. (Meskipun tidak akan menambah baris baru, jadi jika semua kode html berada pada satu baris, itu tidak akan diindentasi).

Catatan: jika Anda :filetype plugin indent onmenggunakan baris perintah vim alih-alih ~/.vimrc, Anda harus membuka kembali file tersebut :e.

Juga, Anda tidak perlu khawatir tentang autoindentdan smartindentpengaturan, mereka tidak relevan untuk ini.

wisbucky
sumber