🚨 🍒 🗼 Editor Kode Kode Visual Studio. Panduan paling terperinci untuk menyiapkan dan memasang plugin untuk pemula ⭐️ 🔄 🐟

Gratis, kuat, sangat populer, dengan banyak add-on, apa yang bisa saya katakan, Facebook sendiri memilihnya sebagai editor utama!

Hari ini kita akan fokus pada editor kode Visual Studio Code atau hanya VS Code. Kami akan menginstalnya, mengkonfigurasinya, dan juga menggunakan plugin yang akan sangat menyederhanakan pekerjaan kami.

Jika editor kode Sublime Text 3 lebih menarik, artikel di sini https://habr.com/en/post/458206/

Kandungan:

Menghapus

Jika Anda sudah menggunakan Kode VS, tetapi memutuskan untuk memulai dari awal, maka saya akan menunjukkan cara menghapus program sepenuhnya, termasuk semua pengaturan dan plugin. Selain fakta bahwa program perlu dihapus dari panel kontrol Windows, Anda juga harus pergi ke Drive C> Pengguna> Nama pengguna Anda dan menghapus folder .vscode di sini.

AppData harus ditambahkan di bilah jalur, lalu buka folder Roaming dan di sini Anda perlu menghapus folder Kode.

Instalasi

Ok, sekarang kita bisa menginstal program. Buka situs web code.visualstudio.com , bagian Unduh. Ada versi untuk Mac, Linux. Saya tertarik dengan Windows. Klik dan unduh ke PC Anda. Omong-omong, situs web program ini sangat berguna, jadi saya menyarankan Anda untuk mempelajarinya.

Program ini diunduh, jalankan penginstal dan ikuti instruksi: terima, tambahkan semua tanda centang, lalu tunggu sampai program diinstal pada PC kita.

Berjalan di mesin yang lemah

Ketika program diinstal, kita dapat memulainya. Tetapi itu tidak akan mulai di setiap komputer. Faktanya adalah bahwa program ini cukup banyak sumber daya. Oleh karena itu, pada mesin yang lemah, Anda bisa mendapatkan hasil ini: alih-alih antarmuka program, layar hitam, dan prosesor berkeringat 100%. Tetapi ada jalan keluar - Anda harus membuka menu konteks pintasan program dan menambahkan tanda berikut di jalur ke file: --disable-gpu

Great, sekarang program akan mulai bahkan pada kalkulator.

Pengaturan bahasa

Program ini diluncurkan dan kita bisa mulai mengenalnya. Dan untuk membuatnya lebih mudah untuk mengenal, saya akan menginstal bahasa Rusia. Untuk melakukan ini, saya klik pada ikon ekstensi.Di bidang pencarian, saya mulai menulis bahasa Rusia sampai saya melihat Paket Bahasa Rusia untuk paket Kode Visual Studio.

Saya klik tombol Install. Selanjutnya, program akan meminta Anda untuk me-restart, lakukan ini. Hebat, sekarang akan jauh lebih jelas. Tetapi, jika Anda berbicara bahasa Inggris, maka beralih ke bahasa Rusia tidak perlu.

Layar Selamat Datang

Saya akan menyembunyikan panel samping untuk saat ini, kami akan kembali ke sana lebih dari sekali.
Hal pertama yang kita lihat adalah layar pembuka. Ada item di sini yang dengannya kita dapat mengimpor semua pengaturan, kunci dari editor yang sudah diinstal, misalnya Vim, Sublime, Atom dan lainnya.

Ini akan sangat mempercepat dan memfasilitasi transisi dari satu editor ke editor lainnya. Tapi hari ini kita akan melakukan semuanya dari awal. Selanjutnya, ada tautan bermanfaat lainnya - Informasi umum tentang antarmuka, serta daftar pintasan keyboard dalam bentuk yang sangat nyaman dan banyak lagi.

Saya menyarankan Anda untuk mempelajari layar ini, dan ketika itu tidak lagi diperlukan setiap kali Anda memulai program, Anda perlu menghapus centang pada kotak centang ini. Kemudian, Anda selalu dapat memanggilnya dari menu Bantuan> Ucapan.

Antarmuka di luar kotak

Terlalu malas membaca? Ini adalah versi videonya.

Semua persiapan telah dilakukan dan sekarang kita dapat membiasakan diri dengan antarmuka program dan pada saat yang sama melihat apa yang dapat dilakukan Kode VS di luar kotak.

Kami memanggil jendela informasi antarmuka umum dan melihat elemen-elemen utama program.

Di atas kita melihat menu. Berikutnya adalah antarmuka eksekusi dari perintah apa pun yang selalu dapat kita panggil. Area umum editor. Bilah tindakan kiri. Di bawah ini adalah bilah status, dan kita akan mulai dengan itu. Tips memberi tahu kami bahwa ada Tampilan kesalahan dan peringatan. Anda dapat menghubungi terminal built-in.

Mari kita pertimbangkan semua lebih detail.

Status bar

Masalah

Di sisi kiri, angka-angka di sebelah ikon akan menampilkan jumlah kesalahan dan peringatan yang muncul selama eksekusi kode.

Untuk membuka panel, Anda perlu mengklik ikon-ikon ini atau menahan Ctrl + Shift + M , di sini kita akan melihat teks dari pesan kesalahan.

Di panel, Anda dapat memfilter pesan-pesan ini, meminimalkannya, memperluas seluruh panel ke layar penuh, atau menutupnya.

Konsol debug

Selain tab untuk keluaran masalah di panel ini, kami masih memiliki Konsol Pen debug, kami akan kembali ke sana.

Kesimpulan

Log keluaran dari pekerjaan semua program dan sistem editor. Di sini Anda juga dapat memfilter log ini, menghapusnya, memblokir gulir pesan, membuka panel atau menutupnya.

Terminal

Tab terakhir di panel ini adalah terminal terintegrasi. Anda dapat memanggilnya dengan menahan Ctrl + ` .

Di Panel Kontrol, Anda juga dapat menambahkan terminal, membagi jendela menjadi beberapa bagian, menghapus jendela terminal, beralih di antara jendela terminal, dan juga memilih shell default.

Misalnya, saya memasang GitBash. Memilihnya, menambahkan jendela terminal baru, antarmuka ini akan terbuka untuk saya. Secara tradisional, di sini Anda dapat memperluas panel ke layar penuh dan menutupnya.

Notifikasi

Di sebelah kanan di bilah status kita melihat pemberitahuan, sekarang tidak ada. Dimungkinkan juga untuk mengirim tweet dengan umpan balik tentang program ini.

Juga, banyak item lain akan muncul di bilah status.

Menu konteks

Kami juga dapat memanggil menu konteks dan menghapus dari baris ini apa yang tidak kami gunakan. Misalnya, review tweet untuk memberi ruang.

Juga dalam menu konteks yang sama kita dapat menyembunyikan baris ini sepenuhnya.

Bilah tindakan

Secara default, panel tindakan dengan 6 elemen terletak di bagian kiri editor:

Explorer, ini adalah pengelola file bawaan;
Cari;
Sistem manajemen kontrol versi;
Meluncurkan dan men-debug aplikasi;
Pemasang untuk berbagai add-on adalah editor kami;
Di bagian bawah ada roda gigi, mengklik di mana kita akan melihat menu pengaturan program utama.

Konduktor

Mari kita mulai dengan Explorer, dapat dibuka dengan mengklik ikon atau terus ke bawah Ctrl + Shift + E .

Sangat nyaman bahwa ketika Anda mengarahkan kursor ke ikon, editor meminta kami dengan pintasan keyboard.

Di sini kita melihat 3 tab utama:

Buka editor - di sini akan ada daftar file yang terbuka untuk diedit.
Tab dengan folder, proyek. Sekarang kami tidak memiliki folder terbuka.
Strukturnya - sekarang tidak ada apa-apa di sini, kita akan kembali lagi nanti.

Jendela Selamat Datang sudah bisa kita tutup. Ketika semua jendela ditutup, editor menampilkan tulisan rintisan di mana ia menunjukkan pintasan keyboard untuk tindakan utama:

Mari kita tambahkan folder kosong ke proyek masa depan kita di editor. Untuk melakukan ini, klik Buka Folder atau cukup seret ke bidang ini.

Sekarang kita memiliki folder hello_vscode kosong, serta beberapa kontrol:

Buat file;
Buat folder;
Perbarui semua file dan folder;
Perkecil semua yang ada di Explorer.

Mari kita buat beberapa file yang kita butuhkan untuk proyek ini. Klik Buat file, tulis misalnya Index.html. Selanjutnya, kita dapat membuat folder css dan membuat file style.css di dalamnya. Sangat nyaman menggunakan pengelola file bawaan ini.

Anda juga dapat menggunakan menu konteks untuk membuat file dan folder. Selain itu, ada juga fitur menarik, misalnya, memperlihatkan folder di Windows Explorer.

Sekarang kita dapat pergi ke Index.html dan menulis sesuatu yang menarik di sana, misalnya, "Hello VC Code".

Penyorotan sintaksis

Hanya ingin mengatakan beberapa kata tentang penyorotan sintaksis - ini adalah kemampuan editor untuk mengenali kode dan mewarnai elemen individualnya. Ketika kami membuka file dan mulai bekerja di dalamnya, elemen html muncul di bagian bawah bilah status di samping elemen baru lainnya. Ini berarti bahwa editor telah mengenali bahasa dan menyorotnya sesuai. Mengklik pada elemen ini, kita akan melihat daftar besar highlight untuk berbagai bahasa.

Daftar ini mungkin tidak termasuk semuanya. Misalnya, jika kita bekerja dengan file .kit. Mari kita buat index.kit dan salin kode kita di sana. Kita akan melihat bahwa tidak ada penyorotan, dan alih-alih elemen html kita melihat teks teks biasa. Apa yang harus dilakukan dalam kasus ini? Kita perlu mengklik teks biasa dan di sini kita punya pilihan - alih-alih deteksi otomatis, kita dapat mencoba mencari pengaya untuk penyorotan sintaksis khusus untuk file .kit.

Jika ini tidak berhasil, maka kami dapat mengonfigurasi pemetaan. Klik di sini dan pilih bahasa pemetaan untuk file .kit. Dalam kasus saya ini adalah html.

Sekarang semua file .kit program akan dikenali sebagai file html dan sorot sesuai. Mari kita kembali ke file html asli kita. Kami akan menyimpan semua yang kami edit di sini. Hasil pekerjaan dapat dilihat dengan membuka file ini di browser. Pada tab struktur, kita akan melihat bahwa struktur pohon dokumen kita telah muncul.

Fitur tambahan yang bermanfaat dari penjelajah adalah menu Konteksnya, di mana kita dapat menampilkan atau menyembunyikan tab apa pun. Sebagai contoh, saya akan menghapus struktur dan menghapus editor terbuka.

Akibatnya, saya hanya akan memiliki folder proyek.

Cari

Cari ( Ctrl + Shift + F ) - hal yang Anda butuhkan. Kami menulis kata halo, yang kami tunjukkan dalam file html kami. Pencarian segera menemukannya, disorot, ditampilkan di file mana. Anda dapat segera mengganti kata ini dengan yang lain.

Lebih mudah bagi kami untuk menunjukkan semua ini dengan mengklik di sini pada ikon kata itu akan diganti.

Sistem Manajemen Kontrol Versi

Buka tab Anda dapat mengklik ikon atau terus ke bawah Ctrl + Shift + G . Bagi mereka yang sudah terbiasa dengan sistem kontrol versi, seperti Git, dia akan menghargai fitur ini. Beberapa saat kemudian saya akan menunjukkan cara menautkan proyek lokal saya dengan repositori di GitHub.

Aplikasi debugging

Item berikutnya di bilah tindakan adalah Men-debug aplikasi. Alat ini, baik secara mandiri maupun dengan bantuan plug-in pihak ketiga, memungkinkan kami untuk menganalisis eksekusi kode program tertentu.

Sebagai contoh, kami memiliki semacam kode javascript, dan untuk memulai debugging, kita dapat mengklik tombol di sini atau menekan F5.

Hasil debugging akan ditampilkan di panel bawah, Anda juga dapat mengatur apa yang disebut breakpoint kode dan bergerak di antara mereka, yang sangat nyaman.

Ekstensi

Di sini kami memiliki seluruh gudang ekstensi dan plugin untuk editor kami. Kami telah menggunakan tab ini untuk menginstal paket bahasa. Kami mengklik ikon atau menahan kombinasi tombol Ctrl + Shift + X kita akan melihat bidang pencarian untuk ekstensi dan tiga tab tambahan:

Diaktifkan - semua ekstensi yang diinstal ditampilkan;
Direkomendasikan
Ekstensi yang diinstal tetapi dinonaktifkan.

Pada tab dengan ekstensi yang dipasang, kami memiliki akses cepat ke sana, kami dapat melihat, membaca beberapa informasi, tombol pintas, mencari tahu semua detail tentang ekstensi ini. Juga, itu dapat dihapus di sini dengan mengklik tombol Hapus. Kami akan kembali ke ekstensi dan menginstal yang terbaik dan paling berguna dari mereka.

Pengaturan

Di panel aksi, kami masih memiliki satu elemen lagi - roda gigi - menu pengaturan utama. Di sini kita dapat memanggil palet perintah dengan mengklik di sini atau Ctrl + Shift + P . Blok akan terbuka di mana kita dapat menemukan dan menjalankan perintah editor atau plugin yang diinstal.

Pintasan keyboard lebih lanjut. Di sini kita dapat menyesuaikan pintasan keyboard untuk perintah atau mengubah yang ada. Kami akan kembali kepada mereka. Cuplikan kode khusus, yang disebut cuplikan, adalah singkatan kecil yang akan menyebabkan fragmen kode yang kita butuhkan. Hari ini kita akan belajar cara mengkonfigurasi mereka. Di sini Anda dapat menyesuaikan tema warna program, ikon untuk file dan banyak lagi.

Menyelesaikan dengan Action Bar, perlu dicatat bahwa Anda dapat dengan cepat memanggil tab terbuka terakhir dengan Ctrl + B. Juga, menyembunyikan menu konteks, Anda dapat menyembunyikan item yang tidak perlu. Misalnya, saya akan menyembunyikan Start dan Debug. Di menu konteks yang sama, Anda bisa menyembunyikan seluruh bilah tindakan.

Area Editor

Terlalu malas membaca? Ini adalah versi videonya.

Kami melihat tab dengan file yang terbuka. Mereka dapat diseret, ditutup. Jika file tersebut tidak disimpan, maka tempat salib akan menampilkan titik tebal yang besar di sini. Di sebelah atas adalah ikon jendela pecah. Ada file aktif terbuka, klik pada ikon dan itu akan digandakan di samping.

Ada menu tambahan untuk mengelola semua file.

Di bawah ini kita melihat bilah navigasi - remah roti, di mana kita dapat dengan mudah menavigasi struktur dokumen, serta di antara file-file lain.

Area umum kode - kita melihat kode file yang terbuka itu sendiri, dan di sebelah kanan ada peta mini yang memungkinkan Anda untuk menavigasi file yang panjang dengan nyaman. Ada ruang kecil di area kode di sebelah kiri, untuk mengatur breakpoint untuk debugging kode, ada penomoran baris.

Selanjutnya kita melihat panah, mereka muncul ketika Anda membawa, dengan bantuan mereka Anda dapat menutup seluruh blok kode. Di editor ini, fungsi ini berfungsi dengan memori. Saya dapat menutup file, bahkan menutup seluruh program, dan ketika saya membukanya lagi, blok yang sebelumnya diperkecil akan tetap diminimalkan.

Apa yang bisa kita konfigurasi di sini?

Seperti yang telah saya tunjukkan, jendela editor dapat dibagi menjadi beberapa bagian, ini nyaman ketika bekerja dengan file yang berbeda. Untuk melihat opsi yang berbeda, Anda harus pergi ke View> Editor Layout . Ada banyak opsi di sini, misalnya, dua baris, dan kita dapat memindahkan file di sini dan bekerja seperti ini. Ada juga opsi kisi 2x2. Artinya, Anda dapat bekerja secara bersamaan dengan 4 file.

Anda juga dapat dengan cepat mengatur posisi file yang diinginkan hanya dengan menarik dan menjatuhkannya. Saya segera membentuk tata letak yang tepat untuk diri saya sendiri. Dimungkinkan juga untuk menyesuaikan tampilan seluruh area editor. Buka Menu> Tampilan> Tampilan .

Di bawah ini ada kemampuan untuk menyesuaikan skala seluruh program. Jangan bingung dengan ukuran font. Lebih mudah menggunakan pintasan keyboard. Sebagai contoh, untuk menambah elemen saya tekan Ctrl + , untuk mengurangi - Ctrl- , untuk mengatur ulang - Ctrl + 0 .

Anda dapat memindahkan panel tindakan dari kiri ke kanan dan kemudian di sisi lain. Anda dapat menentukan posisi panel bilah status kami. Dengan mengklik, kita akan melihat bahwa panel tidak akan lagi terbuka dari bawah seperti sebelumnya, tetapi dari samping. Artinya, dimungkinkan untuk mengkonfigurasi hampir semua hal.

Di blok ini Anda juga dapat menyembunyikan atau menampilkan elemen yang berbeda. Saya katakan sebelumnya bahwa kita dapat menyembunyikan seluruh baris pemberitahuan, sepenuhnya menyembunyikan bilah tindakan. Di blok ini kita bisa mengembalikan semua ini ke tempat itu.

Mode layar

Di bagian atas ada mode layar penuh ketika Anda menekan F11 . Menu atas, tombol untuk mengelola jendela program akan disembunyikan.

Penjajaran tengah tata letak. Area kode terpusat, Anda dapat mengatur lebarnya. Ini untuk lebih berkonsentrasi pada kode.

Ada mode Zen yang luar biasa. Itu menyembunyikan semua elemen, bahkan tab file, kami berkonsentrasi hanya pada satu file tunggal, pada satu kode. Kami menyelesaikan tugas sulit yang membutuhkan konsentrasi maksimal.

Untuk keluar, tekan Escape .

Pembungkus teks

Selanjutnya, dalam menu View, kita dapat mengaktifkan atau menonaktifkan membungkus teks, Anda dapat melakukannya dengan menahan Alt + Z . Apa artinya? Misalnya, kami memiliki teks yang sangat panjang yang tidak sesuai dengan area kode dan pengguliran horizontal muncul. Jika ini terasa tidak nyaman, Anda dapat menekan Alt + Z; semua teks kami akan dibungkus agar sesuai dengan area kode.

Dimungkinkan untuk menyembunyikan atau menampilkan minimap, kontrol, yaitu remah roti. Jika sepertinya tidak perlu. Di sini Anda dapat menampilkan ruang yang tidak dapat dicetak dan karakter yang dapat dicetak dan menggambar karakter kontrol yang dapat disalin dari sumber dalam teks.

Skema warna

Kita dapat memilih salah satu tema yang diinstal dengan pergi ke Office, arahkan tema Warna. Kita melihat daftar dan dengan panah pada keyboard kita dapat berpindah antar topik, memilih tema yang tepat untuk diri kita sendiri. Ada opsi gelap dan terang.

Jika tidak ada satu pun dari topik ini yang sesuai, kita dapat mengaturnya sendiri. Untuk melakukan ini, saya kembali ke tab Extensions, di bidang pencarian saya menulis nama tema saya - SpaceOceanKit. Saya menemukan, klik Instal. Selanjutnya, saya memiliki pilihan topik mana yang akan dipilih dan saya memilihnya.

Sekarang saya memiliki seluruh editor, termasuk kode, itu akan terlihat berbeda. Saya mengatur tema saya, Anda dapat menginstal yang lain.

Kombinasi warna sangat penting untuk pekerjaan jangka panjang dengan kode, ini mempengaruhi persepsi, kelelahan, dan kesehatan mata Anda. Jadi hati-hati pilih topik untuk diri sendiri dan jangan lupa istirahat.

Ikon

Kami juga dapat mengubah tampilan ikon untuk file di penjelajah kami. Untuk melakukan ini, buka Manajemen> Tema ikon file , di sini kita dapat mematikan ikon sepenuhnya atau memilih dari daftar.

Juga instal paket ikon tambahan. Misalnya, Matherial Icon Theme.

Parameter

Selain itu, Anda dapat menyesuaikan kenyamanan bekerja dengan kode dan dengan editor secara keseluruhan di Pengaturan Program. Untuk melakukan ini, buka Manajemen> Opsi atau tahan Ctrl +,

Parameter dapat dikonfigurasi baik secara global maupun untuk proyek tertentu. Ada banyak pengaturan di sini. Kami akan pergi melalui yang utama.

Penyimpanan otomatis

Opsi berguna pertama adalah penyimpanan otomatis file. Untuk pemula, pilihan yang sangat keren. Pemula sering mendatangi saya dengan masalah, "Mengapa pekerjaan saya tidak bekerja untuk saya?" Saya melihat, dan file tersebut tidak disimpan di sana.

Untuk mencegah hal ini terjadi, di sini Anda dapat mengubah nilainya menjadi satu dari tiga:

afterDelay - file akan disimpan setelah beberapa penundaan, yang dapat dikonfigurasi segera di sini di bawah ini. Jika Anda memilih opsi ini saat mengedit file, itu akan segera disimpan, titik tebal bahkan tidak akan muncul.
onfocusChange - file akan disimpan ketika kita pindah ke file lain
onWindowChange - ketika kita beralih ke program yang sama sekali berbeda, maka file tersebut akan disimpan secara otomatis.

Pilih opsi yang nyaman untuk diri Anda dan lanjutkan.

Tampilan kode

Opsi berikut akan membantu Anda mengatur tampilan kode yang nyaman. Ini adalah ukuran font dan font family. Di sini Anda dapat memilih nilai yang cocok untuk Anda.

Saya menyesuaikan ukuran lekukan saat menabrak. Secara default, adalah 4. Sedangkan bagi saya, bidang terlalu lebar dengan satu Tab, jadi saya mengubahnya menjadi 3, jadi sepertinya lebih ringkas bagi saya. Anda menunjukkan nilai yang nyaman bagi Anda.

Dalam satu file, spasi ditampilkan untuk saya, titik-titik ketika Tab ditekan, di yang lain - ikon tab. Parameter Sisipkan Spasi bertanggung jawab untuk opsi ini. Secara default, tanda centang ditetapkan, yaitu spasi akan ditampilkan. Saya ingin tab saya ditampilkan, jadi saya akan menghapus tanda centang.

Untuk mengonversi file yang ada dengan spasi, Anda dapat pergi ke bilah status, tekan 4 spasi dan pilih opsi Konversi indent ke langkah tab. Dengan demikian kita dapat mengonversi file yang sudah dibuka.

Dan opsi Deteksi Indentasi menjawab bagaimana menentukan penyisipan karakter untuk file terbuka baru. Saya akan menghapus tanda centang karena saya ingin pengaturan saya yang dikonfigurasikan berfungsi untuk semua file.

Sembunyikan tooltips

Sebelumnya, saya menunjukkan bahwa ketika Anda mengarahkan kursor ke suatu elemen dalam kode, tooltips muncul, seringkali ini bisa mengganggu. Untuk menghapus petunjuk, ada parameter Arahkan Diaktifkan . Tanda centang dapat dihapus dan konfirmasi menghilang.

Namun, seiring dengan ini, fungsi yang mungkin berguna akan hilang.
Sebagai contoh, dalam stylesheet kita memiliki warna biru. Ini disorot segera. Jika Hover dinyalakan, maka ketika Anda mengarahkan kursor ke warna, hal seperti itu jatuh:

Kita dapat membuatnya transparan, menetapkan nilai rgba, atau bahkan mengubah warna ke warna lain. Jika kami menghapus centang pada kotak centang Diaktifkan Diaktifkan, maka fungsi ini juga hilang.

Parameter Dekorator Warna bertanggung jawab atas output, jika tidak diperlukan, tanda centang dapat dihapus dan tidak akan ada kotak warna.

Zoom Roda Mouse - dengan mencentang kotak, kita dapat mengubah ukuran font di editor dengan menahan Ctrl dan memutar roda mouse .

Tutup Grup Aktif mengontrol apakah grup akan ditutup ketika tab terakhir di dalamnya ditutup. Editor dapat dibagi menjadi beberapa bagian. Secara default, saat menutup tab terakhir, seluruh tab akan ditutup. Terkadang ini tidak nyaman, jadi saya menghapus tanda centang ini. Dan sekarang, ketika menutup tab terakhir, grup masih akan tetap bersamaku.

Memformat

Grup pengaturan berikutnya bertanggung jawab untuk memformat, yang sudah ada di dalam editor Kode VC. Apa itu pemformatan? Sebagai contoh, kita menulis struktur, ada struktur lain di dalamnya, tetapi karena suatu alasan tab telah pindah. Ketika Anda menahan Shift + Alt + F , semuanya akan berbaris sebagaimana mestinya.

Kembali ke pengaturan kami. Di sini kita dapat menaruh tiga tanda centang:

Format Pada Tempel - pemformatan akan dilakukan secara otomatis ketika Anda menempelkan kode.
Format Pada Simpan - pemformatan akan dilakukan ketika file disimpan.
Format Pada Jenis - format akan otomatis, yaitu, kami akan mencetak dan semuanya akan diformat sekaligus.

Saya menetapkan satu tanda centang - Pemformatan saat menyimpan.
Sekarang, ketika tab berhenti, saya tidak memperhatikan, pada saat menyimpan file semuanya akan berada di tempatnya.

Anda dapat membuat penyesuaian yang lebih baik untuk pemformatan bahasa tertentu dengan memahami dokumentasi di situs web program. Anda juga dapat memasang ekstensi tambahan untuk bahasa tertentu, serta banyak lainnya.

Saya menunjukkan bagian pengaturan yang saya gunakan sendiri. Anda dapat membiasakan diri dengan sisa pengaturan itu sendiri. Untuk kenyamanan, pengaturan di sini dibagi menjadi beberapa kategori. Ada juga kategori pengaturan untuk ekstensi yang sudah diinstal atau yang hanya kami pasang.

Untuk akses cepat ke semua yang telah kami konfigurasi, tahan Ctrl + Shift + P dan tulis di bilah pencarianPengaturan sampai kita melihat Pengaturan (JSON). Kami klik dan pengaturan kami akan muncul di depan kami, Anda dapat segera mengubahnya.

Dalam file yang sama kami akan mengkonfigurasi ekstensi baru.

Kenyamanan ketika bekerja dengan program ini sangat penting, karena ini secara langsung mempengaruhi kinerja. Hal berikutnya yang akan kita lakukan adalah memasang sejumlah plugin yang akan membantu kita secara substansial dalam hal ini.

Plugin

Terlalu malas membaca? Ini adalah versi videonya.

Semut

- Plugin ini sudah dibangun ke dalam editor Kode VS di luar kotak. Memang, hari ini sulit membayangkan hidup tanpa Emmet. Kecepatan super mengetik. Sebagai contoh, itu berkat dia sehingga saya dengan cepat membuat kode awal untuk file HTML dengan menulis hanya tanda seru dan menekan Tab.

Ini adalah contoh lain. Kita perlu membuat div dengan kelas blok untuk ini, saya menulis .block dan tekan Tab. Selesai!

Atau misalnya lebih rumit - kita perlu membuat daftar berpoin 10 elemen. Tulis ul> li * 10 Tab. Selesai!

Hal yang sama berlaku untuk file gaya. Misalnya, untuk tag body, saya ingin mengatur ukuran font menjadi 20 piksel. Untuk melakukan ini, cukup bagi saya untuk menulis fz20 . Dengan menekan Tab, saya mendapatkan parameter yang sudah jadi.

Anda dapat mempelajari lebih lanjut tentang fitur Emmet di situs add-on ini.

Cuplikan

Tetapi lebih keren lagi untuk membuat pintasan snippet Anda sendiri untuk dengan cepat memanggil potongan kode lainnya.
Buka Manajemen> Cuplikan Kode Kustom . Ada pilihan:

Buat cuplikan untuk bahasa tertentu;
Buat cuplikan untuk semua bahasa, tetapi untuk proyek tertentu;
Buat cuplikan global untuk semua bahasa dan untuk semua proyek.

Mari kita buat yang global, di sini Anda harus memasukkan nama daftar snippet.

Saya mengetikkan saya, klik dan file my.code-snippets terbuka. Ada informasi yang dikomentari, serta sebuah contoh. Saya akan menghapus komentarnya. Ini cuplikan untuk JavaScript.

. scope — . , . — , , . body . console.log description, .

: , . , css .

— “ ”, . , mm. body «margin: 0px, 0px, 0px 0px;», mm . Ctrl+S .

style.css mm Tab. , , .

, . js, log Tab.

, , $1 $2. $1. Tab, $2. .

, , , .

. Ctrl+Shift+X .

Live Sass Compiler

, SASS/SCSS. Install. , , , . , .

Watch Sass. .

scss , . style.scss.
:
```
body{
	font-size: 20 px;
	div{
		font-size: 10 px;
	}
}		
```
, Watch Sass scss\sass . style.css style.css.map.

. , , , scss, css.

. Shift+Ctrl+P, Settings (JSON). , .
```
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
	{
		"format": "expanded",
		"autoprefix": "last 5 versions",
		"extensionName": ".css",
		"savePath": "css"
	}
],
```
-, -. . «format» — , scss — , , ..

— css . . — css. css, .

, . , - - , css , style.css. , .

, style.scss. , scss - . , — import «header.scss»

, . …

? header.scss header.css. , style.css, header, , . header, . , header.scss, , .

, . , , header.css, . :)

Live Server

Live Css Compiler Live Server — , . Live Css Compiler, Live Server .

, , Live Css Compiler. Go Live. , , index.html Go Live .

html , “Hello”, , GoLive .

, . . link, link.css, . , .

, , , . , .

SCSS IntelliSense

SaSS. SCSS IntelliSense, scss, .

SCSS Formatter

. sss . .

Auto Complete Tag

Auto Rename Tag Auto Close Tab. , VS Code , Auto Close Tab — html, . Auto Rename Tag — , . , span , .

Bracket Pair Colorizer

, — , , . . , , . , , , .

Indent Rainbow

, , , , SaSS pug, .

Better Comments

. , , .. , , - , .

- —! — , ToDO — , —? — .

, , .

, .
Color, - .

BEM Helper

BEM. bem, , . , , - css scss bem- html .

. Alt+B+E, , , .

?

.
. , > BEM Helper.

, Insert Element. , , .

, . , , - .

eCSStractor

, html css\scss\sass. , . > , eCSStractor, . eCSStractor Run (With BEM Nesting).

, , Ctrl+Alt+1, Enter, .

: html , , Ctrl+Alt+1, , .

. , .

, , BEM? Ctrl+Alt+2 .

, , . , — BEM BEM.

CSS Navigation

, . -, .
, red. html, . r , .

. , F12 . , , .

, , - , . F12 , , , html-.

Alt + F12

Image Preview

. , . html-, , , . , , , .

Debugger for Chrome

, - . F5 Chrome, , .

Vscode Google Translate Google Translate

. , translate text.

, , , Shift+Alt+T.
html , hello, Shift+Alt+T . , .

, > , , , , .

, (Preffered). , Shift+Alt+T . .

Project Manager

, , .. . Project Manager.

, , . . , , Project Manager .

Settings Sync

, , Windows, Settings Sync.

, GitHub .
, GitHub, , .

, , . , .

, . Shift+Alt+U.

. , , , , .

.

, Settings Sync. , GitHub. .

. , , — Shift+Alt+D.

, , - . , , , . , — . , , , .

. , .

( ) :
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
Settings Sync

GITHub

? .

! Git.

, +, , .

. +, .

, , -, Enter. GitHub. , , . :

git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git git push -u origin master

, . , . , , , . , Enter.

, . Git. - , 1, 1 , , . > .

GitHub, , GitHub.

GitLens, .

, , — , — .

, , — , !

VS Code " "