PyCharm memberikan dukungan yang kuat untuk HTML yang mencakup penyorotan sintaks dan kesalahan, pemformatan sesuai dengan gaya kode, validasi struktur, penyelesaian kode, pratinjau langsung selama sesi debugging (Live Edit) atau di editor kode, dan banyak lagi
Aktifkan plugin Alat HTML
Fungsionalitas ini bergantung pada plugin Alat HTML, yang dibundel dan diaktifkan di PyCharm secara default. Jika fitur yang relevan tidak tersedia, pastikan Anda tidak menonaktifkan plugin
Plugin Alat HTML hanya tersedia di PyCharm Professional
Tekan Ctrl+Alt+S untuk membuka pengaturan IDE dan pilih Plugins .
Buka tab Terpasang , cari Alat HTML .
Spesifikasi HTML dapat dikonfigurasi dengan preferensi tingkat bahasa HTML Default pada Bahasa & Kerangka Kerja. Skema dan DTD halaman setelan IDE Ctrl+Alt+S. Secara default, spesifikasi HTML 5. 0 dari W3C diasumsikan.
Buat file HTML
Dari menu utama, pilih File. Baru , lalu pilih File HTML dari daftar. PyCharm membuat file rintisan berdasarkan template file HTML dan membukanya di editor.
Buat referensi dalam file HTML
Di dalam tag <script>, <link>, atau <img>, PyCharm menyarankan penyelesaian untuk jalur ke file yang Anda rujuk
Atau, di jendela alat Proyek , pilih file JavaScript, CSS, atau gambar yang ingin Anda rujuk dan seret ke dalam HTML . PyCharm menghasilkan tag <script>, <link>, atau <img> di dalam <head>. Untuk tag <img>_, PyCharm juga menghasilkan atribut width dan height.
Bungkus fragmen kode dalam tag
Pilih fragmen kode yang akan dibungkus dan tekan Ctrl+Alt+T atau pilih Kode. Surround With dari menu utama.
Dari daftar, pilih Bungkus dengan Tag . PyCharm menyertakan pilihan dalam sepasang tanda kurung (<link>0 dan <link>1).
Ketik tag di dalam tanda kurung buka <link>0. PyCharm secara otomatis mengisi tag di tanda kurung tutup <link>1
Pelajari lebih lanjut dari Membuat kode
Pencarian dokumentasi
Untuk sebagian besar tag dan atribut HTML, PyCharm dapat menampilkan ringkasan dari artikel MDN terkait. Rangkuman ini ditampilkan dalam popup Dokumentasi yang juga menunjukkan status penghentian tag atau atribut dan informasi tentang kompatibilitasnya dengan berbagai browser.
Jika tag atau atribut tersedia di semua versi browser, PyCharm tidak menampilkan informasi apa pun tentang kompatibilitasnya
Jika tidak, munculan Dokumentasi juga mencantumkan browser dan versinya yang mendukung tag atau atribut.
Kompatibilitas diperiksa hanya untuk Chrome, Chrome Android, Safari, Safari iOS, Firefox, Internet Explorer, dan Edge
Jika tag atau atribut tidak digunakan lagi, munculan juga memberi tahu Anda tentang status ini
Lihat dokumentasi untuk tag atau atribut
Posisikan tanda sisipan pada tag atau atribut dan tekan Ctrl+Q atau pilih Lihat. Pencarian Dokumentasi Cepat dari menu utama.
Saat Anda mengarahkan penunjuk tetikus ke atas tag atau atribut, PyCharm segera menampilkan referensi untuk itu di popup Dokumentasi .
Anda dapat mematikan perilaku ini atau mengonfigurasi sembulan agar muncul lebih cepat atau lebih lambat, lihat di bawah
Konfigurasikan perilaku popup Dokumentasi
Untuk mematikan menampilkan dokumentasi secara otomatis saat Anda mengarahkan mouse ke simbol kode, Klik di munculan dan nonaktifkan Show on Mouse Move< . option.
Agar munculan Dokumentasi ditampilkan lebih cepat atau lebih lambat, buka Pengaturan dialog (Ctrl+Alt+S), go to Editor | General | Code Completion , lalu pilih kotak centang Tampilkan popup dokumentasi dan tentukan waktu tunda.
Buka dokumentasi MDN untuk tag dan atribut di browser
Dalam Dokumentasi munculan Ctrl+Q, klik tautan di bagian bawah.
Tekan Shift+F1 atau pilih Tampilan. Dokumentasi Eksternal dari menu utama.
Pratinjau keluaran file HTML
Anda dapat membuka keluaran kode HTML Anda di pratinjau bawaan PyCharm atau secara eksternal, di browser pilihan Anda
Fungsi pratinjau bergantung pada server web bawaan PyCharm. Server ini selalu berjalan dan tidak memerlukan konfigurasi manual apa pun. Semua file proyek disajikan di server bawaan dengan URL root http. // localhost. , sehubungan dengan struktur proyek.
Secara default port server bawaan diatur ke port default PyCharm 63342 melalui mana PyCharm menerima koneksi dari layanan. Untuk mengubah nilai default ini, buka dialog Settings (Ctrl+Alt+S), buka Build, Execution . Debugger , dan di Built-in Server tentukan nilai lain mulai dari 1024.
Secara default, setelah Anda membuka file HTML di browser atau di pratinjau bawaan, PyCharm secara otomatis memuat ulang halaman setiap kali file HTML ini (atau file JavaScript atau Style Sheet yang ditautkan) disimpan secara manual atau otomatis, lihat Menyimpan dan mengembalikan
Anda dapat mengubah perilaku default untuk memuat ulang halaman saat Anda mengetik sehingga perubahan pada HTML atau file terkait segera muncul di browser atau di pratinjau bawaan. Lihat di bawah
Pratinjau bawaan PyCharm
Pratinjau bawaan PyCharm membuat pekerjaan Anda lebih cepat karena Anda tidak perlu lagi beralih ke browser dan menyegarkan halaman. Pratinjau dibuka di tab editor terpisah dan dimuat ulang secara otomatis saat Anda mengetik atau saat Anda menyimpan perubahan, tergantung pada
Buka pratinjau bawaan PyCharm
Dari menu utama, pilih Tampilan. Buka di Browser , lalu pilih Pratinjau Bawaan dari daftar.
Atau, arahkan kursor ke atas kode untuk menampilkan popup ikon browser, dan klik .
Pratinjau file HTML di browser
Untuk memastikan kode HTML Anda ditampilkan dengan benar di lingkungan produksi, pratinjau file HTML di browser tertentu
Jika Anda menggunakan server web PyCharm bawaan, halaman dimuat ulang secara otomatis saat Anda menyimpan perubahan atau saat Anda mengetik, tergantung pada
Muat ulang otomatis tidak berfungsi saat halaman diunggah ke server web default yang dikonfigurasi secara manual, lihat Mengonfigurasi sinkronisasi dengan server web dan .
Dari menu utama, pilih Tampilan. Buka di Browser , lalu pilih browser yang diinginkan dari daftar.
Untuk membuka , pilih Default .
Alternatifnya, arahkan penunjuk mouse Anda ke atas kode untuk menampilkan popup ikon browser, dan klik ikon yang menunjukkan browser yang diinginkan.
Jika Anda hanya memiliki satu browser yang dikonfigurasi, cukup tekan Alt+F2
Konfigurasikan ikon browser di popup
Buka dialog Pengaturan (Ctrl+Alt+S) dan buka Alat. Peramban Web dan Pratinjau .
Untuk menyembunyikan beberapa ikon, kosongkan kotak centang Aktif untuk browser yang tidak diperlukan.
Untuk menyembunyikan seluruh munculan, kosongkan kotak centang Untuk file HTML .
Konfigurasi ulang otomatis
Secara default, setelah Anda membuka file HTML di browser atau di pratinjau bawaan, PyCharm secara otomatis memuat ulang halaman setiap kali file HTML ini (atau file JavaScript atau Style Sheet yang ditautkan) disimpan secara manual atau otomatis, lihat Menyimpan dan mengembalikan
Saat Anda menyimpan file yang memicu pemuatan ulang halaman, PyCharm menampilkan tooltip Mengerti .
Anda dapat mengubah perilaku default untuk memuat ulang halaman saat Anda mengetik sehingga perubahan pada HTML atau file terkait segera muncul di browser atau di pratinjau bawaan
Buka Alat. Peramban Web dan Pratinjau laman setelan IDE Ctrl+Alt+S. Atau, klik Konfigurasikan di tooltip Mengerti .
Di area Reload behavior , dari Reload halaman di browser and Reload page in built-in preview lists, select the actions that will trigger automatic reload of pages in web browsers and in the built-in preview. By default, Di Simpan dipilih.
Pilih On Change untuk memuat ulang halaman saat Anda memperbarui file HTML yang sesuai atau file tertaut.
Pilih Nonaktif untuk menghentikan unggahan otomatis.
Perubahan pada perilaku muat ulang hanya berlaku setelah Anda menutup pratinjau bawaan atau browser yang saat ini dibuka
Lihat kode sumber HTML halaman web di editor
Tekan Ctrl+Shift+A dan pilih Buka Kode Sumber dari URL. dari daftar.
Dalam dialog Buka URL yang terbuka, ketik alamat URL halaman web atau pilih URL yang dibuka sebelumnya dari daftar.
Lihat gambar tersemat
PyCharm menawarkan beberapa cara untuk melihat gambar yang disematkan dalam file HTML. Anda dapat menggunakan , , atau
Lihat gambar di PyCharm
Pilih file gambar di jendela alat Project dan tekan F4.
Cara lainnya, posisikan tanda sisipan pada referensi gambar di editor dan tekan Ctrl+B
Untuk mempratinjau gambar dalam sembulan alih-alih di tab terpisah, pilih referensi untuk itu dan tekan Ctrl+Shift+I
Lihat gambar di editor eksternal
Pilih file gambar di jendela alat Project , dan pilih Lompat ke editor eksternal or press Ctrl+Alt+F4.
PyCharm membuka gambar di editor yang digunakan di OS Anda secara default. Anda dapat di mana IDE akan membuka file
Ubah editor eksternal default
Klik kanan gambar di editor dan pilih Edit Path to External Editor dari menu konteks.
Anda juga dapat menekan Ctrl+Shift+A dan mengetik <link>4
Dalam dialog Path to External Editor , tentukan jalur ke aplikasi tempat Anda ingin membuka gambar dan klik Save.
Ekstrak termasuk file
Anda dapat mengekstrak fragmen kode HTML ke dalam file penyertaan terpisah. Seluruh blok kode JavaScript di dalam tag <script> dapat diekstrak juga. PyCharm juga menyarankan untuk menambahkan referensi alih-alih duplikat dari fragmen yang dipilih
Di editor, pilih blok kode yang akan diekstraksi dan pilih Refactor. Ekstrak. Ekstrak Sertakan File dari menu utama atau dari menu konteks pilihan.
Dalam dialog Ekstrak File Sertakan yang terbuka, tentukan nama file sertakan tanpa ekstensi dan direktori untuk menyimpannya. Anda dapat menerima direktori yang telah ditentukan sebelumnya atau memilih yang lain.
Klik OK , jika sudah siap. PyCharm mengekstrak kode sumber yang dipilih ke dalam file yang ditentukan di direktori target dan menghasilkan referensi yang sesuai di file sumber.
Konfigurasikan penyorotan sintaks
Anda dapat mengonfigurasi penyorotan sintaks sadar HTML sesuai dengan preferensi dan kebiasaan Anda
Dalam dialog Pengaturan (Ctrl+Alt+S), buka Editor. Skema warna. HTML .
Pilih skema warna, terima pengaturan penyorotan yang diwarisi dari default atau sesuaikan seperti yang dijelaskan dalam Warna dan font
Konfigurasikan tag HTML khusus
PyCharm mengetahui semua tag HTML standar, dan melaporkan semua tag yang tidak dikenal di markup Anda. Jika Anda menggunakan kerangka kerja yang bergantung pada tag HTML khusus, tag tersebut juga akan dilaporkan sebagai tidak diketahui, yang akan menjadi false positive dalam kasus tersebut