Cara Menyiapkan Vs Kod untuk Pembangunan React

Vs Panduan Konfigurasi Kod untuk Pembangunan Reaksi Cekap: Meningkatkan Kecekapan Pengekodan Anda

React pemaju memerlukan editor kod yang dapat menulis kod React dengan cekap. Terdapat beribu -ribu sambungan percuma di pasaran untuk kod VS yang dapat membantu anda meningkatkan aliran kerja pembangunan anda. Artikel ini akan memberi tumpuan kepada beberapa sambungan dan tetapan yang akan membawa kecekapan pengekodan reaksi anda ke tahap profesional.

Beberapa pelanjutan yang disenaraikan dalam artikel itu tidak bertindak balas, tetapi mereka masih dapat meningkatkan kecekapan dan kelajuan pengekodan anda. Malah, hanya terdapat beberapa sambungan yang benar -benar berguna dalam pengekodan harian anda.

Alat dan teknologi yang disenaraikan dalam artikel ini boleh menjimatkan jam kerja pembangunan anda -masa ini akan dibazirkan untuk menyelesaikan banyak masalah kecil tetapi penting. Mereka juga boleh membantu anda mengurangkan kesilapan pengekodan. Kunci untuk meningkatkan produktiviti adalah untuk mengautomasikan sebanyak mungkin tugas. Sambungan dan tetapan berikut akan membantu anda mencapai matlamat ini.

mata utama

Memasang sambungan bahasa JavaScript dalam kod VS: Meningkatkan kecekapan pembangunan React dengan menyediakan fungsi seperti Intellisense, coretan kod dan import automatik.
Gunakan TypeScript untuk projek besar: Menyediakan keselamatan jenis dan mengurangkan kesilapan, yang penting untuk aplikasi reaksi kompleks. Ingat, kod vs tidak termasuk pengkompil TypeScript;
Konfigurasi Emmet untuk JSX: Pastikan kod vs mengiktiraf fail .js sebagai fail reaksi, atau menamakannya ke .jsx untuk sokongan emmet yang lebih baik, dengan itu meningkatkan kecekapan kod HTML.
Pemformatan yang konsisten dengan Prettier dan EditorConfig: Automatikkan pemformatan kod untuk memastikan asas kod React konsisten, yang penting untuk projek kolaboratif.
CODE COUCAL CHECK WITH ESLINT: Mengintegrasikan dengan kod VS untuk menyerlahkan dan menetapkan kesilapan pengekodan dalam masa nyata, mempromosikan amalan terbaik dan asas kod bersih.
Gunakan sambungan spesifik React: sambungan seperti ES7 React/Redux/GraphQL/React-Native Coretan meningkatkan kelajuan pengekodan dengan menyediakan coretan kod segera.

Sokongan Bahasa

Apabila anda mula-mula memasang kod VS, ia akan memberikan anda banyak ciri-ciri luar-kotak-seperti sintaks JavaScript yang menonjolkan dan sokongan untuk kod TypeScript dan JSX.

Berikut adalah gambaran tab Selamat Datang. Anda sentiasa dapat menemuinya di bawah menu Bantuan.

Anda perlu melakukan persediaan awal di sini. Oleh kerana tumpuan kami bertindak balas, kami akan bermula dengan menubuhkan sambungan bahasa JavaScript, yang akan memberikan kami ciri -ciri tambahan yang penting untuk aliran kerja kecekapan pengekodan kami.

sambungan bahasa JavaScript

Dalam bahagian "Alat dan Bahasa" tab Selamat Datang, klik pautan JavaScript untuk memasangnya. Prompt tambah nilai akan muncul, dan anda harus mengklik padanya untuk membuat ciri baru berkuatkuasa.

JavaScript Language Extension menyediakan pelbagai ciri, termasuk:

• IntelliSense
• coretan kod
• Sokongan JSDOC
• Maklumat Hoom
• Import Automatik

Senarai lengkap dan dokumentasi ciri -ciri ini boleh didapati dalam dokumentasi kod VS. Saya sangat mengesyorkan anda membaca setiap ciri untuk memahami cara menggunakannya dalam aliran kerja pembangunan anda.

Angka berikut adalah contoh operasi sebenar intellisense dan automatik.

Apabila kekunci TAB ditekan, komponen pengepala akan diimport ke bahagian atas. Simbol akhir mesti dimasukkan, dan kod itu akan diselesaikan secara automatik sebagai:.

Selepas memasang ciri bahasa JavaScript, kod vs boleh meminta anda untuk menyediakan fail jsconfig.json dalam direktori root projek. Ini tidak diperlukan, tetapi menetapkan fail ini akan membantu Intellisense memberikan petua yang lebih tepat. Berikut adalah konfigurasi sampel:

Konfigurasi di atas memberitahu pelayan bahasa JavaScript yang fail milik kod sumber anda dan fail mana yang tidak tergolong. Ini memastikan bahawa perkhidmatan bahasa hanya menganalisis kod sumber anda, jadi prestasi pantas. Konfigurasi penuh didokumenkan di sini, menjelaskan semua nilai yang mungkin digunakan dalam jsconfig.js.

<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

Sokongan TypeScript

Jika anda merancang untuk membina projek reaksi yang besar dan kompleks, sangat disyorkan untuk menggunakan TypeScript. Ini kerana TypeScript menyediakan keselamatan jenis, mengurangkan kemungkinan menyampaikan kod ralat dalam aplikasi front-end. VS Code menyediakan sokongan bahasa typescript dari kotak dengan menyediakan banyak ciri (mis.: :::

sintaks dan penonjolan semantik

IntelliSense
coretan kod
JS Doc Support
Maklumat Hoom dan Bantuan Tandatangan
Format
jsx dan tag tertutup auto
• Senarai penuh didokumenkan di sini. Apabila menggunakan TypeScript, kod JSX ditulis dengan sambungan fail .tsx. Selepas penyusunan, output akan menghasilkan fail dengan lanjutan .jsx.

Sila ambil perhatian bahawa kod vs tidak menyediakan pengkompil typescript. Anda mesti memasang satu dalam persekitaran Global Node.js seperti berikut:

Sebagai alternatif, anda boleh memasang Compile Hero Pro Extension, yang menyediakan penyusun untuk TypeScript dan banyak bahasa lain, termasuk:

<code>npm install -g typescript</code>

kurang

sass, scss
stylus
Jade
PUG
• Pelanjutan menyediakan lebih banyak pilihan yang boleh dikonfigurasikan dari segi masa dan bagaimana menyusun kod jenis dan gaya. Jika anda ingin mengetahui lebih lanjut mengenai menubuhkan React dan TypeScript, saya cadangkan anda menyemak artikel kami yang lain, "React with Typescript: Amalan Terbaik" untuk penjelasan yang lebih terperinci.

aliran

aliran adalah alternatif Facebook untuk TypeScript. Ia menawarkan fungsi yang sama, tetapi hanya berfungsi pada projek React dan tidak begitu popular. VS Kod tidak menyokongnya secara asli, tetapi anda boleh memasang lanjutan Sokongan Bahasa Aliran, yang menyediakan bilangan ciri yang terhad seperti Intellisense dan Renoming.

(Bahagian berikut adalah serupa dengan teks asal, tetapi struktur kata-kata dan kalimat telah diselaraskan untuk mencapai tujuan pseudo-asal.)

Tetapan pemetaan utama

Jika anda berhijrah dari editor kod lain ke kod vs, anda akan gembira mengetahui bahawa anda boleh terus menggunakan pintasan papan kekunci yang sama yang sudah biasa. Jika anda tidak biasa dengan editor kod, sila langkau bahagian ini. Walau bagaimanapun, jika anda telah menggunakan editor kod sebelum ini, anda mungkin tahu bahawa memori otot latihan semula tidak cekap dan mengambil masa untuk menyesuaikan diri.

Dalam bahagian "Tetapan dan Kunci Mengikat" tab Selamat Datang, anda akan melihat pautan untuk memasang VIM, Sublime, Atom dan pintasan papan kekunci lain. Jika anda mengklik pada pautan "Lain", anda akan mendapat senarai lengkap keymaps yang boleh dipasang.

Saya pernah menjadi pengguna atom sebelum beralih ke kod VS. Menyediakan pemetaan utama Atom dalam kod VS semudah mengklik pada pautan atom. Ini akan memasang pelanjutan Atom KeyMap untuk saya. Konfigurasi berikut diperlukan dalam Tetapan.json untuk membuat kod vs lebih seperti "atom":

<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

Sila baca arahan yang disediakan oleh lanjutan pintasan papan kekunci anda untuk mengetahui cara menetapkan kekunci pintasan anda. Dokumen boleh didapati dengan hanya mengklik pada lanjutan KeyMap dalam bar pengembangan.

EMMET JSX SOKONGAN Emmet adalah toolkit pembangunan web yang membolehkan anda menulis kod HTML dengan lebih cekap. Jika anda tidak biasa dengan Emmet, lihat demo untuk melihat bagaimana ia berfungsi.

VS kod telah terbina dalam emmet dan sudah menyokong sintaks JSX. Malangnya, kebanyakan projek starter React menggunakan lanjutan .js. Masalahnya ialah kod VS tidak mengiktiraf fail tersebut sebagai kod React, jadi ciri JSX tidak diaktifkan. Terdapat dua penyelesaian:

Namakan semula semua fail yang mengandungi kod jsx ke lanjutan .jsx (disyorkan)

1. Konfigurasi vs kod untuk mengenali semua fail .js sebagai fail React. Kemas kini tetapan.json anda seperti berikut:

Untuk mengakses Settings.json, hanya pergi ke tab Menu Atas dan klik "Lihat" Panel Perintah ". Masukkan "Tetapan" dan pilih pilihan "Keutamaan: Buka Tetapan (JSON)". Sebagai alternatif, anda boleh tekan

<code>npm install -g typescript</code>

ctrl

p dan masukkan "Settings.json" untuk membuka fail dengan cepat. Anda juga boleh menggunakan kekunci pintasan ctrl , untuk membuka versi set UI dalam tab baru. Apabila anda mengklik butang ikon di sudut kanan atas pertama, ia akan membuka Tetapan.json. pilihan kedua nampaknya merupakan cara paling mudah. Malangnya, ini menyebabkan masalah dengan alat pembangunan JavaScript lain seperti , yang mempunyai peraturan yang ditetapkan yang memaksa penggunaan sambungan fail .jsx untuk kod reaksi. Melumpuhkan peraturan ini kemudian boleh menyebabkan masalah lain.

Pasukan React Official mengesyorkan menggunakan lanjutan .js untuk kod React. Dalam pengalaman peribadi saya, lebih baik untuk menamakan semula semua fail yang mengandungi kod React ke .jsx dan gunakan sambungan .js untuk fail yang mengandungi kod JavaScript tulen. Dengan cara ini, anda boleh menggunakan semua alat pembangunan dengan lebih mudah.

Format

Menulis kod berkualiti tinggi memerlukan anda menulis kod konsisten . Sebagai pemaju, kita adalah manusia dan mudah melupakan piawaian yang kita tetapkan untuk diri kita sendiri. Dalam bahagian ini, kami akan mempelajari beberapa alat penting yang akan membantu kami menulis kod konsisten secara automatik.

EditorConfig

EditorConfig adalah fail konfigurasi mudah yang mengandungi hanya peraturan pemformatan. Anda perlu memasang pelanjutan untuk mempunyai vs kod membaca peraturan ini dan menimpa peraturan mereka sendiri. Cukup ikuti langkah -langkah di bawah untuk menetapkannya:

1. Pasang sambungan EditorConfig untuk kod VS. Perhatikan bahawa ini akan mengatasi tetapan pengguna/ruang kerja menggunakan tetapan yang terdapat dalam fail .editorconfig.
2. Buat fail .DitorConfig dalam direktori akar projek dan salin konfigurasi sampel ini:

<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

Kod VS kini akan mengikuti peraturan ini untuk memformat kod anda. Mari kita bincangkan dengan cepat. Windows menggunakan CRLF untuk menunjukkan penamatan baris, manakala sistem berasaskan UNIX menggunakan LF. Sekiranya anda menggunakan fail dengan rehat garis campuran, anda akan mempunyai banyak masalah apabila menyerahkan fail. Anda boleh mengkonfigurasi bagaimana Git mengendalikan garis baru.

Kaedah pilihan saya adalah untuk memaksa semua fail projek untuk menggunakan LF Newlines pada mana -mana platform. Ambil perhatian bahawa EditorConfig tidak menukar rehat garis ke fail sedia ada. Ia hanya akan menetapkan LF untuk fail baru. Untuk menukar semua fail yang ada, anda mempunyai dua pilihan:

• Lakukan secara manual (klik CRLF teks pada bar status untuk menukar)
• Format semua fail dengan cantik

Seterusnya, mari kita lihat lebih cantik.

Prettier

Prettier adalah formatter kod yang paling mudah untuk disediakan untuk kod JavaScript. Ia menyokong JavaScript, TypeScript, JSX, CSS, SCSS, kurang dan GraphQL. Untuk menetapkannya, ikuti langkah -langkah ini:

1. Pasang pelanjutan formatizer kod yang lebih cantik.
2. Pastikan kod vs menggunakan lebih cantik sebagai formatter lalainya. Kemas kini tetapan.json seperti berikut:

<code>npm install -g typescript</code>

3. Pasang lebih cantik sebagai kebergantungan pembangunan dalam projek anda: NPM Install - -Save -Dev Prettier atau Benang Tambah -D Prettier.
4. create .prettierrc dan salin peraturan contoh berikut:

<code>// 控制提示是否显示
"atomKeymap.promptV3Features": true,

// 更改多光标鼠标绑定
"editor.multiCursorModifier": "ctrlCmd",

// 在新窗口中打开文件夹（项目），而不会替换当前窗口
"window.openFoldersInNewWindow": "on",</code>

5. kemas kini pakej.json dengan menambahkan arahan ini ke bahagian skrip anda:

<code>    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    }</code>

Untuk langkah 3-5, anda mesti melakukan ini untuk setiap projek yang anda mahu lebih cantik untuk menyokong. Anda kini boleh mengklik pada arahan format di bawah panel skrip NPM pada kod VS, seperti yang ditunjukkan dalam tangkapan skrin di bawah.

Sebagai alternatif, anda boleh menjalankan format NPM Run Command untuk menjalankan lebih cantik.

Ini akan menyebabkan semua fail menjadi diformat semula dengan betul dan secara konsisten mengikut peraturan lalai Prettier dan peraturan yang anda timpa fail .prettierrc dan .editorconfig. Break Line juga akan tetap konsisten.

anda mungkin menyedari bahawa pemformatan kod kini berada di tiga lokasi yang berbeza. Anda mungkin tertanya -tanya apa yang akan berlaku jika kami mempunyai peraturan yang bercanggah. Selepas pengaktifan lebih cantik, ia akan mengendalikan peraturan ini mengikut keutamaan berikut:

1. Fail konfigurasi cantik
2. .editorconfig
3. vs tetapan kod (diabaikan jika ada konfigurasi lain)

Sekiranya berlaku konflik, konfigurasi yang lebih cantik akan disukai.

html ke jsx

Mana -mana pemaju sebenar tahu bahawa ia adalah perkara biasa untuk menyalin kod HTML dari suatu tempat di internet dan tampalnya ke dalam kod React anda. Ini biasanya memerlukan anda untuk menukar atribut HTML kepada sintaks JSX yang sah. Mujurlah, terdapat lanjutan yang dipanggil HTML ke JSX yang melakukan penukaran untuk anda. Selepas pemasangan, ia boleh dengan mudah:

• Tukar kod HTML sedia ada ke JSX
• Tukar kod HTML ke sintaks JSX yang sah ketika menampal

Ini bermakna sifat -sifat seperti kelas akan ditukar kepada nama kelas. Ini adalah kaedah penjimatan masa yang sangat baik.

(Selebihnya kandungan adalah serupa dengan teks asal, tetapi struktur kata-kata dan kalimat diselaraskan untuk mencapai tujuan pseudo-asal. Pastikan format imej tidak berubah.)

Atas ialah kandungan terperinci Cara Menyiapkan Vs Kod untuk Pembangunan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!