Mempelajari kode itu menakutkan, jadi siapkan diri Anda untuk sukses dengan alat yang dibuat untuk Anda. Visual Studio Code adalah editor pengkodean gratis yang membantu Anda memulai pengkodean dengan cepat. Gunakan untuk membuat kode dalam bahasa pemrograman apa pun, tanpa berpindah editor. Visual Studio Code memiliki dukungan untuk banyak bahasa, termasuk Python, Java, C++, JavaScript, dan lainnya. Siap untuk memulai? . BERSIH
Mengapa Kode VS?
Berkolaborasi dan membuat kode dari jarak jauh
Bekerja sama dari jarak jauh dengan guru atau teman sekelas Anda menggunakan ekstensi LiveShare gratis. Edit dan debug kode Anda secara waktu nyata, dan gunakan fitur obrolan dan telepon untuk mengajukan pertanyaan atau mendiskusikan ide bersama. Apakah Anda mengerjakan tugas kelompok atau mengajar pelajaran, Anda dapat mengundang banyak orang untuk bergabung dalam sesi dan membuat kode bersama. Lihat tutorial ini tentang cara mulai menggunakan LiveShare
Kode untuk dipelajari
Baru mengenal pengkodean? . Anda juga dapat memanfaatkan fitur seperti dan , yang membantu Anda memahami bagaimana fungsi dapat digunakan, dan bagaimana fungsinya saling berhubungan
Perbaiki kesalahan saat Anda membuat kode
Saat Anda membuat kode, Visual Studio Code memberi Anda saran untuk menyelesaikan baris kode dan perbaikan cepat untuk kesalahan umum. Anda juga dapat menggunakan debugger di VS Code untuk menelusuri setiap baris kode dan memahami apa yang terjadi. Lihat panduan tentang cara menggunakan debugger jika Anda membuat kode dengan Python, , dan
Jadikan milik Anda dengan tema dan warna khusus
Anda dapat mengubah tampilan dan nuansa VS Code dengan memilih font dan ikon favorit Anda dan memilih dari ratusan tema warna. Lihat video ini tentang personalisasi VS Code
Bandingkan perubahan dalam kode Anda
Gunakan kontrol sumber bawaan untuk menyimpan pekerjaan Anda dari waktu ke waktu sehingga Anda tidak kehilangan kemajuan. Lihat tampilan grafis berdampingan untuk membandingkan versi kode Anda dari titik waktu yang berbeda. Lihat video singkat ini tentang cara mendapatkan "diff" berdampingan
Kode di dalam Notebook
Jika Anda ingin mencoba proyek dalam ilmu data atau visualisasi data, Anda dapat menggunakan notebook Jupyter di dalam VS Code. Jalankan kode Anda selangkah demi selangkah, dan visualisasikan serta berinteraksi dengan data, variabel, grafik, dan plot Anda. Lihat tutorial ini tentang cara bekerja dengan Notebook Jupyter di dalam VS Code
Melihat. js adalah perpustakaan JavaScript yang populer untuk membangun antarmuka pengguna aplikasi web dan Visual Studio Code memiliki dukungan bawaan untuk Vue. js blok bangunan HTML, CSS, dan JavaScript. Untuk Vue yang lebih kaya. js, Anda dapat menginstal ekstensi Vetur yang mendukung Vue. js IntelliSense, cuplikan kode, pemformatan, dan lainnya
Selamat datang di Vue
Kami akan menggunakan Vue CLI untuk tutorial ini. Jika Anda baru menggunakan Vue. js, Anda dapat menemukan dokumentasi dan tutorial yang bagus di vuejs. situs web org
Untuk menginstal dan menggunakan Vue CLI serta menjalankan server aplikasi Vue, Anda memerlukan Node. js JavaScript runtime dan npm [Node. manajer paket js] diinstal. npm disertakan dengan Node. js yang dapat Anda instal dari Node. unduhan js
Tip. Untuk menguji apakah Anda memiliki Node. js dan npm terpasang dengan benar di mesin Anda, Anda dapat mengetik
node --version
dannpm --version
Untuk menginstal vue/cli
_, di terminal atau tipe prompt perintah
npm install -g @vue/cli
Ini mungkin memakan waktu beberapa menit untuk menginstal. Anda sekarang dapat membuat Vue baru. js aplikasi dengan mengetik
vue create my-app
_di mana my-app
adalah nama folder untuk aplikasi Anda. Anda akan diminta untuk memilih prasetel dan Anda dapat mempertahankan [babel, eslint]
default, yang akan menggunakan Babel untuk mengubah JavaScript ke ES5 yang kompatibel dengan browser dan menginstal linter ESLint untuk mendeteksi kesalahan pengkodean. Mungkin perlu beberapa menit untuk membuat aplikasi Vue dan menginstal dependensinya
Mari kita jalankan aplikasi Vue kita dengan cepat dengan menavigasi ke folder baru dan mengetik
vue create my-app
0 untuk memulai server web dan membuka aplikasi di browsercd my-app
npm run serve
Anda akan melihat "Selamat datang di Vue Anda. Aplikasi js" di http.js. // localhost. 8080 di browser Anda. Anda dapat menekan Ctrl+C untuk menghentikan server
vue create my-app
1. Untuk membuka aplikasi Vue Anda di VS Code, dari terminal [atau command prompt], arahkan ke folder my-app
dan ketik
vue create my-app
3cd my-app
code .
_VS Code akan diluncurkan dan menampilkan aplikasi Vue Anda di File Explorer
Ekstensi vektor
Sekarang perluas folder
vue create my-app
_4 dan pilih file vue create my-app
5. Anda akan melihat bahwa VS Code tidak menampilkan penyorotan sintaks apa pun dan memperlakukan file sebagai Teks Biasa seperti yang Anda lihat di Bilah Status kanan bawah. Anda juga akan melihat pemberitahuan yang merekomendasikan ekstensi Vetur untuk jenis file vue create my-app
6Ekstensi Vetur memasok Vue. fitur bahasa js [penyorotan sintaks, IntelliSense, cuplikan, pemformatan] ke VS Code
Dari notifikasi, tekan Pasang untuk mengunduh dan memasang ekstensi Vetur. Anda akan melihat pemasangan ekstensi Vetur di tampilan Ekstensi. Setelah penginstalan selesai [mungkin perlu beberapa menit], tombol Instal akan berubah menjadi tombol roda gigi Kelola
Sekarang Anda akan melihat bahwa
vue create my-app
_6 adalah jenis file yang dikenali untuk bahasa Vue dan Anda memiliki fitur bahasa seperti penyorotan sintaks, pencocokan braket, dan deskripsi arahkanIntelliSense
Saat Anda mulai mengetik
vue create my-app
_5, Anda akan melihat saran atau penyelesaian cerdas baik untuk HTML maupun CSS tetapi juga untuk Vue. js item khusus seperti deklarasi [vue create my-app
9, cd my-app
npm run serve
0] di bagian Vue cd my-app
npm run serve
1dan properti Vue [
cd my-app
npm run serve
2, cd my-app
npm run serve
3] di bagian cd my-app
npm run serve
4Pergi ke Definisi, Intip definisi
VS Code melalui layanan bahasa ekstensi Vue juga dapat memberikan informasi definisi tipe di editor melalui Go to Definition [ F12 ] atau Peek Definition [ ⌥F12 [Windows Alt+F12 , Linux Ctrl+Shift+F10 ] ]. Letakkan kursor di atas
cd my-app
npm run serve
_5, klik kanan dan pilih Peek Definition. A akan terbuka menunjukkan definisi cd my-app
npm run serve
_5 dari cd my-app
npm run serve
7. Tekan Escape untuk menutup jendela Peek.
Halo Dunia
Mari perbarui aplikasi sampel ke "Hello World. ". Di
vue create my-app
5 ganti komponen HelloWorld cd my-app
npm run serve
9 teks atribut khusus dengan "Hello World. "