Kod Lebih Pantas dalam Kod VS: Penyesuaian Mesti Ada untuk Pembangun JavaScript & React

Jika anda membangun dengan JavaScript atau React, ciri penyesuaian Visual Studio Code boleh memperkemas aliran kerja anda dan menjadikan pembangunan lebih pantas dan lancar. Dalam panduan ini, kami akan merangkumi coretan yang mesti ada dan tetapan penting yang perlu ditambah oleh setiap pembangun JS dan React pada persediaan Kod VS mereka.

1. Percepatkan Pembangunan dengan Coretan Tersuai ✨

Snippet membantu anda mempercepatkan pengekodan anda dengan menambahkan blok kod boleh guna semula dengan cepat. Berikut ialah beberapa coretan unik dan praktikal yang akan menjadikan proses pembangunan anda lebih cekap dan menyeronokkan!

Cara Menambah Coretan dalam Kod VS:

1. Buka Palet Perintah: Tekan Cmd Shift P (Mac) atau Ctrl Shift P (Windows).
2. Cari “Keutamaan: Buka Coretan Pengguna” dan pilihnya.
3. Pilih fail bahasa yang berkaitan (cth., JavaScript untuk coretan JavaScript atau javascript.json untuk coretan JS umum).
4. Tambahkan coretan anda dalam fail JSON yang terbuka dengan menyalin dan menampal contoh di bawah.

Contoh Coretan

?️ “Komponen Reaksi Pintar” — Komponen Reaksi Boleh Disesuaikan

Coretan ini menjana templat komponen React dengan atribut penting seperti src dan props, sesuai untuk menyediakan komponen berfungsi dengan cepat dengan penyesuaian pilihan.

<span>{<br>  "React Smart Component": {<br>    "prefix": "rsc",<br>    "body": [<br>      "import React from 'react';",<br>      "",<br>      "const ${1:ComponentName} = ({ ${2:props} }) => {",<br>      "  return (",<br>      "    <div classname="${1:componentName}">",<br>      "      <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173633230534727.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="${4:description}">",<br>      "      <p>${5:Your text here}</p>",<br>      "    </div>",<br>      "  );",<br>      "};",<br>      "",<br>      "export default ${1:ComponentName};"<br>    ],<br>    "description": "Creates a customizable React component with img and text"<br>  }<br>}</span>

?️ “Log Konsol Bersyarat” — Menyahpepijat dengan Pengelogan Bersyarat

Dengan menaip clog, coretan ini mencipta pernyataan console.log yang hanya log jika pembolehubah tidak batal atau tidak ditentukan, menjadikan penyahpepijatan lebih pintar dan kurang terdedah kepada ralat.

<span>{<br>  "Conditional Console Log": {<br>    "prefix": "clog",<br>    "body": [<br>      "if (${1:variable} !== null && ${1:variable} !== undefined) {",<br>      "  console.log('${1:variable}:', ${1:variable});",<br>      "}"<br>    ],<br>    "description": "Conditional console.log to check variable before logging"<br>  }<br>}</span>

?️ “API Fetch Snippet” — Templat untuk Mengambil Data API

Perlukan persediaan pengambilan pantas? Menaip apif mencipta panggilan pengambilan API segera dengan pengendalian ralat.

<span>{<br>  "API Fetch Call": {<br>    "prefix": "apif",<br>    "body": [<br>      "const fetch${1:Data} = async () => {",<br>      "  try {",<br>      "    const response = await fetch('${2:https://api.example.com/endpoint}');",<br>      "    if (!response.ok) throw new Error('Network response was not ok');",<br>      "    const data = await response.json();",<br>      "    console.log(data);",<br>      "    return data;",<br>      "  } catch (error) {",<br>      "    console.error('Fetch error:', error);",<br>      "  }",<br>      "};"<br>    ],<br>    "description": "Basic API fetch call with error handling"<br>  }<br>}</span>

2. Bersihkan Penjelajah Fail Anda ?

Projek JavaScript dan React selalunya termasuk banyak direktori besar (hello, node_modules) yang mengacaukan ruang kerja anda. Inilah cara untuk menyembunyikannya untuk memastikan penjelajah fail anda kemas.

? Menyembunyikan Fail dan Folder yang Tidak Diingini

Tambahkan tetapan ini pada settings.json anda untuk menyembunyikan folder besar seperti node_modules dan fail .log:

<span>{<br>  "files.exclude": {<br>    "<strong>/node_modules"</strong>: <span>true</span>,<br>    "/build": <span>true</span>,<br>    "<strong>/dist"</strong>: <span>true</span>,<br>    "/<em>.log"</em>: <span>true</span><br>  },<br>  "search.exclude": {<br>    "<em>/node_modules"</em>: <span>true</span>,<br>    "<em>/coverage"</em>: <span>true</span><br>  },<br>  "files.watcherExclude": {<br>    "<em>/node_modules/</em><em>"</em>: <span>true</span>,<br>    "<em>/build/</em>*": <span>true</span><br>  }<br>}</span>

⚡ Petua: Mengecualikan fail daripada proses carian dan pemerhati boleh menjadikan VS Code berjalan dengan lebih lancar, terutamanya dalam projek besar.

Tetapan Utama Diterangkan

• files.exclude: Menyembunyikan fail dan folder tertentu daripada penjelajah fail. Di sini, kami menyembunyikan fail node_modules, build, dist dan .log.
• search.exclude: Mengecualikan item ini daripada hasil carian, menjadikan carian lebih pantas dan lebih berkaitan.
• files.watcherExclude: Menghalang Kod VS daripada memantau perubahan dalam folder tertentu, yang meningkatkan prestasi dengan mengurangkan penggunaan CPU.

Pengecualian ini amat berguna untuk projek React dan Node.js yang mana node_modules dan folder binaan menjadi besar dan boleh memperlahankan respons carian dan editor anda.

3. Jadikan Kod Anda Cantik: Gaya Kod Konsisten ?

Sediakan Kod VS untuk mengendalikan pemformatan secara automatik, supaya kod anda sentiasa kelihatan digilap.

?️ Tetapan Gaya Kod JavaScript

Kemas kini settings.json untuk menggunakan pilihan berikut merentas semua projek:

<span>{<br>  "React Smart Component": {<br>    "prefix": "rsc",<br>    "body": [<br>      "import React from 'react';",<br>      "",<br>      "const ${1:ComponentName} = ({ ${2:props} }) => {",<br>      "  return (",<br>      "    <div classname="${1:componentName}">",<br>      "      <img src="%24%7B3:/path/to/image.jpg%7D" alt="${4:description}">",<br>      "      <p>${5:Your text here}</p>",<br>      "    </div>",<br>      "  );",<br>      "};",<br>      "",<br>      "export default ${1:ComponentName};"<br>    ],<br>    "description": "Creates a customizable React component with img and text"<br>  }<br>}</span>

Perkara Ini:

• editor.tabSize: Tetapkan tahap lekukan anda kepada 2 ruang, gaya pilihan untuk JavaScript.
• editor.insertSpaces: Menggunakan ruang dan bukannya tab untuk memastikan pemformatan anda seragam.
• editor.formatOnSave: Memformat kod secara automatik semasa disimpan.
• editor.trimAutoWhitespace: Mengalih keluar ruang belakang, memastikan kod bersih.

? Petua Pro: Pertimbangkan untuk menambah fail .prettierrc pada projek anda untuk berkongsi tetapan format anda dengan rakan sepasukan, memastikan penggayaan yang konsisten merentas seluruh pasukan anda.

Fikiran Akhir ?

Penyesuaian ini mewujudkan ruang kerja yang lebih lancar dan cekap di mana anda boleh memfokus pada kod itu sendiri. Luangkan masa beberapa minit untuk melaksanakan tweak ini dan alami peningkatan produktiviti secara langsung. Perubahan kecil boleh membawa perubahan besar.

Atas ialah kandungan terperinci Kod Lebih Pantas dalam Kod VS: Penyesuaian Mesti Ada untuk Pembangun JavaScript & React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!