Bagaimana saya menggunakan kod vs dengan sudut?

Menggunakan kod VS untuk membangunkan projek sudut adalah cekap dan mudah, dan kunci adalah untuk mengkonfigurasi persekitaran dengan betul. Pertama, pasang Node.js dan NPM; Kedua, pasangkan CLI sudut secara global melalui NPM untuk membuat projek dan menghasilkan komponen; Kemudian pasang Perkhidmatan Bahasa Angular, Prettier, Eslint dan Debug plug-in dalam kod VS untuk meningkatkan pengalaman pembangunan; Kemudian gunakan perintah baru ng untuk membuat projek dan membukanya dalam kod vs; Gunakan Intellisense untuk mencapai penyelesaian kod automatik, dengan cepat menavigasi fail melalui Ctrl P, dan lompat definisi dengan F12; Jalankan NG berkhidmat untuk memulakan pelayan pembangunan dan membolehkan tambah nilai automatik; Selepas mengkonfigurasi fail launch.json, tekan F5 untuk debug aplikasi secara langsung dalam editor; Akhirnya, pastikan projek itu bersih dan teratur dengan menganjurkan struktur fail secara munasabah, menggunakan pelbagai ruang kerja, pintasan Emmet dan perintah CLI sudut tersuai untuk memastikan projek itu bersih dan teratur. Langkah -langkah di atas memastikan bahawa anda dengan cekap membangunkan aplikasi sudut dalam kod VS.

Menggunakan kod VS dengan sudut adalah mudah dan cekap sebaik sahaja anda mendapat persediaan yang betul. Gabungan Kod Visual Studio (VS Code) dan Angular memberi anda persekitaran pembangunan yang kuat dengan ciri -ciri seperti penyempurnaan kod, debugging, dan pratonton langsung.

Menyiapkan Persekitaran Anda

Sebelum menyelam ke dalam projek sudut, pastikan sistem anda mempunyai alat yang diperlukan:

• Node.js dan NPM : Angular memerlukan Node.js untuk dijalankan, dan NPM (Pengurus Pakej Node) datang dengannya. Anda boleh memuat turunnya dari nodejs.org .
• CLI Angular : Pasang secara global menggunakan npm install -g @angular/cli . Ini membolehkan anda membuat projek sudut baru, menjana komponen, perkhidmatan, dan banyak lagi.
• Sambungan Kod Vs : Beberapa sambungan berguna untuk sudut termasuk:
  • Perkhidmatan Bahasa Angular : Menambah Autocomplete, Pemeriksaan Ralat, dan Navigasi yang Lebih Baik dalam Templat Anda.
  • Prettier atau Eslint : Untuk pemformatan kod dan linting.
  • Debugger untuk Chrome/Firefox : Jika anda ingin debug aplikasi anda terus dari VS Code.

Sebaik sahaja segala-galanya disediakan, anda boleh mula membuat aplikasi sudut menggunakan ng new my-app dan buka folder projek dalam kod VS.

Menulis dan menavigasi kod sudut

VS Kod bersinar ketika bekerja dengan Angular terima kasih kepada integrasi pintar dan integrasi lancarnya.

• IntelliSense dan AutoComplete : Semasa anda menulis TypeScript atau HTML dalam fail komponen, kod vs akan mencadangkan sifat, kaedah, dan juga arahan sudut seperti *ngIf atau [(ngModel)] .
• Pergi ke definisi / mengintip : mengklik pada mana-mana arahan sudut atau komponen dan menekan F12 (atau klik kanan → pergi ke definisi) akan membawa anda terus ke sumbernya. Ini sangat berguna apabila meneroka bagaimana bahagian -bahagian kerja sudut secara dalaman.
• Navigasi Fail : Gunakan Ctrl P (CMD P pada Mac) untuk membuka fail dengan cepat dengan menaip nama mereka.

Satu tip yang kecil tetapi berguna: Jika anda berada di dalam fail template sudut (seperti .html ) dan mahu melompat ke komponen yang sepadan, hanya tekan Ctrl Click pada nama pemilih.

Menjalankan dan menyahpepijat aplikasi anda

Menjalankan aplikasi sudut melalui kod VS adalah mudah. Buka terminal di dalam kod vs ( Terminal > New Terminal ) dan jalankan:

 ng berkhidmat

Ini memulakan pelayan pembangunan tempatan dan jam tangan untuk perubahan. Bila -bila masa anda menyimpan fail, penyemak imbas akan dimuat semula secara automatik.

Untuk debug aplikasi anda:

• Tambah fail konfigurasi launch.json di bawah .vscode/launch.json .
• Tetapkan "type" kepada "PWA-Chrome" (atau krom biasa/Firefox), dan konfigurasikan "url" ke http://localhost:4200 .
• Tempatkan titik putus dalam fail TypeScript anda dan tekan F5 untuk melancarkan debugger.

Anda tidak perlu menggunakan pelayar luaran lagi - debugging terus dari editor berfungsi hebat.

Menjaga perkara yang dianjurkan

Apabila aplikasi sudut anda tumbuh, menjaga ruang kerja anda bersih menjadi penting. Berikut adalah beberapa petua:

• Gunakan folder dan fail berkaitan kumpulan bersama -sama. Sebagai contoh, modul ciri tempat dalam direktori mereka sendiri.
• Ambil kesempatan daripada ruang kerja berbilang akar Vs Code jika anda bekerja di pelbagai projek sekaligus.
• Gunakan pintasan Emmet dalam templat sudut untuk mempercepat penulisan HTML - seperti menaip div.container dan memukul tab untuk mengembangkannya.

Juga, pertimbangkan untuk menubuhkan pintasan papan kekunci untuk arahan CLI sudut yang sering digunakan. Sebagai contoh, Bind ng generate component my-component untuk pintasan supaya anda tidak perlu menaipnya setiap kali.

Pada dasarnya itu sahaja. Sebaik sahaja persekitaran anda disediakan dengan betul, bekerja dengan Angular dalam kod VS menjadi cepat dan intuitif.

Atas ialah kandungan terperinci Bagaimana saya menggunakan kod vs dengan sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!