Saya melihat sebuah artikel yang memperkenalkan WebStrom di internet dan merasa bahwa fungsinya sangat kuat. Saya juga tahu mengapa file yang dikirim ke GitHub di front-end Alibaba memiliki file .idea. (Dikatakan bahwa Taobao merekomendasikan untuk menulis JS untuk menggunakan WebStrom di dalamnya)
Kami dapat memahami bahwa IDE mengintegrasikan banyak fitur yang Anda inginkan, atau fitur yang tidak Anda inginkan. Dengan kata lain, editor dengan banyak plug-in diinstal, jadi sejauh ini, saya masih merasa tidak perlu menginstal plug-in untuk itu.
Lalu mari kita mulai memperkenalkan fitur khusus WebStrom :
Webstorm adalah alat pengembangan javascript komersial yang diluncurkan oleh JetBrains
Setiap editor perlu disimpan (CTRL + S), yang merupakan fitur dari pengeditan perangkat lunak pada semua platform Win, tetapi sudut kanan atas file pengeditan badai web tidak memiliki*yang akrab*.
Manfaat: Setelah menghilangkan Ctrl + S, Anda dapat melihat halaman hasil tanpa menggerakkan mouse.
Kerugian: Tanpa logo * sebelumnya, akan segera disimpan jika keyboard dioperasikan secara tidak benar.
Selama file ditutup, tidak akan ada sejarah untuk editor mana pun, tetapi Webstorm memilikinya. VCS-> Sejarah Lokal -> Tampilkan Sejarah (Kunci Pintasan: Alt+~ -> 7)
Keuntungan: Selama Webstorm tidak ditutup, file Anda dapat dikembalikan ke operasi sebelumnya kapan saja (inilah mengapa Ctrl+y adalah alasan mengapa di Webstorm, itu karena menghapus garis).
Kerugian: Catatan historis ini hilang setelah Webstorm ditutup dan dimulai kembali; Kerugian lain adalah bahwa konsumsi memori yang disebabkan oleh ini pasti akan relatif besar.
Editor mana pun tidak memiliki versi lokal kecuali server SVN, tetapi WebStorm menyediakan riwayat modifikasi file lokal (tombol pintas: Alt+Shift+C). Anda juga dapat Ctrl + E untuk memunculkan file yang baru dibuka.
Manfaat: Setara dengan SVN lokal.
Kerugian: Konsumsi memori harus relatif besar.
Mengintegrasikan Zencoding, HTML5, FTP, Editing Instan (Chrome), Penyelesaian Otomatis, JavaScript Debugger yang berbasis di Mozilla, JSLINT, lebih sedikit dukungan, dukungan kopi, Node.js, pengujian unit, kontrol versi Git dan SVN yang terintegrasi dan fitur lainnya.
Saat menulis CSS, Anda secara cerdas akan meminta berbagai file dan gambar, sehingga Anda tidak perlu lagi mengonfirmasi apakah file ini ada.
Fitur lain diperkenalkan. Jika Anda ingin tahu lebih banyak, Anda dapat pergi ke situs web resmi WebStrom untuk terus mencari. Setelah membaca pengantar ini dan begitu banyak fitur yang kuat, apakah Anda didesak untuk mencoba artefak front-end legendaris ini segera? Um.
Pertama, setelah mengunduh WebStrom di halaman unduhan resmi, klik Install, lalu lanjutkan ke langkah berikutnya. Akhirnya, antarmuka kode pendaftaran akan muncul, karena WebStrom adalah IDE komersial, dan tentu saja ujung depan sutra Tianchao tidak memiliki uang untuk membeli artefak yang mahal. Jangan khawatir, kami dapat menggunakan kunci badai web untuk belajar menggunakan artefak front-end ini. Hehe ~~~~
Setelah instalasi berhasil, saya pasti akan merasa sedikit tidak nyaman, sama seperti saya pikir skema warna ini benar -benar terlalu masuk akal. Ada beberapa pengaturan yang tidak saya inginkan. Kemudian di bawah ini saya akan mencantumkan pengaturan yang biasa saya lakukan.
Beberapa Tip Pengaturan Setelah Instalasi Webstorm :
Cara mengubah tema (font & skema warna):
File -> Pengaturan -> Editor -> Warna & Font -> Nama Skema. Alamat unduhan tema
Cara mencegah Webstorm membuka file proyek saat memulai:
File -> Pengaturan-> Umum Hapus kembali proyek terakhir saat startup.
Cara menampilkan bahasa Cina dengan sempurna:
Periksa font default override oleh (tidak disarankan) di file -> pengaturan-> penampilan, setel nama: nsimsun, ukuran: 12
Cara menampilkan nomor baris:
File -> Pengaturan-> Editor, "Tampilkan Nomor Baris" Periksa dan nomor baris akan ditampilkan.
Cara membungkus kode secara otomatis:
File -> Pengaturan -> Editor "Gunakan Soft Wraps in Editor" terhubung dan kode akan secara otomatis membungkus saluran
Cara mengklik kursor, itu akan ditampilkan di akhir baris ini:
File -> Pengaturan-> Editor "Izinkan penempatan Caret setelah akhir baris" cukup lepaskan kait.
Cara memodifikasi tombol cepat:
File-> Pengaturan-> keymap, lalu klik dua kali fungsi yang ingin Anda ubah dengan cepat. Akan ada kotak yang cepat. Ikuti petunjuknya.
Ubah ke tombol cepat yang Anda kenal dengan editor:
File -> Pengaturan-> KeyMap mendukung IDE utama seperti Visual Studio, Eclipse, dan NetBeans.
Perpustakaan Kelas JavaScript meminta.
File -> Pengaturan -> JavaScript -> Perpustakaan -> Kemudian pilih Perpustakaan Kelas JavaScript yang sering Anda gunakan dalam daftar, dan akhirnya unduh dan instal akan baik -baik saja.
Saat mengembangkan JS, ditemukan bahwa pengembalian Ctrl + diperlukan untuk memilih kandidat:
File -> Pengaturan -> Editor -> Penyelesaian Kode -> Memilih Saran Pertama: "Smart" untuk "Selalu"
JS Prompt lambat
File -> Penyelesaian Kode -> Autopopup dalam 1000 hingga 0
Konfigurasi git:
File -> Pengaturan -> Editor -> GitHub, masuk dan ubah akun GitHub, jika tidak ada git, Anda tidak membutuhkannya.
Instalasi Plugin:
File -> plugin, lalu pilih plugin yang kuat dan instal. (Plugin "CSS-X-FIRE" digunakan untuk memodifikasi atribut CSS menggunakan Firebug, kode CSS di editor juga akan berubah.)
Perbarui nanti
Pengalaman penggunaan Webstorm
Fungsi favorit:
Ketika direktori proyek sangat besar, beberapa subdirektori sangat sering terbuka, tetapi levelnya sangat dalam. Saat ini, Anda dapat menambahkan direktori ke favorit Anda. Setelah penambahan yang berhasil, ada menu "favorit" di sebelah kiri.
Navigasi Breadcrumb:
Selain halaman proyek di sebelah kiri, Anda dapat memilih direktori, di bawah menu atas, direktori yang mirip dengan navigasi breadcrumb situs web juga dapat mencapai fungsi yang sama. Mengklik pada setiap direktori akan memiliki menu tarik-turun untuk menampilkan subdirektori di bawahnya, yang sangat praktis.
Antarmuka Konstruktor:
Jika komentar sejalan dengan format, itu akan muncul. Jika itu adalah file JS, itu adalah fungsi dan objek dari kelas JS; Jika itu adalah file CSS, itu adalah ringkasan file CSS; Jika itu adalah file HTML, itu adalah diagram struktur simpul. Ngomong -ngomong, ini untuk kenyamanan melihat struktur kode.
Antarmuka Todo:
Antarmuka ini akan muncul jika Anda menambahkan komentar TODO ke kode
Antarmuka Kode Kolom Ganda:
Klik kanan file pada tab kode, dan klik kanan-> tumpah secara vertikal (dua layar di sebelah kiri dan kanan) atau tumpah secara horizontal (dua layar di atas dan bawah)
Fitur Sejarah Lokal:
Cara yang baik untuk mengambil kode
Gunakan git
Webstorm hanya mengintegrasikan operasi umum GIT dan tidak dapat sepenuhnya menggantikan alat baris perintah. Di sudut kanan bawah antarmuka, Anda dapat memeriksa cabang git mana Anda berada. Anda juga dapat mengklik untuk beralih atau membuat cabang baru di atas.
Periksa perbedaan antara kode saat ini dan kode repositori:
Klik kanan area antarmuka kode apa pun, pilih Git -> Bandingkan dengan dan pilih Pustaka Versi yang ingin Anda bandingkan.
Webstorm Shortcut Key Deskripsi:
Mengedit Mengedit Kunci Pintasan Terkait
Ctrl + Space:
Penyelesaian Kode Dasar (nama kelas, metode atau variabel apa pun) Penyelesaian Kode Dasar (kelas apa pun, fungsi atau nama variabel), diubah menjadi Alt+S
Ctrl + Shift + Enter:
Pernyataan Lengkap Lengkapi Pernyataan Saat Ini
Ctrl + P:
Info Parameter (dalam Metode Argumen Panggilan) Informasi Parameter Termasuk Metode Parameter Panggilan
Ctrl + mouse di atas kode
Info singkat informasi sederhana
Ctrl + F1
Tampilkan deskripsi kesalahan atau peringatan di kesalahan tampilan perawatan atau peringatan di perawatan
Alt + insert
Hasilkan kode ... (getters, setter, konstruktor) Buat file baru atau hasilkan kode, ... konstruktor, Anda dapat membuat metode getter dan setter untuk bidang apa pun di kelas
Ctrl + o
Mengganti metode kelebihan metode
Ctrl + i
Metode Implement Metode Implementasi
Ctrl + alt + t
Kelilingi dengan ... (jika, selain itu, coba, tangkap, untuk, dll) menggunakan * untuk mengelilingi baris kode yang dipilih, ( * termasuk jika, sementara, coba tangkap, dll.)
Ctrl + /
Komentar/Ketidaksentuan dengan Komentar Komentar Line Commentary/Uncomment
Ctrl + Shift + /
Komentar/Ketidaksentuan dengan Komentar Blok Blokir Komentar/Keterkaitan
Ctrl + w
Pilih Blok Kode yang berhasil meningkatkan blok kode pilih, umumnya pemilihan tambahan
Ctrl + shift + w
Kurangi seleksi saat ini ke status sebelumnya, fallback dari kunci pintasan sebelumnya, kode pemilihan penurunan
Alt + q
Informasi Konteks Konteks Informasi Konteks
Alt + enter
Tunjukkan tindakan niat dan perbaikan cepat
Ctrl + alt + l
Kode Format Kode Pemujauan Menurut Format Template
Tab/ shift + tab
Indentasi/lini inden yang dipilih tanpa indentasi indentasi/lekukan yang tidak diindenkan/lekukan indentasi yang tidak sopan
Ctrl + x atau shift + hapus
Potong baris saat ini atau blok yang dipilih ke clipboard
Ctrl + C atau Ctrl + Insert
Salin baris saat ini atau blok yang dipilih ke chipboard salin baris saat ini atau blok kode yang dipilih ke clipboard
Ctrl + v atau shift + masukkan
Tempel dari clipboard
Ctrl + Shift + V
Tempel dari buffer baru -baru ini tempel konten terbaru di buffer
Ctrl + d
Duplikat baris arus atau blok yang dipilih Salin baris saat ini atau blok kode yang dipilih
Ctrl + y
Hapus garis di jalur hapus perawatan di kursor
Ctrl + Shift + J
Smart line gabungan (html dan javascript saja)
Ctrl + Enter
Smart Line Split (HTML dan JavaScript saja)
SHIFT + ENTER
Mulai baris baru
Ctrl + Shift + U
Toggle case for word at care atau konversi kasus blok terpilih
Ctrl + shift +]/[
Pilih hingga Kode Blok Akhir/Mulai Pilih sampai akhir/mulai dari blok kode
Ctrl + hapus
Hapus ke ujung hapus akhir teks
Ctrl + Backspace
Hapus ke kata mulai hapus teks mulai
Ctrl + numpad +/-
Blok Expand/Collapse Code Expand/Collapse Code Block
Ctrl + Shift + Numpad +
Memperluas semua
Ctrl + shift + numpad-
Runtuh semua
Ctrl + F4
Tutup Tab Editor Aktif Tutup Tag Pengeditan Aktif
Cari/Ganti Cari/Ganti Kunci Pintasan Terkait
Ctrl + f
Temukan kode pencarian cepat di file saat ini
Ctrl + shift + f
Temukan di jalur Tentukan jalur yang akan ditemukan di file
F3
Temukan selanjutnya
Shift + F3
Temukan sebelumnya
Ctrl + r
Ganti penggantian kode di file saat ini
Ctrl + Shift + R
Ganti di jalur Tentukan substitusi batch kode dalam file
Penggunaan Pencarian Pencarian Kunci Pintasan Terkait
Alt + f7/ctrl + f7
Temukan Penggunaan/Temukan Penggunaan dalam File Temukan Penggunaan/Temukan Penggunaan
Ctrl + Shift + F7
Sorot penggunaan dalam file
CTRL + ALT + F7
Tampilkan penggunaan
Berlari
Alt + shift + f10
Pilih Konfigurasi dan Jalankan
Alt + shift + f9
Pilih Konfigurasi dan Debug Pilih arsitektur untuk memperbaiki kerentanan
Shift + F10
Berlari
Shift + F9
Kerentanan Debug Patch
Ctrl + Shift + F10
Jalankan konfigurasi konteks dari editor menjalankan arsitektur konten dari editor
Ctrl + Shift + X
Jalankan baris perintah
Debugging debugging kunci pintasan terkait
F8
Step Over tidak memasuki fungsi
F7
Langkah ke langkah demi langkah
Shift + F7
Langkah pintar ke langkah pintar ke
Shift + F8
Keluar
ALT + F9
Jalankan ke kursor lari ke kursor
ALT+ F8
Mengevaluasi ekspresi
F9
Lanjutkan program memulai kembali program
Ctrl + F8
Sakelar breakpoint sakelar breakpoint
Ctrl + Shift + F8
Lihat breakpoint
Posisi Navigasi Kunci Pintasan Terkait
Ctrl + n
Pergi ke kelas lompat ke kelas yang ditentukan
Ctrl + Shift + N
Pergi ke file dengan cepat temukan file dalam proyek melalui nama file
Ctrl + alt + shift + n
Pergi ke simbol menemukan posisi fungsi dengan satu karakter
Alt + kanan/ kiri
Pergi ke Tab Editor Berikutnya/ Sebelumnya Pergi ke Opsi Editor Berikutnya/ Sebelumnya
F12
Kembali ke jendela alat sebelumnya
Esc
Pergi ke Editor (dari jendela alat) Masukkan editor dari jendela alat
Shift + ESC
Sembunyikan Jendela Aktif Aktif atau Terakhir
Ctrl + Shift + F4
Tutup Active Run/Message/Find/... Tab Tutup Aktivitas….
Ctrl + g
Pergi ke jalur lompat ke garis
Ctrl + e
File popup popup terbaru file yang baru dibuka
CTRL + ALT + Kiri/Kanan
Navigasi Kembali/Maju Navigasi Maju/Kembali
Ctrl + Shift + Backspace
Arahkan ke lokasi edit terakhir navigasikan ke lokasi edit terakhir
Alt + f1
Pilih file atau simbol saat ini di tampilan apa pun Temukan lokasi kode atau file yang saat ini dipilih dalam modul antarmuka lainnya
Ctrl + B atau Ctrl + klik
Pergi ke Deklarasi Lompat ke Definisi
Ctrl + alt + b
Pergi ke Lokasi Implementasi Metode Lompat
Ctrl + shift + b
Pergi ke Type Declaration Jump Metode Definisi
Ctrl + Shift + I
Buka Definisi Cepat Pencarian Buka Definisi Pencarian Cepat
Ctrl + u
Pergi ke metode lompatan/kelas super-metoden/super-kelas
Alt + naik/turun
Pergi ke metode sebelumnya/berikutnya dengan cepat memindahkan posisi antar metode
Ctrl +]/[
Pindah ke Kode Blok Akhir/Mulai Jump Ke Akhir/Mulai dari Blok Pengkodean
Ctrl + F12
Struktur File Popup Popup Struktur File
Ctrl + H.
Jenis hierarki hierarki hierarki
Ctrl + alt + h
Hubungi hierarki hirarki hirarki
F2/ shift + f2
Lompatan kesalahan yang disorot berikutnya/sebelumnya ke kesalahan berikutnya/sebelumnya, sorot kesalahan atau peringatan untuk dengan cepat menemukan, gunakan kunci pintasan ini untuk dengan cepat melompat di antara pernyataan yang salah.
F4/Ctrl + Enter
Edit Sumber/Lihat Sumber Sumber/Sumber Tampilan
Alt + home
Tampilkan bilah navigasi
F11
Toggle Bookmark Toggle Marker
Ctrl + F11
Toggle bookmark dengan mnemonic
Ctrl + #[0-9]
Pergi ke nomor bookmark bernomor ke tanda bernomor
Shift + F11
Tampilkan Bookmark
Refactoring refactoring kunci pintasan terkait
F5
Menyalin
F6
Bergerak
Alt + hapus
Hapus aman hapus
Shift + F6
Ganti nama ganti nama
Ctrl + alt + n
Variabel embed variabel inline
Ctrl + alt + m
Fungsi Ekstrak Metode Ekstrak (JavaScript)
CTRL + ALT + V
Variabel Pendahuluan
Ctrl + alt + f
Bidang Pendahuluan
Ctrl + alt + c
PENDAHULUAN KONSTAN
VCS/Sistem Kontrol Versi Lokal Sistem Kontrol/Sejarah Lokal Terkait Kunci Pintasan
Alt + backquote ()
'VCS'Quick Popup VCS dengan cepat
Ctrl + k
Komit proyek untuk VCS mengirimkan proyek ke VCS
Ctrl + t
Perbarui Proyek dari Proyek Pembaruan VCS dari VCS
Alt + shift + c
Lihat Perubahan Terbaru Lihat Perubahan Terbaru
Kunci pintas terkait yang umum digunakan untuk umum
Ctrl + Shift + A
Temukan tindakan fungsi menemukan dan memanggil editor
Alt + #[0-9]
Buka jendela alat yang sesuai dengan cepat beralih untuk membuka modul antarmuka
Ctrl + Alt + F11
Toggle Mode Layar Lengkap Makhiri Mode Layar Lengkap
Ctrl + Shift + F12
Toggle memaksimalkan editor
Alt + shift + f
Tambahkan ke Favorit Tambahkan file saat ini ke favorit Anda
Alt + shift + i
Periksa file saat ini dengan profil saat ini Periksa file saat ini dengan profil saat ini
Ctrl + backquote ()
Skema arus sakelar cepat Skema arus sakelar cepat
Ctrl + alt + s
Buka Pengaturan Dialog Buka Kotak Dialog Pengaturan
Tab Ctrl +
Beralih di antara tab dan konversi jendela alat (konflik dengan tombol pintasan windows)
Apakah Anda sudah mengetahui alat pengembangan JavaScript ini WebStrom? Saya tidak sabar untuk mencobanya, dan saya jamin Anda akan menyukainya setelah menggunakannya.