VS Code (atau Visual Studio Code) (sejak 2015) adalah editor kode sumber gratis, sumber terbuka, ringan, kuat, dan populer yang disediakan oleh Microsoft. Ini tersedia di Windows, macOS dan Linux
Fiturnya antara lain
- IntelliSense. mendukung penyorotan sintaks, penyelesaian kode otomatis, cuplikan, pemfaktoran ulang, dll
- Men-debug. dengan break point, tumpukan panggilan, dan konsol interaktif
- Dukungan Git (Kontrol Versi Sumber) bawaan
- Dapat diperluas (melalui ekstensi) dan dapat disesuaikan. Ada banyak ekstensi di pasar ekstensi
- Dengan Microsoft Azure (cloud), Anda dapat menyebarkan dan menghosting situs React, Angular, Vue, Node, Python Anda
VS Code mendukung JavaScript, Python, Java, C/C++, JSON, HTML/CSS, C#, PHP, YAML, dan banyak bahasa lainnya
VS Code adalah IDE Visual Studio yang ringan (?)
Instal dan Mulai
Buka situs induk VS Code (@ https. //kode. Studio visual. com/). Unduh penginstal untuk OS Anda. Saya merekomendasikan versi ZIP, yang dapat Anda unzip ke direktori mana saja, dan hapus seluruh direktori jika tidak diperlukan lagi
Untuk Memulai, baca atau tonton video di bawah "Docs"
Kode VS untuk Java
Baca "Memulai Java dalam Kode VS" @ https. //kode. Studio visual. com/docs/java/java-tutorial
Sekadar informasi, 15 Java IDE terbaik tahun 2022 pilihan guru99 adalah. Eclipse, Tabnine, IntelliJ IDEA, BlueJ, MyEclipse, Xcode, Apache NetBeans, jGRASP, Codata, Codenvy, Slickedit, JBoss Forge, JDeveloper, JEdit,
Instalasi dan Memulai
InstalasiAnda perlu menginstal
- JDK. Lihat "JDK - Cara";
- Ekstensi Kode VS "Paket Ekstensi untuk Java" (paket ekstensi adalah rangkaian ekstensi), yang menyediakan Java IntelliSense, debugging, pengujian unit, dukungan Maven/Gradle, manajemen proyek, integrasi dengan kerangka kerja seperti Tomcat, Jetty, dan Spring Boot (
Buka Palet Perintah, masukkan "Java. Ikhtisar" untuk membaca panduan cepat memulai Java
MulaiUntuk Memulai Pemrograman Java (Saya berasumsi bahwa Anda memiliki pengetahuan dasar tentang pemrograman dan Java)
- Atur Ruang Kerja. Buat folder, ucapkan "VSCodeJavaTest". Kode VS menggunakan folder (dan sub-folder dan file), bukan proyek atau ruang kerja
Luncurkan Kode VS ⇒ Pilih menu "File" ⇒ "Buka Folder. " ⇒ Pilih folder di atas (sebagai ruang kerja proyek Anda) - Buat Kelas baru. Arahkan mouse Anda ke nama proyek ⇒ Klik ikon "File Baru" ⇒ Masukkan "Halo. java" ⇒ File baru muncul di panel editor
- Tulis kata sapaan. Di panel editor, masukkan program Java hello-world sebagai berikut. Anda dapat mencoba IntelliSense dan potongan kode
- Masukkan "kelas", dan gulir ke bawah ke item ke-2 dengan ikon kotak, yang menunjukkan cuplikan kode. Pilih cuplikan kode ini. IntelliSense VS Code akan diperluas ke definisi kelas
- Masukkan "utama" dan pilih cuplikan kode (dengan ikon kotak). VS Code akan diperluas ke metode PS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......4
- Masukkan "sysout" dan pilih cuplikan kode. VS Code akan diperluas ke PS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......5. Masukkan beberapa kode. /** * Hello */ public class Hello { public static void main(String[] args) { int i = 8899; String msg = "hello, "; System.out.println("hello, world"); System.out.println("hello, again"); System.out.println(msg + i); } }
- Jalankan programnya
- Tekan tombol "Jalankan" di atas metode PS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......4. Anda dapat memeriksa output pada panel "Terminal" di bagian bawah
- Anda juga dapat menjalankan program Anda dengan memasukkan perintah Anda sendiri di "Terminal" (Di windows, Powershell secara default - tetapi Anda juga dapat beralih ke CMD yang sudah dikenal), e. g. ,PS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......
- Debug program. Untuk men-debug program, pertama-tama atur breakpoint dengan mengklik margin kiri dari pernyataan yang dipilih (titik merah yang kotor muncul). Tekan tombol "Debug" di atas metode PS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......4. Anda kemudian dapat "Step Over" (atau "Continue" atau "Stop" atau "Step Into" atau "Step Out') kode melalui tombol di toolbar pop-up. Anda dapat memeriksa hasilnya di panel "Terminal";
Pengujian Unit melalui JUnit atau TestNG
Baca "Menguji Java dengan Kode VS" @ https. //kode. Studio visual. com/docs/java/java-testing
Anda perlu memasang ekstensi "Test Runner for Java", yang mendukung JUnit 4, JUnit 5 dan TestNG
[MELAKUKAN]
Alat Bangun Java. Maven dan Gradle
[MELAKUKAN]
Bekerja dengan Java Framework. Spring Boot, Tomcat dan Jetty
[MELAKUKAN]
Tip dan Trik
Menavigasi Simbol dan Mencari SimbolKlik kanan pada simbol, Anda dapat memilih
- Pergi Ke Definisi (F12 atau Fn-F12), Ke Jenis Definisi
- Buka Implementasi, Buka Referensi
- Menuju Implementasi Super
- Mengintip ⇒ Definisi Mengintip (Alt-F12). Untuk melihat sekilas definisi simbol, tanpa membuka file target
- Peek ⇒ Peek Call Hierarchy. Tampilkan hierarki pemanggilan metode
Cari Simbol
- Untuk mencari simbol di ruang kerja, tekan Ctrl-T, dan masukkan nama setelah prompt #. Anda juga dapat menggunakan Ctrl-P (Buka Cepat) dan masukkan # diikuti dengan nama simbol
- Untuk mencari simbol di file saat ini, tekan Ctrl-P (Quick Open), dan masukkan @ diikuti dengan nama simbol
Baca "Memulai Java dalam Kode VS" ⇒ "Refactoring"
PemformatAnda dapat menggunakan "Format Document" untuk memformat kode Java Anda
Untuk mengedit pengaturan pemformat. pilih perintah "Java. Buka Pengaturan Pemformat Java dengan Pratinjau"
Ubah Indentasi (Tab/Spasi)Goto "Preferensi" ⇒ "Pengaturan" ⇒ Pilih "Pengguna" atau "Ruang Kerja" ⇒ Setel "Editor. Ukuran Tab" dan "Editor. Sisipkan Spasi".
Untuk pengaturan khusus "Bahasa". Pergi ke palet perintah, masukkan "Preferences. Konfigurasikan Pengaturan Khusus Bahasa" ⇒ Pilih bahasa Anda (mis. g. , PS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......_8) ⇒ Setel "Editor. Ukuran Tab" dan "Editor. Sisipkan Spasi".
SonarLintEkstensi "SonarLint" memungkinkan Anda mendeteksi bug dan kerentanan saat menulis kode. Ekstensi berjalan di latar belakang dan menyoroti kode sumber yang menimbulkan masalah kualitas atau keamanan
CheckstyleEkstensi "Checkstyle for Java", memungkinkan Anda untuk memeriksa gaya menggunakan Google atau Sun's Check atau file yang disesuaikan
Ini mendukung "live linting" dan "batch check"
Label dan Nama Parameter (x. , sebuah. )Di Kode VS nanti, Anda melihat PS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......_9 di depan string, yang bukan kode yang dapat dieksekusi, tetapi label. Ini sebenarnya mengganggu. Untuk menonaktifkan label, tambahkan opsi ini di file "editor.inlayHints.enabled": false 0 Anda
"editor.inlayHints.enabled": false _Lokasi "editor.inlayHints.enabled": false _0 adalah
- Windows. "editor.inlayHints.enabled": false _2. (Pada "cmd", masukkan ""editor.inlayHints.enabled": false _3" untuk menemukan direktorinya. )
- macOS. "editor.inlayHints.enabled": false _4
- Linux. "editor.inlayHints.enabled": false _5
Kode VS untuk HTML/CSS/JavaScript/Node. js
JavaScript berjalan dalam dua mode. (a) JavaScript sisi klien bersama dengan HTML/CSS berjalan di dalam browser; . mesin js
HTML/CSS/Client-Side-JavaScript berjalan di dalam Web Browser
InstalasiAnda perlu menginstal
- Ekstensi "Dukungan CSS HTML", "Cuplikan HTML",
- Ekstensi "Server Langsung". Luncurkan Server lokal pengembangan dengan fitur muat ulang langsung untuk halaman statis dan dinamis. Untuk meluncurkan, klik "Go Live" di bilah status. Klik lagi untuk menutup server
Untuk memulai dengan HTML/CSS/Client-Side-JavaScript
- Atur Ruang Kerja. Buat folder, ucapkan "VSCodeJSTest". Kode VS menggunakan folder (dan sub-folder dan file), bukan proyek atau ruang kerja
Luncurkan Kode VS ⇒ File ⇒ Buka Folder. ⇒ Pilih folder proyek di atas - Buat Skrip baru. Arahkan mouse Anda ke nama proyek ⇒ Klik ikon "File Baru" ⇒ Masukkan "Halo. html" ⇒ File baru muncul di panel editor
- Tulis halo-dunia. Masukkan kode berikut, yang meliputi HTML, CSS, dan JavaScript. Cobalah IntelliSense dan Cuplikan, mis. g. , masukkan "editor.inlayHints.enabled": false
_6 dan pilih cuplikan (dengan ikon kotak) untuk memperluas ke "editor.inlayHints.enabled": false
7,
HTML Testing
hello, world
hello world again and again and again.
- Jalankan Skrip
- Klik "Go Live" di bilah status untuk menampilkannya di browser (melalui ekstensi Live Server). Setiap perubahan pada file akan dimuat ulang secara langsung. Klik lagi untuk memutuskan sambungan
- Atau, Anda dapat menggunakan browser web untuk membuka. html. Namun, Anda perlu me-refresh (F5) halaman untuk mendapatkan perubahan
- Debug program. Gunakan Debugger F12 dari browser
Standalone (atau Server-Side) JavaScript berjalan di Node. js
InstalasiAnda perlu menginstal
- Node. js, yang menyediakan mesin JavaScript untuk menjalankan program JavaScript mandiri
Untuk memulai dengan program JavaScript mandiri
- Atur Ruang Kerja. Buat folder, ucapkan "VSCodeJSTest". Kode VS menggunakan folder (dan sub-folder dan file), bukan proyek atau ruang kerja
Luncurkan Kode VS ⇒ File ⇒ Buka Folder. ⇒ Pilih folder proyek di atas - Buat Skrip baru. Arahkan mouse Anda ke nama proyek ⇒ Klik ikon "File Baru" ⇒ Masukkan ""editor.inlayHints.enabled": false 8" ⇒ File baru muncul di panel editor
- Tulis halo-dunia. Masukkan program JavaScript berikut. Cobalah IntelliSense dan cuplikannya, mis. g. , Anda dapat mengetik ""editor.inlayHints.enabled": false
_9" dan memilih cuplikan (dengan ikon kotak) untuk memperluas ke
HTML Testing
hello, world
hello world again and again and again.
0. var i = 5566; var msg = "hello"; console.log("hello, world"); console.log("hello, again"); console.log("hello, again and again"); console.log(msg, i); - Jalankan programnya
- Pilih menu "Jalankan" ⇒ "Jalankan Tanpa Debugging" (atau Ctrl-F5) ⇒ Pilih lingkungan "Node. js" (jika diminta). Anda dapat menemukan output di bawah panel "Debug Console".
- Anda juga dapat menjalankan program Anda dengan mengeluarkan perintah Anda sendiri di "Terminal". Pergi ke "Terminal", masukkan "
HTML Testing
hello, world
hello world again and again and again.
1"
- Debug program. Untuk men-debug program, pertama-tama atur breakpoint dengan mengklik margin kiri dari pernyataan yang dipilih (titik merah yang kotor muncul). Pilih menu "Jalankan" ⇒ "Mulai Debugging" (atau F5) ⇒ Pilih lingkungan "Node. js" (jika diminta). Anda kemudian dapat "Step Over" (atau "Continue" atau "Stop" atau "Step Into" atau "Step Out') kode melalui tombol di toolbar pop-up. Anda dapat memeriksa hasilnya di panel "Konsol Debug";
Aplikasi Ekspres
Referensi. https. //kode. Studio visual. com/docs/node js/node js-tutorial
Express adalah Node yang sangat populer. kerangka aplikasi js. Anda dapat membuat aplikasi Express baru menggunakan "Express Generator Tool". Anda dapat menginstal melalui npm (Node Package Manager) sebagai berikut
npm install -g express-generator // -g for global (all users)Untuk menghasilkan scaffold aplikasi Express
cd /path/to/project-folder // change directory to your project directory express myExpressApp --view pug // Generate a new Express app // --view pug: to use pug template engine (pug is an HTML template preprocessor) cd myExpressApp npm install // install the dependencies SET DEBUG=myexpressapp:* & npm start // run the appAnda dapat mengakses server dengan mengeluarkan URL http. // localhost. 3000 dari browser web
Hentikan server dengan menekan Ctrl-C
Kode VS untuk C/C++
Baca "VS Kode C++" @ https. //kode. Studio visual. com/docs/cpp/introvideos-cpp
Sekadar informasi, 15 IDE/Source-Code-Editor Gratis terbaik tahun 2022 pilihan guru99 adalah. C++ Builder, Tabnine, Visual Studio Code, Eclipse, Codelite, Atom, CLion, Emacs, NotePad++, Netbeans, Codeblocks, Cevelop, Kdevelop, SlickEdit, Graviton
Instalasi dan Memulai
InstalasiAnda perlu menginstal
- Ekstensi kode VS "Paket Ekstensi C/C++" (paket ekstensi adalah rangkaian ekstensi)
- kompiler GCC. Untuk memeriksa apakah Anda memiliki kompiler C/C++, keluarkan perintah ini. gcc --version // C compiler
......
g++ --version // C++ compiler
......
gdb --version // C/C++ debuggerUntuk macOS dan linux, C/C++ GCC Compiler sudah diinstal sebelumnya
Untuk Windows, Anda dapat menginstal Cygwin64 atau MinGW-w64 C/C++ Compiler (atau MSVC - Microsoft Visual C/C++ Compiler)
- Atur Ruang Kerja. Buat folder, ucapkan "VSCodeCTest". Kode VS menggunakan folder (dan sub-folder dan file), bukan proyek atau ruang kerja. Luncurkan Kode VS ⇒ "File" ⇒ "Buka Folder. " ⇒ Pilih folder proyek
- Buat Program baru. Arahkan mouse Anda ke nama proyek ⇒ Klik ikon "File Baru" ⇒ Masukkan "Halo. c" atau "Halo. cpp" ⇒ File baru muncul di panel editor
- Tulis Program Halo-dunia. Masukkan kode berikut. Anda dapat mengetik "
HTML Testing
hello, world
hello world again and again and again.
_2" dan memilih potongan (dengan ikon kotak) untuk diperluas ke fungsi PS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......4. // Hello.c #include int main() { printf("hello world from C\n"); printf("hello world again\n"); return 0; }// Hello.cpp #include using namespace std; int main() { cout << "hello world from C++" << endl; cout << "hello world again" << endl; return 0; } - Bangun (Kompilasi & Tautkan) dan Jalankan melalui Terminal. Pergi ke "Terminal" dan keluarkan perintah ini. PS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......0
- Bangun, Jalankan, dan Debug program melalui "C/C++ Runner Extension"
Sangat sulit untuk mengonfigurasi Ctnl-F5 dan F5 untuk menjalankan dan men-debug program C/C++ Anda. Sebagai gantinya, saya menginstal "C/C++ Runner Extension", yang menyediakan menunya di bilah status (di bagian bawah layar)- Pertama, pilih folder proyek
- Membangun. Klik tombol "Bangun" untuk membangun program
- Lari. Klik tombol "Jalankan" untuk menjalankan program (tanpa debugging)
- Debug. Tetapkan breakpoint di program Anda dan klik tombol "Debug". Anda kemudian dapat menggunakan toolbar pop-up untuk "Step Over" (atau "Continue" atau "Stop" atau "Step Into" atau "Step Out') kode
Tip dan Trik
Kesalahan. #include error terdeteksi, perbarui includePath AndaPesan kesalahan ini disiapkan oleh IntelliSense untuk bantuan sintaks. Anda masih dapat mengkompilasi dan menjalankan program Anda melalui Terminal
Untuk memperbaiki kesalahan ini. Pilih "Edit pengaturan IncludePath" ⇒ Di bawah Konfigurasi IntelliSense ⇒ Sertakan jalur ⇒ Tambahkan jalur sertakan berikut di bawah " HTML Testing hello, world
hello world again and again and again.
5" (untuk Cygwin64 Windows)PS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......_1Periksa " HTML Testing hello, world
hello world again and again and again.
_6" di bawah folder " HTML Testing hello, worldhello world again and again and again.
7"Men-debug
Menyiapkan debugger untuk lingkungan pemrograman Anda dan dapat men-debug program adalah keterampilan PALING penting bagi seorang programmer
Konfigurasi Debug ( HTML Testing hello, worldhello world again and again and again.
8)[MELAKUKAN]
Panel DebugPanel berikut muncul dalam mode debug
- Variabel
- Jam tangan
- Tumpukan Panggilan
- Skrip yang Dimuat
- Breakpoint
- Debug Konsol
- Melanjutkan. Lanjutkan hingga breakpoint berikutnya atau akhir program
- Langkah selesai. Melangkahi panggilan fungsi, mis. e, fungsi berjalan dalam satu langkah
- Langkah-Masuk/Langkah-Keluar. Melangkah masuk atau keluar (kembali) dari panggilan fungsi
- Mengulang kembali. Mulai ulang program
- Berhenti. menghentikan program
- Ganti Kode Panas. terapkan perubahan kode tanpa memulai ulang program yang sedang berjalan
Kontrol Versi Sumber melalui Git
Kode VS memiliki Git yang disematkan untuk Kontrol Versi Sumber. Git mencatat semua perubahan Anda ke file dari waktu ke waktu;
Inisialisasi Repositori GitPS C:\xxx\VSCodeJavaTest> javac Hello.java // Compile Java program PS C:\xxx\VSCodeJavaTest> java Hello // Run the compiled class file ...... PS C:\xxx\VSCodeJavaTest> java Hello.java // Compile and run Java source file ......_2Pilih menu "Lihat" ⇒ "Kontrol Sumber". Dorong "Inisialisasi Repositori"
HTML Testing hello, world
hello world again and again and again.
_9. [MELAKUKAN]Membuat cabang[MELAKUKAN]
Tip dan Trik
IntelliSense. Ini adalah fitur pengeditan yang paling penting, yang dapat meningkatkan produktivitas Anda berkali-kali lipat. Ini termasuk pelengkapan kode otomatis, dokumentasi, templat, penyorotan sintaks, dan banyak lagi. Anda perlu mencobanya
Palet Perintah. Command Palette adalah salah satu fitur paling aneh/inovatif di VS Code. Anda dapat memasukkan perintah apa pun alih-alih menggunakan menu atau bilah alat. Menu "Lihat" ⇒ "Palet Perintah"
Perbesar/Perkecil (Ctrl-+ dan Ctrl--)
Penyimpanan otomatis. Anda dapat menyimpan otomatis file yang telah diedit dengan mengaktifkan "simpan otomatis", dengan memilih menu "File" ⇒ "Simpan Otomatis". Saya tidak melihat alasan mengapa Anda tidak mengaktifkan penyimpanan otomatis
Pemformatan Sumber. Klik kanan pada file ⇒ Format Dokumen (Shift-Alt-F)
Anda juga harus mengaktifkan pengaturan preferensi editor ini. "editor. format on type" (editor secara otomatis memformat baris setelah mengetik), "editor. format on paste" (editor secara otomatis memformat konten tempel)
Untuk melakukannya, buka menu "File" ⇒ "Preferences" ⇒ "Settings" ⇒ Masukkan "format on type" ⇒ centang "Editor. Format pada Jenis"
Pilih Kolom. Pilih menu "Edit" ⇒ "Mode Pilih Kolom" untuk beralih mode pilih kolom
Ubah nama (Refactor) Variabel. Pilih variabel ⇒ klik kanan ⇒ Rename Symbol (F2) ⇒ ketik nama baru. Semua kemunculan variabel ini akan diganti namanya
Lekukan (Spasi/Tab). Untuk program Java saya, saya lebih suka lekukan 3 spasi (dengan spasi daripada tab). Klik pada "spasi. 4" pada bilah status, pilih perintah "Indentasi menggunakan spasi" dan "3". Anda kemudian dapat memformat ulang kode sumber melalui F2
Buka Cepat (Ctrl-P). Bagi Anda untuk dengan cepat membuka satu atau lebih file
Banyak Kursor (Alt-Klik). Anda dapat menambahkan kursor tambahan melalui Alt-klik. Anda juga dapat menambahkan kursor tambahan dari semua pilihan saat ini melalui Shift-Ctrl-L. Misalnya, lakukan "Find (Ctrl-F)" pada kata tertentu, hapus menu Find, dan Shift-Ctrl-L