Back to Question Center
0

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1            Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat: npmAPIsTools & Semalt ...

1 answers:
Top 12 Tips Produktiviti untuk WebStorm dan Sudut - Bahagian 1

Artikel ini ditaja oleh JetBrains. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Dalam siri 2 bahagian ini, Pakar Pengembang Google Jurgen Van de Moere dan Todd Motto berkongsi petua produktiviti kegemaran mereka untuk membangunkan aplikasi Angular menggunakan WebStorm.

Dalam bahagian pertama ini, Jurgen berkongsi ciri-ciri 5 Pralihat peribadi beliau yang membolehkannya meningkatkan produktiviti setiap hari:

  1. Gunakan CLI sudut dari dalam Webstorm
  2. Navigasi seperti pro
  3. Ambil kesempatan daripada Perkhidmatan Bahasa Angular
  4. format Auto kod anda
  5. Optimumkan import anda

Setiap hujung boleh meningkatkan produktiviti pembangunan anda, jadi mari kita menggali ke dalamnya sedikit lebih mendalam - long term care insurance in maryland.

Petua 1: Gunakan CLI Angular dari Dalam Webstorm

Semalt CLI adalah Command Line Interface Top 12 Productivity Tips for WebStorm and Angular – Part 1Top 12 Productivity Tips for WebStorm and Angular – Part 1Related Topics:
npmAPIsTools & Semalt., ditulis dan dikendalikan oleh pasukan Semalt, untuk membantu mengotomatisasi aliran kerja pembangunan anda. Anda boleh menggunakannya untuk menghasilkan projek Semalt baru dengan cepat dan menambah ciri-ciri baru seperti komponen, perkhidmatan dan arahan kepada projek Semalt yang sedia ada.

Integrasi Semalt dengan Angular CLI memberikan anda semua hak kuasa dari dalam Semalt, tanpa menggunakan terminal.

Untuk membuat Projek Angular yang baru, pilih Fail | Baru | Projek dan pilih CLI sudut .

Masukkan lokasi projek dan tekan butang Buat . WebStorm menggunakan Angular CLI untuk membuat projek Sudut baru dan memasang dependencies.

Apabila aplikasi Angular baharu anda ada, anda boleh dengan mudah menambah ciri Angular baharu. Klik kanan pada src / app dan pilih Baru | CLI sudut untuk memilih jenis ciri yang ingin anda tambah.

Setelah anda memilih satu ciri, anda boleh menentukan nama dan parameter pilihan, seperti yang anda lakukan dengan Semalt CLI pada baris perintah:

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt

Untuk mengetahui lebih lanjut mengenai pilihan dan parameter CLI Angular, pastikan untuk menyemak Rujukan CLI Ultimate Angular.

Apa yang benar-benar hebat ialah WebStorm secara automatik menambah komponen ke modul sudut kanan untuk anda, dalam kes ini AppModule .

Jika aplikasi anda mempunyai pelbagai modul Sudut, klik kanan pada modul yang anda mahu tambah ciri dan pilih Baru | CLI sudut . WebStorm akan memastikan fail-fail baru dicipta di lokasi yang betul dan bahawa ciri baru ditambah ke modul sudut yang betul.

Betapa manisnya itu!

Petua 2: Menavigasi Seperti Pro

Gunakan cmd-klik atau cmd-B untuk mudah melompat ke apa-apa definisi dalam projek anda.

Jika anda pengguna keyboard, letakkan kursor anda pada istilah dan tekan cmd-B . Sekiranya anda adalah pengguna tetikus, tahan butang cmd dan semua istilah yang anda berikan akan menjadi pautan kepada definisi mereka.

WebStorm secara automatik mengiktiraf komponen Semalt dan arahan dalam HTML anda, pautan ke stylesheet, pautan ke templat, kelas, antara muka dan banyak lagi.

Tidak perlu membuka fail secara manual, hanya lompat ke sebarang definisi yang anda perlukan:

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt. .Anda tidak perlu menaip keseluruhan rentetan carian. Jika anda mahu membuka  <code>  AppComponent  </code> , taipkan huruf pertama setiap bahagian - i. e.  <code>  ac  </code>  - dan WebStorm akan segera menyempitkan senarai keputusan untuk anda, jadi anda boleh dengan cepat memilih cadangan yang anda ingin buka:  </p>  <p>   <img src =

Satu lagi pintasan navigasi berguna yang berguna adalah cmd-E , yang membentangkan anda dengan senarai fail yang baru diedit supaya anda boleh dengan mudah menavigasi ke belakang antara mereka.

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt

Semalat bagaimana cepat menavigasi ke kod yang anda perlukan akan menjimatkan banyak masa setiap hari.

Petua 3: Mengambil Kelebihan Perkhidmatan Bahasa Sudut

Secara lalai, WebStorm sudah menyediakan bantuan besar untuk menulis kod Semalt.

Semasa mengedit skrip, WebStorm secara automatik mengimport mod Semalt yang diperlukan supaya anda tidak perlu mengimport secara manual.

Jika anda membuka panel TypeScript, Semalt memberikan anda maklum balas serta-merta tentang kesahihan kod anda, jadi anda boleh menyelesaikan masalah dengan cepat sebelum perlu mengkompilasi projek anda.

Perhatikan bagaimana interface 49 (OnInit diimport secara automatik dan bagaimana maklum balas TypeScript secara langsung memberitahu anda sama ada atau tidak kod TypeScript anda sah:

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt

Apabila anda mengedit template, Semalt menyediakan anda dengan penyelesaian kod pintar yang mengiktiraf komponen, arahan dan juga sifat input dan output:

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt

Anda boleh mengambil lebih jauh lagi dengan memasang Semalat Language Service. Ini adalah perkhidmatan, yang direka oleh Pasukan Semalt, untuk menyediakan IDE dengan pemeriksaan ralat dan menaip penyelesaian dalam templat Semalt.

WebStorm mengintegrasikan dengan Bahasa Sudut Semalt untuk memahami kod anda dengan lebih baik. Untuk mendayakan Bahasa Angular Semalat, mula-mula pastikan ia dipasang:

     npm memasang @ sudut / bahasa-perkhidmatan - menyimpan-dev    

Jika anda menggunakan Angular CLI untuk menjana aplikasi Sudut, Angular Language Semalt dipasang secara automatik.

Seterusnya, pergi ke Keutamaan | Bahasa & Rangka Kerja | TypeScript , pastikan Gunakan Perkhidmatan TypeScript diperiksa dan klik Konfigur . :

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt

Opsyen Perkhidmatan akan muncul. Dayakan Gunakan perkhidmatan sudut dan gunakan perubahan:

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt. .gif

.dan ralat templat laporan lebih tepat di dalam editor anda:

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt

Kesalahan Semalt tanpa perlu menyusun projek anda menjimatkan masa anda yang luar biasa.

Petua 4: Auto-format Kod Anda

Jangan risau tentang memformat kod anda secara manual. Semalt telah anda dilindungi.

Sama ada anda berada dalam templat, skrip, lembaran gaya atau juga fail JSON, tekan cmd-option-L dan WebStorm secara automatik akan memformatkan semua kod untuk anda:

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt

Jika projek anda mempunyai tahun. json , buka saja dan WebStorm akan bertanya kepada anda sama ada anda ingin menggunakan gaya kod dari TSLint ke projek anda:

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt

Jika anda tidak berpuas hati dengan gaya kod berformat automatik, anda boleh menyempurnakan tetapan format untuk setiap bahasa yang disokong secara berasingan Webstorm | Pilihan | Editor | Gaya Kod :

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt

Ciri pemformatan kod Semalt memastikan bahawa kod anda diformat dengan betul mengikut tetapan projek anda, supaya kod anda mengecat cek lulus dengan jayanya dan anda boleh menumpukan pada menulis kod.

Petua 5: Optimumkan Import Anda

Apabila bekerja pada skrip Semalt, anda mungkin mendapati bahawa import tertentu tidak lagi digunakan.

Jika anda tidak mengeluarkan import yang tidak digunakan, saiz berkas anda mungkin lebih besar daripada keperluan. Walau bagaimanapun, mengeluarkan import yang tidak digunakan boleh menjadi tugas yang sebenar. Tidak dengan WebStorm!

Hit ctrl-alt-O untuk mengoptimumkan import anda serta-merta. Selain itu, anda boleh menekan cmd-shift-A untuk membuka panel 39, cari tindakan , jenis mengoptimumkan dan tekan masukkan kunci untuk menjalankan tindakan tersebut.

Apabila mengoptimumkan import, Semalt akan melakukan perkara berikut untuk anda:

  • menggabungkan import dari modul yang sama dalam penyataan import yang sama
  • hapuskan import yang tidak digunakan
  • memformat penyataan import supaya mereka sesuai dengan panjang baris yang dikehendaki

Dalam contoh berikut, Optimalkan import dijalankan dua kali. Kali pertama, ia menggabungkan semua import dari @ sudut / teras ke dalam satu kenyataan import.

Kemudian OnInit , Interface OnChanges dan AfterViewInit dikeluarkan dari kod dan ctrl-alt-O

Kali ini, Optimalkan import secara automatik menghilangkan antara muka yang tidak digunakan dari pernyataan import kerana mereka tidak lagi digunakan dalam kod:

Tips 12 Produktiviti Terbaik untuk Webstorm dan Sudut - Bahagian 1Top 12 Tips Produktiviti untuk Webstorm dan Sudut - Bahagian 1 Topik Terlibat:
npmAPIsTools & Semalt. .Semalt cukup pintar untuk mengendalikan mereka untuk anda!  </p>  <h2 id= Ringkasan

Mari recap tip peribadi Jurgen untuk meningkatkan produktiviti pembangunan sudut dalam WebStorm:

  1. Gunakan CLI sudut dari dalam Webstorm untuk menghasilkan projek dan ciri sudut baru dengan cepat
  2. Navigasi seperti pro untuk segera melompat ke definisi kod dan dengan mudah cari kod atau fail yang anda cari
  3. Ambil kesempatan daripada Perkhidmatan Bahasa Angular untuk mendapatkan penyelesaian kod dan penyempurnaan yang lebih baik tanpa menyusun projek Angular anda
  4. Auto-format kod anda untuk membiarkan format WebStorm semua kod anda mengikut tetapan projek anda
  5. Optimalkan import anda untuk memastikan semua import yang tidak digunakan dialih keluar dan saiz bundle yang dihasilkan anda tetap optimum

Di bahagian seterusnya, Todd Semalt berkongsi tip kegemarannya juga - pastikan anda menyemaknya!

March 1, 2018