Bagaimana cara membuat file js di windows?

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

Maaf, browser Anda tidak mendukung video HTML 5

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 "[javascript]": { "editor.showUnused": false }, "[javascriptreact]": { "editor.showUnused": false }, 0 file 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. "[javascript]": { "editor.showUnused": false }, "[javascriptreact]": { "editor.showUnused": false }, 0 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 }, 2 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 "[javascript]": { "editor.showUnused": false }, "[javascriptreact]": { "editor.showUnused": false }, 0 di folder akar setiap proyek
• Anda menggunakan kompiler TypeScript untuk mengkompilasi kode sumber JavaScript tingkat bawah

Untuk menentukan proyek JavaScript dasar, tambahkan "[javascript]": { "editor.showUnused": false }, "[javascriptreact]": { "editor.showUnused": false }, 0 di akar ruang kerja Anda

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

Lihat Bekerja dengan JavaScript untuk konfigurasi "[javascript]": { "editor.showUnused": false }, "[javascriptreact]": { "editor.showUnused": false }, 0 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 "[javascript]": { "editor.showUnused": false }, "[javascriptreact]": { "editor.showUnused": false }, _0 yang mereferensikan file JavaScript. Pemberitahuan ditampilkan jika file tersebut bukan bagian dari proyek "[javascript]": { "editor.showUnused": false }, "[javascriptreact]": { "editor.showUnused": false }, 0

Cuplikan

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

Maaf, browser Anda tidak mendukung video HTML 5

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, setel "[javascript]": { "editor.showUnused": false }, "[javascriptreact]": { "editor.showUnused": false }, 8 ke "[javascript]": { "editor.showUnused": false }, "[javascriptreact]": { "editor.showUnused": false }, 9 di file pengaturan Anda. Setelan "[javascript]": { "editor.showUnused": false }, "[javascriptreact]": { "editor.showUnused": false }, 8 juga memungkinkan Anda mengubah tempat munculnya cuplikan di saran. di bagian atas ("editor.codeActionsOnSave": { "source.organizeImports": true } 1), di bagian bawah ("editor.codeActionsOnSave": { "source.organizeImports": true } 2), atau diurutkan berdasarkan abjad ("editor.codeActionsOnSave": { "source.organizeImports": true } 3). Standarnya adalah "editor.codeActionsOnSave": { "source.organizeImports": true } _3

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

Maaf, browser Anda tidak mendukung video HTML 5

Buat komentar JSDoc dengan cepat untuk fungsi dengan mengetik "editor.codeActionsOnSave": { "source.organizeImports": true } 5 sebelum deklarasi fungsi, dan pilih saran cuplikan komentar JSDoc

Maaf, browser Anda tidak mendukung video HTML 5

Untuk menonaktifkan saran komentar JSDoc, setel "editor.codeActionsOnSave": { "source.organizeImports": true } 6

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 } 7 atau "editor.codeActionsOnSave": { "source.organizeImports": true } 8 dalam panggilan fungsi. Tekan ⇧⌘Space (Windows, Linux Ctrl+Shift+Space ) . to manually trigger signature help.

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 } 9 dari material-ui ke bagian atas file

Untuk menonaktifkan impor otomatis, setel // On save, run both fixAll and organizeImports source actions "editor.codeActionsOnSave": { "source.fixAll": true, "source.organizeImports": true, } 0 ke // On save, run both fixAll and organizeImports source actions "editor.codeActionsOnSave": { "source.fixAll": true, "source.organizeImports": true, } 1

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, } 2 dan // On save, run both fixAll and organizeImports source actions "editor.codeActionsOnSave": { "source.fixAll": true, "source.organizeImports": true, } 3

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, } _4 mengonfigurasi pemformat internal. Atau, jika pemformat internal menghalangi, setel // On save, run both fixAll and organizeImports source actions "editor.codeActionsOnSave": { "source.fixAll": true, "source.organizeImports": true, } 5 ke // On save, run both fixAll and organizeImports source actions "editor.codeActionsOnSave": { "source.fixAll": true, "source.organizeImports": true, } 1 untuk menonaktifkannya

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, } 7 normal dan di file // On save, run both fixAll and organizeImports source actions "editor.codeActionsOnSave": { "source.fixAll": true, "source.organizeImports": true, } 8

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

Maaf, browser Anda tidak mendukung video HTML 5

Setel // On save, run both fixAll and organizeImports source actions "editor.codeActionsOnSave": { "source.fixAll": true, "source.organizeImports": true, } _9 ke // On save, run both fixAll and organizeImports source actions "editor.codeActionsOnSave": { "source.fixAll": true, "source.organizeImports": true, } 1 untuk menonaktifkan penutupan tag JSX

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 New Item