Konfigurasi yang disyorkan untuk pembangunan bahagian hadapan menggunakan Kod Visual Studio pada Linux

Konfigurasi yang disyorkan untuk menggunakan Kod Visual Studio untuk pembangunan bahagian hadapan pada Linux

Pengenalan:
Dengan perkembangan pesat pembangunan bahagian hadapan, semakin ramai pembangun memilih Kod Visual Studio (pendek kata Kod VS) sebagai editor kod utama. Kod VS ialah editor ringan sumber terbuka dan percuma yang menyokong set pemalam sambungan yang kaya dan boleh memenuhi pelbagai keperluan pembangunan bahagian hadapan.
Artikel ini akan memberikan konfigurasi yang disyorkan untuk menggunakan Kod VS untuk pembangunan bahagian hadapan pada Linux, termasuk langkah pemasangan dan konfigurasi, serta melampirkan beberapa contoh kod.

1. Pasang Kod VS
Pasang Kod VS pada Linux melalui langkah berikut:

1. Buka terminal dan masukkan laman web rasmi Kod VS: https://code.visualstudio.com/.
2. Klik butang "Muat Turun untuk Linux" untuk memuat turun pakej Debian untuk Kod VS.

3. Masukkan arahan berikut di terminal untuk memasang Kod VS:

   sudo dpkg -i <vscode-package>.deb
   sudo apt-get install -f

   Selepas pemasangan selesai, masukkan arahan "kod" untuk memulakan Kod VS.

2. Pasang pemalam sambungan yang biasa digunakan
Pemalam sambungan Kod VS sangat meningkatkan fungsinya Berikut adalah beberapa pemalam sambungan yang biasa digunakan:

1. ESLint: pemalam untuk semakan spesifikasi kod.
   Kaedah pemasangan: Cari "ESLint" dalam Kod VS dan klik untuk memasang.
2. Lebih cantik: Pemalam untuk pemformatan kod, menyokong berbilang bahasa.
   Kaedah pemasangan: Cari "Prettier - Pemformat kod" dalam Kod VS dan klik untuk memasang.
3. Pelayan Langsung: Menyediakan pelayan pembangunan setempat untuk membuat perubahan pada fail HTML, CSS dan JavaScript dalam masa nyata.
   Kaedah pemasangan: Cari "Pelayan Langsung" dalam Kod VS dan klik untuk memasang.

Melalui pemasangan pemalam di atas, proses pembangunan kami telah dipermudahkan dan kecekapan pengekodan telah dipertingkatkan.

3 Konfigurasikan ESLint
Untuk pembangunan bahagian hadapan, menulis kod piawai dan bersih adalah penting. ESLint ialah alat semakan spesifikasi kod yang sangat baik yang boleh membantu kami mengekalkan ketekalan kod.
Berikut ialah langkah-langkah untuk mengkonfigurasi ESLint:

1. Pasang ESLint dalam direktori akar projek:

   npm install eslint --save-dev

2. Jalankan arahan berikut dalam terminal untuk menjana fail konfigurasi ESLint:

   npx eslint --init

   the promptsFollow peraturan untuk fail konfigurasi, anda boleh menggunakan Terdapat peraturan pratetap untuk Airbnb, Google, dsb., atau anda boleh menentukannya sendiri.

3. Tambah konfigurasi berikut dalam tetapan Kod VS:

   "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
   }

   Dengan cara ini, setiap kali anda menyimpan fail, Kod VS secara automatik akan memanggil ESLint untuk menyemak spesifikasi kod dan cuba membetulkan ralat.

4. Configure Prettier

Prettier ialah alat pemformatan kod yang boleh memformat kod secara automatik untuk mengekalkan gaya yang konsisten.
Berikut ialah langkah-langkah untuk mengkonfigurasi Prettier:

1. Pasang Prettier dalam direktori akar projek:

   npm install prettier --save-dev

2. Tambah konfigurasi berikut dalam tetapan Kod VS:

   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[javascript]": {
    "editor.formatOnSave": true
   }

   Dengan cara ini, setiap kali anda menyimpan fail JavaScript dengan cara ini , Kod VS akan memanggil Prettier secara automatik untuk pemformatan kod.

5. Gunakan Pelayan Langsung

Pelayan Langsung ialah pemalam sambungan yang sangat berguna yang menyediakan pelayan pembangunan setempat dan membuat pengubahsuaian kepada fail HTML, CSS dan JavaScript dalam masa nyata. Berikut ialah langkah untuk menggunakan Pelayan Langsung:

Klik kanan folder projek dalam Kod VS dan pilih "Buka dengan Pelayan Langsung" untuk memulakan pelayan pembangunan setempat Port lalai ialah 5500. Contoh Kod Perubahan Pelayan Langsung.
1. Kesimpulan:

Dengan konfigurasi dan langkah di atas, kami boleh menggunakan Kod Visual Studio pada Linux untuk pembangunan bahagian hadapan yang cekap. Memasang pemalam sambungan yang biasa digunakan, mengkonfigurasi alat semakan spesifikasi kod dan pemformatan kod, dan menggabungkannya dengan pelayan pembangunan tempatan yang disediakan oleh Pelayan Langsung meningkatkan kecekapan pembangunan dan kualiti kod. Kami berharap pembaca dapat mengembangkan dan mengkonfigurasinya lagi mengikut keperluan dan ciri projek mereka sendiri, membawa lebih banyak kemudahan dan keseronokan kepada pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Konfigurasi yang disyorkan untuk pembangunan bahagian hadapan menggunakan Kod Visual Studio pada Linux. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!