Cosima telah menjadi editor di SmashingMag sejak 2013. Setiap kali dia tidak sedang menulis artikel untuk Buletin Smashing mingguan, dia mungkin sedang mengerjakan … Selengkapnya tentang Cosima ↬ Show
Buletin EmailEmail (menghancurkan) Anda
Kiat mingguan tentang front-end & UX
Kami menghabiskan begitu banyak waktu di editor teks kami, dan sesekali kami menemukan masalah kecil yang membuat kami frustrasi yang memperlambat kami. Mungkin menemukan file yang tepat membutuhkan waktu terlalu lama, atau menemukan braket penutup yang cocok menjadi petualangan yang bertele-tele Mari kita perbaiki semua gangguan ini untuk selamanya. Dalam posting ini, kami melihat ekstensi VS Code yang berguna untuk pengembangan front-end, dari pemacu produktivitas yang baik hingga pembantu debugging tingkat lanjut Daftar isiDi bawah ini Anda akan menemukan lompatan cepat ke ekstensi tertentu yang mungkin Anda perlukan. Gulir ke bawah untuk ikhtisar umum. Atau Mengotomatiskan Pesan LogKetika berbicara tentang mencatat pesan, ekstensi turbo-konsol-log mendukung Anda. Ini mengotomatiskan operasi penulisan pesan log yang bermakna dan menyisipkannya secara otomatis Yang perlu Anda lakukan hanyalah memilih variabel yang ingin Anda debug, tekan Ctrl + Alt + L, dan pesan log akan disisipkan di baris berikutnya. Pintasan keyboard memungkinkan Anda mengomentari, menghapus komentar, atau menghapus semua pesan log dari dokumen saat ini Menjaga Ukuran Bundel TerkendaliKita semua tahu bahwa kinerja itu penting, tetapi dalam praktiknya, ini bisa menjadi tantangan yang cukup sulit untuk tidak kehilangannya saat Anda sedang dalam alur penulisan kode. Agar ukuran bundel Anda tetap terkendali, ekstensi Biaya Impor memungkinkan Anda segera mengetahui jika Anda mengimpor paket besar dan kuat ke proyek Anda Biaya Impor bukan alat analisis bundel tetapi dibangun dengan ide untuk membantu Anda menemukan kemungkinan kemacetan kinerja sebelum Anda mengirimkannya ke pengguna Anda. Untuk melakukannya, ini memberi Anda umpan balik instan dengan menampilkan ukuran pustaka pihak ketiga yang diimpor saat Anda mengimpornya, tepat di sebelah baris kode Anda. Pembantu kecil yang berguna Pemformatan Kode, OtomatisSaat menulis kode, banyak waktu dihabiskan untuk memformat. Prettier mengotomatiskan tugas untuk Anda. Ini menghapus semua gaya asli dan memastikan bahwa kode yang dihasilkan sesuai dengan gaya yang konsisten Prettier mem-parsing kode Anda dan memformat ulang dengan aturannya sendiri, memperhitungkan panjang baris maksimum dan membungkus kode bila perlu. Anda memutuskan apakah Anda ingin menerapkannya ke semua bahasa atau sebagai alternatif, Anda dapat menentukan bahasa yang Anda sukai untuk diformat secara manual. Juga solusi hebat untuk tim yang kesulitan menemukan panduan gaya umum Cuplikan Kode yang Berguna (React, Vue, TypeScript, jQuery)Apakah Anda lelah mengetik potongan yang sering Anda butuhkan berulang-ulang, selalu dari awal? . Untuk Vue, pastikan untuk memeriksa Vue Sarah Drasner. Ekstensi js VS Cuplikan Kode. Itu dibangun untuk penggunaan dunia nyata dan berfokus pada ergonomi pengembang alih-alih membuat katalog definisi API Burke Holland memberi Anda kumpulan cuplikan dan perintah React penting yang dia pilih dari penggunaan React sehari-harinya. Dan jika Anda mencari cuplikan Angular, John Papa telah membantu Anda. Ekstensinya menambahkan cuplikan untuk Angular untuk TypeScript dan HTML ke penyiapan Kode VS Anda Keduanya mungkin juga berguna. Ekstensi cuplikan kode JavaScript oleh Charalampos Karypidis berisi cuplikan dalam sintaks ES6 dan mendukung JavaScript dan TypeScript. Dan, yang tak kalah pentingnya, cuplikan kode jQuery Don Jayamanne menampilkan lebih dari 130 cuplikan jQuery. Setelah terinstal, cukup ketik Berbicara tentang cuplikan. Jika Anda lebih suka perpustakaan cuplikan yang bagus daripada mendefinisikannya sendiri dari awal, koleksi ini mendukung Anda
Tulis Cuplikan Kode Anda SendiriAda banyak plugin cuplikan kode untuk berbagai bahasa di luar sana, tetapi pernahkah Anda bertanya-tanya bagaimana cara menentukan cuplikan Anda sendiri di VS Code? Artikel bagus lainnya tentang topik ini berasal dari Rob O'Leary. Dia mendalami lebih dalam tentang kapan dan mengapa menggunakan snippet, melihat lebih dekat berbagai jenis snippet, bagaimana VS Code menanganinya, dan, yang tak kalah pentingnya, bagaimana menulis sendiri, tentu saja Tangkapan Layar Kode, Cara MewahJujur saja, mengambil tangkapan layar kode yang bagus bisa menjadi tantangan. Polacode ada di sini untuk mengubahnya Digambarkan sebagai "Polaroid untuk kode Anda", Polacode memungkinkan Anda mengambil dan mengedit tangkapan layar kode Anda langsung di VS Code. Anda dapat mengubah ukuran wadah kode dengan menyeret sudut dan menggunakan perintah untuk mengontrol tampilan gambar. Solusi hebat untuk membuat kode yang telah Anda habiskan selama berjam-jam untuk bersinar dengan cara terbaik — misalnya di postingan blog atau presentasi Komentar Ramah ManusiaBagaimana Anda menangani komentar? Ekstensi VS Code Better Comments membantu Anda melakukan hal itu, mengategorikan anotasi menjadi peringatan, kueri, todo, sorotan, dan lainnya. Kode yang dikomentari juga dapat diberi gaya untuk memperjelas bahwa seharusnya tidak ada di sana Lebih banyak setelah melompat. Lanjutkan membaca di bawah ↓ Temui Smashing Workshops di front-end & UX, dengan takeaway praktis, sesi langsung, rekaman video, dan tanya jawab yang ramah. Pada sistem desain, UX, kinerja web, dan CSS/JS. Dengan Brad Frost, Christine Vallaure dan banyak lainnya Lompat ke bengkel ↬Debugging Chrome Di Dalam Kode VSApakah Anda menggunakan Chrome dan menemukan diri Anda bolak-balik antara browser dan editor Anda saat melakukan debug? . Ini membantu Anda men-debug kode JavaScript sisi klien yang berjalan di Chrome langsung dari VS Code Debugger terhubung ke Chrome melalui protokol Chrome Debugger yang memetakan file yang dimuat di browser ke file yang Anda buka di VS Code. Jadi tanpa meninggalkan editor, Anda dapat menyetel breakpoint dalam kode sumber, menyiapkan variabel untuk ditonton, dan melihat tumpukan panggilan lengkap saat melakukan debug. Alat kecil untuk membuat rutinitas debug Anda lebih mudah DevTools Untuk Ekstensi VSCodeBukankah keren memiliki DevTools terintegrasi ke dalam editor kode Anda sehingga Anda tidak perlu bolak-balik di antara keduanya? Ekstensi menunjukkan alat Elemen dan Jaringan browser di dalam VSCode, memberi Anda kemampuan untuk melihat struktur HTML runtime, mengubah gaya dan tata letak, melakukan diagnostik, dan men-debug proyek Anda — tanpa meninggalkan editor. Omong-omong, Rachel Weil membagikan beberapa tip DevTools praktis untuk bekerja dengan browser berbasis Chromium seperti Edge dan Chrome di SmashingConf San Francisco beberapa minggu lalu. Pastikan untuk mendengarkan rekaman untuk meningkatkan keterampilan DevTools Anda ke level berikutnya Utilitas Manajemen File untuk Kode VSBanyak waktu biasanya dihabiskan untuk mengatur dan mengelola file. File Utils membuat tugas lebih nyaman Ekstensi memungkinkan Anda untuk membuat, menggandakan, memindahkan, mengganti nama, dan menghapus file dan direktori hanya dengan beberapa perintah. Ini juga mendukung ekstensi brace yang secara otomatis menghasilkan string string acak untuk mengatur struktur dokumen Anda Menambahkan Tag ke File di Editor AndaDalam proyek besar, menemukan satu varian tertentu dari suatu komponen, atau file yang tepat mengharuskan Anda untuk mengetahui file yang sebenarnya Anda cari. Tetapi bagaimana jika Anda dapat menambahkan bookmark atau label ke file tertentu, sehingga Anda dapat menemukannya dengan lebih cepat? File Ops VS Code Extension memungkinkan Anda memberi tag dan file alias, lalu dengan cepat beralih di antaranya. Anda juga dapat dengan cepat membuat daftar semua tag jika Anda kehilangan jejaknya, lihat semua file dari direktori saat ini dan beralih di antaranya. css dan. js di folder yang sama. Anda juga dapat melihat video yang menjelaskan cara kerjanya. Sekarang itu akan berguna Ikon Folder Dalam Kode VSIkon file dan folder khusus dalam Kode VS? . Untuk membantu Anda bermanuver di ruang kerja dengan lebih mudah, meskipun melibatkan banyak file dan folder, Tim Ikon Kode VS merilis ekstensi yang menghadirkan ikon ke editor Anda. Dari "akses" ke "zip", "Android" hingga "www", koleksinya pasti memiliki ikon file dan folder yang Anda butuhkan Fitur pengalih ikon khusus proyek dan deteksi otomatis proyek akan secara otomatis mendeteksi jenis proyek yang telah Anda buka di ruang kerja Anda dan meminta Anda untuk mengubah ikon yang sesuai. Dimungkinkan juga untuk menggunakan ikon khusus, jika Anda mau Font Monospace Untuk PengkodeanFont pemrograman tentu saja merupakan pekerja keras dalam tipografi. Mereka harus menawarkan keterbacaan yang bagus, memungkinkan pemindaian teks cepat, dan mencegah ketegangan mata bahkan saat pengembang melihat kode selama berjam-jam. Untuk membantu Anda menemukan font pemrograman yang memenuhi kebutuhan Anda, Chris Coyier mengkurasi Coding Fonts, pilihan lebih dari 30 font monospace (sebagian besar gratis) yang semuanya cocok dengan kriteria ini Untuk membuat keputusan lebih mudah, setiap font dilengkapi dengan deskripsi singkat, ikhtisar semua karakter, dan contoh kode HTML, CSS, dan JavaScript dalam mode siang dan malam. Mostafa Gaafar menyimpan daftar font serupa untuk pengembang dengan opsi untuk juga melihat contoh kode dalam skema warna berbeda. Untuk menambahkan font khusus ke VS Code, Anda harus menentukan font di "Pengaturan" Git SuperchargedEkstensi yang berguna untuk menambah kemampuan Git yang dibangun ke dalam VS Code adalah GitLens. Untuk lebih memahami kode yang sedang Anda kerjakan, GitLens memungkinkan Anda melihat siapa, mengapa, dan kapan baris atau blok kode diubah Ekstensi memvisualisasikan penulisan kode secara sekilas, membantu Anda menavigasi dan menjelajahi repositori Git dengan mulus, mendapatkan wawasan berharga melalui perintah perbandingan, dan banyak lagi. Semua yang perlu Anda ketahui tentang basis kode Anda tepat di ujung jari Anda, tanpa meninggalkan editor Sejarah Git Dalam Kode VSMelihat dan mencari log git beserta grafik dan detailnya, melihat salinan sebelumnya dari file yang sedang Anda kerjakan, mencari riwayat, membandingkan cabang dan komit — ini hanyalah beberapa fitur yang ditawarkan ekstensi Git History untuk disederhanakan Berbicara tentang Git. Ekstensi VS Code lain yang layak untuk dilihat lebih dekat saat bekerja dengan Git adalah Git Graph. Ini memungkinkan Anda melihat grafik Git dari repositori Anda dan dengan mudah melakukan tindakan Git dari grafik Kotak Alat Arkeologi KodeSulit untuk membaca blok kode dan segera memahami konteks kodenya. Mengapa salah satu rekan tim Anda menulisnya sedemikian rupa? Ekstensi VSCode mengindeks potongan informasi paling relevan dari GitHub dan Jira untuk blok kode tertentu, untuk membantu Anda memahami dan men-debug kode lebih cepat dengan diarahkan ke bagian paling relevan dari dokumentasi pasif. Pembantu hebat yang dapat menghemat banyak waktu untuk mencoba mencari tahu apa yang terjadi di basis kode Sorot Anotasi Dalam Kode AndaApakah Anda terkadang lupa meninjau to-dos yang telah Anda tambahkan saat membuat kode? Kata kunci Menyoroti Kurung Dan Tag Yang CocokSesi pengkodean yang intens melelahkan mata, jadi apa pun yang membantu memenuhi lebih banyak kejernihan visual adalah penolong yang disambut baik. Untuk meningkatkan penyorotan sintaks Anda ke tingkat berikutnya saat bekerja dengan VS Code, Anda mungkin ingin memeriksa Bracket Pair Colorizer. Ekstensi mengidentifikasi tanda kurung yang cocok — dalam warna yang Anda tentukan Sekarang setelah Anda memiliki kendali penuh atas tanda kurung Anda, detail kecil lainnya yang harus diperhatikan adalah pencocokan tag pembuka dan penutup. VS Code memang sudah dilengkapi dengan fitur pencocokan tag, tetapi ini agak mendasar. Ekstensi Tag Pencocokan Sorotan berfungsi lebih menyeluruh, mencocokkan tag di mana saja — mulai dari atribut tag hingga string di dalam — dan bahkan menyorot jalur dari tag ke tag di bilah status. Opsi gaya ekstensif memungkinkan Anda menyesuaikan cara tag disorot. HTML dan JSX didukung secara resmi Mengungkap Karakter MerugikanSpasi dengan lebar nol dan non-penggabung, spasi tanpa putus, tanda kutip ganda kiri dan kanan — saat pengkodean, beberapa karakter dapat berbahaya karena tidak terlihat atau tampak seperti karakter yang sah. Gremlins Tracker menemukannya untuk Anda Gremlins Tracker menggunakan skema warna untuk mengingatkan Anda tentang karakter berbahaya, berpotensi berbahaya, dan kurang berbahaya. Baris yang berisi karakter seperti itu ditandai dengan ikon Gremlins, dan menggerakkan kursor di atas karakter memberi Anda petunjuk tentang potensi masalah tersebut. Jika suka, Anda dapat menambahkan karakter gremlin baru atau menimpanya untuk bahasa tertentu Menyoroti LekukanLekukan adalah kunci untuk memastikan kode Anda dapat dipindai dengan cepat. Plugin kecil praktis yang membuat lekukan lebih mudah dibaca adalah Indent-Rainbow. Itu mewarnai lekukan di depan teks Anda bergantian empat warna berbeda pada setiap langkah dan menandai garis-garis di mana lekukan bukan kelipatan dari ukuran tab Meskipun penyorotan kesalahan berguna, ada beberapa contoh di mana hal itu mungkin menghalangi Anda. Saat berhadapan dengan pola RegEx, misalnya. Untungnya, Indent-Rainbow memungkinkan Anda mematikan penyorotan kesalahan pada itu, seperti pada baris komentar, dan, jika Anda mau, Anda bahkan dapat melewatkannya untuk seluruh bahasa Memvisualisasikan Konteks PenumpukanApakah Anda mengalami kesulitan menemukan konteks penumpukan saat menggunakan Ekstensi membuat konteks penumpukan terlihat di CSS dan SCSS sehingga Anda dapat menggunakan nilai kecil dengan percaya diri saat menulis deklarasi Warna Khusus Untuk Membedakan Ruang KerjaJika Anda sering membuka beberapa instance VS Code dan kesulitan membedakannya, Peacock mungkin layak untuk dilihat lebih dekat. ekstensi secara halus mengubah tema warna ruang kerja Anda Tapi bukan hanya saat mengerjakan banyak proyek sekaligus di mana Peacock bersinar. Ini juga berguna saat menggunakan fitur VS Live Share atau VS Code Remote dan Anda ingin segera mengidentifikasi editor Anda IntelliSense. Fitur Pengembangan Berbantuan AIEkstensi IntelliCode menyediakan fitur pengembangan berbantuan AI untuk pengembang Python, TypeScript/JavaScript, dan Java dalam Visual Studio Code, dengan wawasan berdasarkan pemahaman konteks kode Anda yang digabungkan dengan pembelajaran mesin Menyediakan IntelliSense berbantuan AI, ekstensi menunjukkan item pelengkapan otomatis yang direkomendasikan untuk konteks kode Anda di bagian atas daftar penyelesaian. Ketika datang ke kelebihan, itu tidak menggilir daftar abjad anggota tetapi menyajikan Anda yang paling relevan terlebih dahulu. Tidak perlu lagi berburu melalui daftar sendiri Merekam Onboarding Terpandu Untuk Basis Kode AndaBasis kode yang besar bisa terasa menakutkan. CodeTour mencoba mengubahnya. Ekstensi memungkinkan Anda untuk merekam dan memutar ulang langkah-langkah terpandu dari basis kode Anda, langsung di dalam editor. Anggap saja sebagai daftar isi yang memudahkan untuk bergabung atau bergabung kembali ke proyek baru atau area fitur, untuk memvisualisasikan laporan bug, atau memahami konteks tinjauan kode Untuk membuat tur kode, Anda dapat membuat anotasi baris kode (penurunan harga didukung) dan menavigasi file sebanyak yang Anda butuhkan, dan perekam menangkap urutannya. Tur dapat diperiksa ke repo atau diekspor ke file "tur" sehingga siapa pun dapat memutar ulang tanpa harus mengkloning kode apa pun. Berguna Dari GitHub Ke Kode VS, Dalam Satu DetikSetelah Anda menemukan potongan kode di GitHub, bagaimana jika Anda ingin segera mulai mengerjakannya di proyek Anda? . Cukup tambahkan Anda juga dapat menggunakan bookmarklet untuk beralih antar github dengan cepat. com dan github1s. com, akses repositori pribadi dan ada banyak ekstensi browser yang juga terdaftar di halaman proyek. Jika Anda memerlukan alternatif, Gitpod adalah opsi yang sedikit lebih canggih, yang juga memungkinkan Anda memulai lingkungan pengembangan online, menjalankan ruang kerja paralel, dan mengerjakan basis kode secara kolaboratif Hewan Peliharaan Untuk Kode VS AndaPernah ingin meningkatkan editor kode VS Anda? . Setelah Anda memilih hewan peliharaan, warna bulu dan ukurannya, bersandarlah dan saksikan mereka berinteraksi dengan Anda Dari melempar bola dan bermain tangkapan dengan hewan peliharaan Anda (lari Mempercepat Pembuatan Prototipe JavaScript / TypeScriptJika Anda sedang mencari cara untuk mempercepat proses pembuatan prototipe JavaScript, Quokka cocok untuk Anda. Taman bermain pembuatan prototipe cepat ada di editor Anda dan memberikan peningkatan kecepatan pembuatan prototipe, pembelajaran, dan pengujian JavaScript dan TypeScript Nilai runtime diperbarui dan ditampilkan di IDE Anda di sebelah kode Anda, saat Anda mengetik. Untuk membuat Anda segera aktif, tidak diperlukan konfigurasi, yang perlu Anda lakukan untuk mulai bereksperimen adalah membuka file Quokka baru. Selamat membuat prototipe Gunakan Mesin Jarak Jauh Sebagai Lingkungan Pengembang AndaAda berbagai alasan mengapa Anda mungkin ingin menggunakan mesin jarak jauh dengan server SSH sebagai lingkungan pengembangan. Karena Anda memerlukan perangkat keras yang lebih cepat atau lebih terspesialisasi daripada mesin lokal Anda, misalnya, atau untuk men-debug aplikasi yang berjalan di tempat lain, seperti situs pelanggan atau aplikasi di cloud. Untuk menyederhanakan pengembangan dan pemecahan masalah, ekstensi Remote - SSH membantu Anda melakukannya Ekstensi menjalankan perintah dan ekstensi lainnya langsung di mesin jarak jauh, jadi Anda tidak memerlukan kode sumber apa pun di mesin Anda. Sebagai gantinya, Anda dapat membuka folder apa pun di mesin jarak jauh dan bekerja dengannya seperti biasa, memanfaatkan sepenuhnya rangkaian fitur lengkap VS Code. Berguna Kompilasi Sass Secara Real TimeKompiler Sass waktu nyata dengan pemuatan ulang peramban langsung? . Ini membantu Anda mengkompilasi/mengubah file SASS/SCSS Anda ke file CSS secara real time Fitur termasuk menyesuaikan lokasi file dari CSS yang diekspor serta gaya dan nama ekstensinya, ada kontrol bilah status cepat, Anda dapat mengecualikan folder tertentu dalam pengaturan, dan autoprefix juga didukung Tips Dan Trik Tidak Ada Yang Repot Memberitahu AndaApakah Anda benar-benar memanfaatkan sepenuhnya fitur canggih yang ditawarkan VS Code? Dari memperbarui tag HTML MembungkusAda ratusan ekstensi VS Code di luar sana, dan kami harap beberapa yang tercantum di sini akan terbukti berguna dalam pekerjaan Anda sehari-hari — dan yang paling penting membantu Anda menghindari beberapa tugas rutin yang memakan waktu. Selamat coding, semuanya Ekstensi mana yang digunakan untuk CSS di VS Code?Untuk mengonfigurasi opsi CSS, gunakan css. serat .
Ekstensi mana yang digunakan untuk HTML dalam Visual Studio Code?4. Lebih cantik — Pemformat kode . Ekstensi ini akan membantu Anda memformat kode JavaScript, HTML, CSS. Anda dapat mengonfigurasinya sesuai kebutuhan.
Apakah Visual Studio Code mendukung HTML dan CSS?Dalam Visual Studio Code, kami memiliki dukungan untuk hampir semua bahasa pemrograman utama . Beberapa dikirimkan dalam kotak, misalnya, JavaScript, TypeScript, CSS, dan HTML tetapi ekstensi bahasa yang lebih kaya dapat ditemukan di VS Code Marketplace.
Bagaimana cara mengatur HTML dan CSS dalam Visual Studio Code?Sebaiknya tonton video di atas lalu ikuti langkah-langkah tertulis di bawah ini. . Buat folder pengembangan. Arahkan ke folder menggunakan pengelola file atau terminal Anda. . Buka Kode Visual Studio Buka folder pengembangan Anda. . Tambahkan file. . Mulai pengkodean. . Lihat file HTML Anda di browser |