12 Tips Produktiviti Teratas untuk WebStorm dan Sudut: Bahagian 1

WebStorm & Angular: Tips 5 Tips Produktiviti (Bahagian 1)

Siri dua bahagian ini, yang ditaja oleh JetBrains, meneroka peningkatan produktiviti untuk pembangunan sudut dalam Webstorm. Pakar pemaju Google Jurgen Van de Moere dan Todd Motto berkongsi pandangan mereka. Bahagian pertama ini, dari Jurgen, memberi tumpuan kepada lima ciri -ciri Webstorm utama:

Takeaways utama:

Leverage Webstorm's Integrated Sudut CLI untuk menyelaraskan penciptaan projek dan penambahan ciri, melangkaui baris arahan.
navigasi efisien master: Gunakan cmd-click/cmd b untuk lompatan definisi, dan beralih berganda untuk dialog "Carian Di Mana-mana".
memanfaatkan kuasa perkhidmatan bahasa sudut untuk penyelesaian kod unggul, pengesanan ralat, dan bantuan templat.
Automatikkan pemformatan kod untuk gaya yang konsisten menggunakan alat terbina dalam WebStorm, mematuhi tetapan projek.
Mengoptimumkan import dengan mudah untuk menghapuskan import yang tidak digunakan, menggabungkan import yang berkaitan, dan mengekalkan saiz bundle optimum.

1. Merangkul cli sudut bersepadu

CLI Angular, alat baris arahan yang kuat, disepadukan sepenuhnya ke dalam Webstorm. Buat projek baru melalui

fail & gt; Baru & gt; Projek & GT; Angular CLI , menyatakan lokasi projek. Menambah ciri (komponen, perkhidmatan, arahan) adalah sama mudah: klik kanan pada (atau modul yang berkaitan) dan pilih src/app baru & gt; Sudut cli . Webstorm secara bijak mengendalikan integrasi modul.

2. Navigasi pro-peringkat

Navigasi asas kod anda dengan cekap menggunakan klik CMD (atau CMD B) untuk melompat terus ke definisi. Ini berfungsi untuk komponen, arahan, gaya, templat, kelas, dan banyak lagi. Untuk fail tanpa rujukan langsung, Double-Shift mengaktifkan "Cari di mana-mana," membolehkan lokasi fail cepat dengan istilah carian separa. CMD E menyediakan akses cepat ke fail yang diedit baru -baru ini.

3. Buka kunci Perkhidmatan Bahasa Angular

Sokongan terbina dalam WebStorm untuk sudut adalah sangat baik, secara automatik mengimport modul JavaScript dan memberikan maklum balas jenis masa nyata. Tingkatkan lagi dengan memasang perkhidmatan bahasa sudut (npm install @angular/language-service --save-dev). Dayakannya dalam Keutamaan & gt; Bahasa & Rangka Kerja & GT; TypeScript & gt; Gunakan perkhidmatan TypeScript & gt; Konfigurasi ... & gt; Gunakan perkhidmatan sudut . Ini meningkatkan penyelesaian kod dalam templat dan menyediakan pelaporan ralat yang lebih tepat.

4. Pemformatan kod tanpa mudah

Mengekalkan gaya kod yang konsisten dengan pilihan CMD B (atau pintasan bersamaan). Webstorm secara automatik format kod di semua jenis fail (templat, skrip, stylesheets, JSON). Jika fail tslint.json ada, WebStorm akan menawarkan untuk menggunakan tetapan gayanya. Sesuaikan pilihan pemformatan dalam WebStorm & GT; Keutamaan & gt; Editor & gt; Gaya Kod .

5. Menyelaraskan import dengan pengoptimuman

Pastikan saiz bundle anda bersandar dengan mengoptimumkan import. Ctrl Alt O (atau CMD Shift A & Gt; "Mengoptimumkan Import") secara automatik menggabungkan import dari modul yang sama, menghilangkan import yang tidak digunakan, dan memformat semula penyata import.

Kesimpulan:

Menguasai ciri -ciri Webstorm ini dengan ketara meningkatkan produktiviti pembangunan sudut. Tinggal untuk Bahagian 2 dengan petua pakar Todd Motto! (Soalan Lazim di Webstorm dan Pembangunan Angular dimasukkan ke dalam artikel asal, tetapi ditinggalkan di sini untuk keringkasan).

Atas ialah kandungan terperinci 12 Tips Produktiviti Teratas untuk WebStorm dan Sudut: Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!