Bagaimana Anda membuat kode dalam javascript?

Visual Studio Code menyertakan JavaScript IntelliSense bawaan, debugging, pemformatan, navigasi kode, pemfaktoran ulang, dan banyak fitur bahasa lanjutan lainnya

Sebagian besar fitur ini langsung berfungsi, sementara beberapa mungkin memerlukan konfigurasi dasar untuk mendapatkan pengalaman terbaik. Halaman ini merangkum fitur-fitur JavaScript yang disertakan dengan VS Code. Ekstensi dari VS Code Marketplace dapat menambah atau mengubah sebagian besar fitur bawaan ini. Untuk panduan yang lebih mendalam tentang cara kerja dan konfigurasi fitur ini, lihat Bekerja dengan JavaScript

IntelliSense

IntelliSense menunjukkan kepada Anda penyelesaian kode yang cerdas, informasi arahkan, dan informasi tanda tangan sehingga Anda dapat menulis kode dengan lebih cepat dan benar

VS Code menyediakan IntelliSense dalam proyek JavaScript Anda;

Lihat Bekerja dengan JavaScript untuk informasi tentang JavaScript IntelliSense VS Code, cara mengonfigurasinya, dan membantu memecahkan masalah umum IntelliSense

Proyek JavaScript (jsconfig. json)

Sebuah jsconfig. File json mendefinisikan proyek JavaScript di VS Code. Meskipun file jsconfig.json_ tidak diperlukan, Anda akan ingin membuatnya dalam kasus seperti

• Jika tidak semua file JavaScript di ruang kerja Anda harus dianggap sebagai bagian dari satu proyek JavaScript. jsconfig.json_ file memungkinkan Anda mengecualikan beberapa file agar tidak muncul di IntelliSense
• Untuk memastikan bahwa sebagian file JavaScript di ruang kerja Anda diperlakukan sebagai proyek tunggal. Ini berguna jika Anda bekerja dengan kode lawas yang menggunakan dependensi global implisit alih-alih

  "[javascript]": {
      "editor.showUnused":  false
  },
  "[javascriptreact]": {
      "editor.showUnused":  false
  },
  

  1 untuk dependensi
• Jika ruang kerja Anda berisi lebih dari satu konteks proyek, seperti kode JavaScript front-end dan back-end. Untuk ruang kerja multi-proyek, buat jsconfig.json di folder root setiap proyek
• Anda menggunakan kompiler TypeScript untuk mengkompilasi kode sumber JavaScript tingkat bawah

Untuk menentukan proyek JavaScript dasar, tambahkan jsconfig.json di akar ruang kerja Anda

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

Lihat Bekerja dengan JavaScript untuk konfigurasi jsconfig.json lebih lanjut

Tip. Untuk memeriksa apakah file JavaScript adalah bagian dari proyek JavaScript, cukup buka file di VS Code dan jalankan JavaScript. Buka perintah Konfigurasi Proyek. Perintah ini membuka jsconfig.json_ yang mereferensikan file JavaScript. Pemberitahuan ditampilkan jika file tersebut bukan bagian dari proyek jsconfig.json apa pun

Cuplikan

VS Code menyertakan cuplikan JavaScript dasar yang disarankan saat Anda mengetik;

Ada banyak ekstensi yang menyediakan snippet tambahan, termasuk snippet untuk framework populer seperti Redux atau Angular. Anda bahkan dapat menentukan cuplikan Anda sendiri

Tip. Untuk menonaktifkan saran cuplikan, atur

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

7 ke

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

8 di file pengaturan Anda. Setelan

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

7 juga memungkinkan Anda mengubah tempat munculnya cuplikan di saran. di bagian atas (

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

0), di bagian bawah (

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

1), atau diurutkan berdasarkan abjad (

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

2). Standarnya adalah

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

_2

dukungan JSDoc

VS Code memahami banyak anotasi JSDoc standar, dan menggunakan anotasi ini untuk memberikan kekayaan. Anda bahkan dapat menggunakan informasi jenis dari komentar JSDoc

Buat komentar JSDoc dengan cepat untuk fungsi dengan mengetik

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

Untuk menonaktifkan saran komentar JSDoc, setel

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

Arahkan Informasi

Arahkan kursor ke simbol JavaScript untuk melihat informasi tipe dan dokumentasi yang relevan dengan cepat

⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) keyboard shortcut shows this hover information at the current cursor position.

Bantuan Tanda Tangan

Saat Anda menulis panggilan fungsi JavaScript, VS Code menampilkan informasi tentang tanda tangan fungsi dan menyorot parameter yang sedang Anda selesaikan

Bantuan tanda tangan ditampilkan secara otomatis saat Anda mengetik

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

Impor otomatis

Impor otomatis mempercepat pengkodean dengan menyarankan variabel yang tersedia di seluruh proyek Anda dan ketergantungannya. Saat Anda memilih salah satu saran ini, VS Code secara otomatis menambahkan impornya ke bagian atas file

Mulailah mengetik untuk melihat semua simbol JavaScript yang tersedia di proyek Anda saat ini. Saran impor otomatis menunjukkan dari mana mereka akan diimpor

Jika Anda memilih salah satu dari saran impor otomatis ini, VS Code akan menambahkan impor untuknya

Dalam contoh ini, VS Code menambahkan impor untuk

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

Untuk menonaktifkan impor otomatis, atur

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

Tip. VS Code mencoba menyimpulkan gaya impor terbaik untuk digunakan. Anda dapat secara eksplisit mengonfigurasi gaya kutipan dan gaya jalur pilihan untuk impor yang ditambahkan ke kode Anda dengan setelan

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

1 dan

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

2

Pemformatan

Pemformat JavaScript bawaan VS Code menyediakan pemformatan kode dasar dengan default yang masuk akal

Pengaturan

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

Untuk gaya pemformatan kode yang lebih terspesialisasi, coba pasang salah satu ekstensi pemformatan JavaScript dari Marketplace

JSX dan tag penutup otomatis

Semua fitur JavaScript VS Code juga bekerja dengan JSX

Anda dapat menggunakan sintaks JSX di file

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

VS Code juga menyertakan fitur khusus JSX seperti penutupan otomatis tag JSX

Atur

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

navigasi kode

Navigasi kode memungkinkan Anda menavigasi proyek JavaScript dengan cepat

• Buka Definisi F12 - Buka kode sumber definisi simbol.
• Peek Definition ⌥F12 (Windows Alt+F12 . Ctrl+Shift+F10) - Bring up a Peek window that shows the definition of a symbol.
• Buka Referensi ⇧F12 (Windows, Linux Shift+F12) - Show all references to a symbol.
• Pergi ke Jenis Definisi - Pergi ke jenis yang mendefinisikan simbol. Untuk instance kelas, ini akan mengungkapkan kelas itu sendiri alih-alih di mana instance didefinisikan

Anda dapat menavigasi melalui pencarian simbol menggunakan perintah Buka Simbol dari Palet Perintah ( ⇧⌘P (Windows, Linux Ctrl+Shift+P)).

• Buka Simbol di File ⇧⌘O (Windows, Linux Ctrl+Shift+O<)
• Buka Simbol di Ruang Kerja ⌘T (Windows, Linux Ctrl+T)

Ganti nama

Tekan F2 untuk mengganti nama simbol di bawah kursor di proyek JavaScript Anda.

Pemfaktoran ulang

VS Code menyertakan beberapa pemfaktoran ulang praktis untuk JavaScript seperti fungsi Ekstrak dan konstanta Ekstrak. Cukup pilih kode sumber yang ingin Anda ekstrak lalu klik bola lampu di selokan atau tekan ( ⌘. (Windows, Linux Ctrl+. ) ) untuk melihat pemfaktoran ulang yang tersedia.

Refactoring yang tersedia termasuk

• Ekstrak ke metode atau fungsi
• Ekstrak ke konstan
• Konversi antara impor bernama dan impor namespace
• Pindah ke file baru

Lihat Pemfaktoran ulang untuk informasi selengkapnya tentang pemfaktoran ulang dan cara mengonfigurasi pintasan keyboard untuk pemfaktoran ulang individual

Variabel yang tidak digunakan dan kode yang tidak dapat dijangkau

Kode JavaScript yang tidak terpakai, seperti blok else dari pernyataan

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Anda dapat dengan cepat menghapus kode yang tidak terpakai ini dengan menempatkan kursor di atasnya dan memicu perintah Perbaiki Cepat ( ⌘. (Windows, Linux Ctrl+. )) or clicking on the lightbulb.

Untuk menonaktifkan pemudaran kode yang tidak digunakan, setel

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

Mengatur Impor

Tindakan Atur Impor Sumber mengurutkan impor dalam file JavaScript dan menghapus impor yang tidak terpakai

Anda dapat menjalankan Atur Impor dari menu konteks Tindakan Sumber atau dengan ⇧⌥O (Windows, Linux Shift+Alt+O) keyboard shortcut.

Atur impor juga dapat dilakukan secara otomatis saat Anda menyimpan file JavaScript dengan pengaturan

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

Tindakan Kode saat Simpan

Pengaturan

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

Anda juga dapat menyetel

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Berikut adalah beberapa tindakan sumber

• {
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      // This is the line you want to add
      "allowSyntheticDefaultImports": true
    },
    "exclude": ["node_modules", "**/node_modules/*"]
  }
  

  _5 - Memungkinkan pengorganisasian impor saat disimpan

• {
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      // This is the line you want to add
      "allowSyntheticDefaultImports": true
    },
    "exclude": ["node_modules", "**/node_modules/*"]
  }
  

  6 - Auto Fix on Save menghitung semua kemungkinan perbaikan dalam satu putaran (untuk semua penyedia termasuk ESLint)

• {
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      // This is the line you want to add
      "allowSyntheticDefaultImports": true
    },
    "exclude": ["node_modules", "**/node_modules/*"]
  }
  

  _7 - Perbaikan Otomatis hanya untuk ESLint

• {
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      // This is the line you want to add
      "allowSyntheticDefaultImports": true
    },
    "exclude": ["node_modules", "**/node_modules/*"]
  }
  

  _8 - Menambahkan semua impor yang hilang saat disimpan

Lihat Node. js/JavaScript untuk informasi lebih lanjut

Saran kode

VS Code secara otomatis menyarankan beberapa penyederhanaan kode umum seperti mengonversi rantai

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Setel React2 ke

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
}

Petunjuk tatahan

Petunjuk inlay menambahkan informasi sebaris tambahan ke kode sumber untuk membantu Anda memahami apa yang dilakukan kode tersebut

Petunjuk inlay nama parameter menunjukkan nama parameter dalam panggilan fungsi

Ini dapat membantu Anda memahami arti dari setiap argumen secara sekilas, yang sangat membantu untuk fungsi yang menggunakan bendera Boolean atau memiliki parameter yang mudah dibaurkan

Untuk mengaktifkan petunjuk nama parameter, atur React4. Ada tiga kemungkinan nilai

• React5 — Nonaktifkan petunjuk tatahan parameter
• React6 — Hanya tampilkan petunjuk inlay untuk literal (string, angka, Boolean)
• React7 — Tampilkan petunjuk inlay untuk semua argumen

Petunjuk inlay tipe variabel menunjukkan tipe variabel yang tidak memiliki anotasi tipe eksplisit

Pengaturan. React_8

Petunjuk inlay tipe properti menampilkan tipe properti kelas yang tidak memiliki anotasi tipe eksplisit

Pengaturan. React_9

Petunjuk tipe parameter menunjukkan tipe parameter yang diketik secara implisit

Pengaturan. lodash_0

Petunjuk inlay tipe pengembalian memperlihatkan tipe pengembalian fungsi yang tidak memiliki anotasi tipe eksplisit

Pengaturan. lodash_1

Referensi CodeLens

Referensi JavaScript CodeLens menampilkan jumlah referensi sebaris untuk kelas, metode, properti, dan objek yang diekspor

Untuk mengaktifkan referensi CodeLens, setel lodash2 ke lodash3

Klik jumlah referensi untuk menelusuri daftar referensi dengan cepat

Perbarui impor saat memindahkan file

Saat Anda memindahkan atau mengganti nama file yang diimpor oleh file lain di proyek JavaScript Anda, VS Code dapat secara otomatis memperbarui semua jalur impor yang mereferensikan file yang dipindahkan

Pengaturan lodash_4 mengontrol perilaku ini. Nilai pengaturan yang valid adalah

• lodash5 - Default. Menanyakan apakah jalur harus diperbarui untuk setiap pemindahan file
• lodash6 - Selalu perbarui jalur secara otomatis
• lodash7 - Jangan perbarui jalur secara otomatis dan jangan tanya

Linter

Linters memberikan peringatan untuk kode yang tampak mencurigakan. Meskipun VS Code tidak menyertakan linter JavaScript bawaan, banyak ekstensi linter JavaScript tersedia di pasar

Tip. Daftar ini ditanyakan secara dinamis dari VS Code Marketplace. Baca deskripsi dan ulasan untuk memutuskan apakah ekstensi tersebut tepat untuk Anda

Pengecekan tipe

Anda juga dapat memanfaatkan beberapa fungsi pemeriksaan tipe lanjutan dan pelaporan kesalahan TypeScript dalam file JavaScript biasa. Ini adalah cara yang bagus untuk menangkap kesalahan pemrograman umum. Pemeriksaan jenis ini juga mengaktifkan beberapa Perbaikan Cepat yang menarik untuk JavaScript, termasuk Tambahkan impor yang hilang dan Tambahkan properti yang hilang

TypeScript mencoba menyimpulkan tipe dalam file lodash8 dengan cara yang sama seperti pada file lodash9. Ketika tipe tidak dapat disimpulkan, mereka dapat ditentukan secara eksplisit dengan komentar JSDoc. Anda dapat membaca lebih lanjut tentang bagaimana TypeScript menggunakan JSDoc untuk pemeriksaan tipe JavaScript Bekerja dengan JavaScript

Pengecekan jenis JavaScript bersifat opsional dan ikut serta. Alat validasi JavaScript yang sudah ada seperti ESLint dapat digunakan bersamaan dengan fungsi pemeriksaan tipe bawaan

Men-debug

VS Code hadir dengan dukungan debug yang bagus untuk JavaScript. Setel breakpoint, periksa objek, navigasikan tumpukan panggilan, dan jalankan kode di Konsol Debug. Lihat topik Debugging untuk mempelajari lebih lanjut

Debug sisi klien

Anda dapat men-debug kode sisi klien menggunakan debugger browser seperti debugger bawaan kami untuk Edge dan Chrome, atau Debugger untuk Firefox

Debug sisi server

Simpul Debug. js di VS Code menggunakan debugger bawaan. Setup mudah dan ada untuk membantu Anda

Ekstensi populer

VS Code dikirimkan dengan dukungan luar biasa untuk JavaScript tetapi Anda juga dapat memasang debugger, cuplikan, linter, dan alat JavaScript lainnya melalui ekstensi

Tip. Ekstensi yang ditampilkan di atas ditanyakan secara dinamis. Klik ubin ekstensi di atas untuk membaca deskripsi dan ulasan guna memutuskan ekstensi mana yang terbaik untuk Anda. Lihat selengkapnya di Pasar

Langkah selanjutnya

Baca terus untuk mengetahui tentang

• Bekerja dengan JavaScript - Informasi lebih detail tentang dukungan JavaScript VS Code dan cara memecahkan masalah umum
• jsconfig. json - Deskripsi terperinci dari file proyek jsconfig.json
• IntelliSense - Pelajari lebih lanjut tentang IntelliSense dan cara menggunakannya secara efektif untuk bahasa Anda
• Debugging - Pelajari cara menyiapkan debugging untuk aplikasi Anda
• Node. js - Panduan untuk membuat Express Node. aplikasi js
• TypeScript - VS Code memiliki dukungan besar untuk TypeScript, yang menghadirkan struktur dan pengetikan yang kuat ke kode JavaScript Anda

Pertanyaan umum

Apakah VS Code mendukung JSX dan React Native?

VS Code mendukung JSX dan React Native. Anda akan mendapatkan IntelliSense untuk React/JSX dan React Native dari file deklarasi tipe (pengetikan) yang diunduh secara otomatis dari repositori file deklarasi tipe npmjs. Selain itu, Anda dapat menginstal ekstensi React Native yang populer dari Marketplace

Untuk mengaktifkan pernyataan impor ES6 untuk React Native, Anda perlu menyetel opsi compiler express1 ke lodash3. Ini memberi tahu kompiler untuk membuat anggota default sintetis dan Anda mendapatkan IntelliSense. React Native menggunakan Babel di belakang layar untuk membuat kode run-time yang tepat dengan anggota default. Jika Anda juga ingin melakukan debug kode React Native, Anda dapat menginstal React Native Extension

Apakah VS Code mendukung bahasa pemrograman Dart dan framework Flutter?

Ya, ada ekstensi VS Code untuk pengembangan Dart dan Flutter. Anda dapat mempelajari lebih lanjut di Flutter. dokumentasi pengembang

IntelliSense tidak berfungsi untuk pustaka eksternal

express3 berfungsi untuk dependensi yang diunduh oleh npm (ditentukan dalam express4), Bower (ditentukan dalam express5), dan untuk banyak perpustakaan paling umum yang tercantum dalam struktur folder Anda (misalnya express6)

Impor Gaya ES6 tidak berfungsi

Ketika Anda ingin menggunakan impor gaya ES6 tetapi beberapa file deklarasi tipe (pengetikan) belum menggunakan ekspor gaya ES6, maka setel opsi kompiler TypeScript express1 ke true

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Bisakah saya men-debug JavaScript yang diperkecil/di-uglifikasi?

Ya kamu bisa. Anda dapat melihat ini berfungsi menggunakan peta sumber JavaScript di Node. Topik debug js

Bagaimana cara menonaktifkan Validasi Sintaks saat menggunakan konstruksi non-ES6?

Beberapa pengguna ingin menggunakan konstruksi sintaksis seperti operator pipeline (express8) yang diusulkan. Namun, saat ini tidak didukung oleh layanan bahasa JavaScript VS Code dan ditandai sebagai kesalahan. Untuk pengguna yang masih ingin menggunakan fitur mendatang ini, kami menyediakan setelan express9

Dengan node_0, Anda menonaktifkan semua pemeriksaan sintaks bawaan. Jika Anda melakukan ini, kami menyarankan Anda menggunakan linter seperti ESLint untuk memvalidasi kode sumber Anda

Bisakah saya menggunakan alat JavaScript lain seperti Flow?

Ya, tetapi beberapa fitur bahasa Flow seperti pemeriksaan jenis dan kesalahan dapat mengganggu dukungan JavaScript bawaan VS Code. Untuk mempelajari cara menonaktifkan dukungan JavaScript bawaan VS Code, lihat

Bagaimana cara menulis kode dalam JavaScript?

Bisakah kita melakukan pengkodean dalam JavaScript?

Di mana Anda membuat kode dalam JavaScript?