Ekstensi kode studio visual html css

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 ↬

Buletin Email

Kiat mingguan tentang front-end & UX
Dipercaya oleh 200.000+ orang

• 
  Bersiaplah untuk peran komunikasi hari ini MS Northwestern dalam Desain Informasi

• 
  SmashingConf Freiburg 2023

• 
  Front-End SmashingConf 2023

• 
  Pelatihan UX Pola Desain Antarmuka

• 
  Beriklan di Majalah Smashing

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 isi

Di bawah ini Anda akan menemukan lompatan cepat ke ekstensi tertentu yang mungkin Anda perlukan. Gulir ke bawah untuk ikhtisar umum. Atau

Mengotomatiskan Pesan Log

Ketika 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 Terkendali

Kita 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, Otomatis

Saat 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 jq_ untuk mendapatkan daftar semuanya

Berbicara tentang cuplikan. Jika Anda lebih suka perpustakaan cuplikan yang bagus daripada mendefinisikannya sendiri dari awal, koleksi ini mendukung Anda

• Cuplikan Aksesibilitas
• ES7 React/Redux/GraphQL/React-Native
• CSS
• Kotak CSS
• HTML
• Node. js
• JavaScript (ES6)
• Sudut 10
• Vue. js + TypeScript.js
• WordPress
• WordPress Gutenberg
• PHP
• Alat PHP
• Langsing
• TensorFlow

Tulis Cuplikan Kode Anda Sendiri

Ada 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 Mewah

Jujur 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 Manusia

Bagaimana 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

Debugging Chrome Di Dalam Kode VS

Apakah 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 VSCode

Bukankah 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 VS

Banyak 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 Anda

Dalam 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 VS

Ikon 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 Pengkodean

Font 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 Supercharged

Ekstensi 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 VS

Melihat 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 Kode

Sulit 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 Anda

Apakah Anda terkadang lupa meninjau to-dos yang telah Anda tambahkan saat membuat kode?

Kata kunci TODO dan FIXME telah dikonfigurasikan sebelumnya, tetapi Anda dapat menyesuaikan konfigurasi sesuai keinginan jika Anda mau. Perintah menyoroti komentar terbuka untuk Anda langsung di kode Anda atau sebagai daftar semua anotasi. Pengingat kecil yang bagus

Menyoroti Kurung Dan Tag Yang Cocok

Sesi 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 Merugikan

Spasi 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 Lekukan

Lekukan 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 Penumpukan

Apakah Anda mengalami kesulitan menemukan konteks penumpukan saat menggunakan z-index? . Jika Anda terkadang mendapati diri Anda menyetel z-index_ menjadi satu miliar pada suatu elemen dan elemen tersebut tidak bergerak maju dalam urutan susun Anda, CSS Stacking Contexts cocok untuk Anda

Ekstensi membuat konteks penumpukan terlihat di CSS dan SCSS sehingga Anda dapat menggunakan nilai kecil dengan percaya diri saat menulis deklarasi z-index. Selain itu, ini juga akan memberi tahu Anda saat deklarasi z-index tidak berpengaruh dan menawarkan perbaikan cepat

Warna Khusus Untuk Membedakan Ruang Kerja

Jika 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 AI

Ekstensi 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 Anda

Basis 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 Detik

Setelah Anda menemukan potongan kode di GitHub, bagaimana jika Anda ingin segera mulai mengerjakannya di proyek Anda? . Cukup tambahkan 1s setelah github di URL, tekan Enter, dan repo, atau satu file, akan terbuka langsung di VS Code

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 Anda

Pernah 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 TODO0) hingga menambahkan hewan peliharaan tambahan (lari TODO1), alur kerja pengkodean Anda pasti tidak akan membosankan. Pencipta, Anthony Shaw, terbuka untuk ide dan diskusi dan menyambut umpan balik kapan saja

Mempercepat Pembuatan Prototipe JavaScript / TypeScript

Jika 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 Anda

Ada 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 Time

Kompiler 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 Anda

Apakah Anda benar-benar memanfaatkan sepenuhnya fitur canggih yang ditawarkan VS Code?

Dari memperbarui tag HTML TODO2 secara otomatis dengan ukuran gambar yang benar hingga menggunakan ligatur font untuk keterbacaan yang lebih baik saat membuat kode atau mencatat poin untuk mengeluarkan informasi dari aplikasi Anda, “VS Code Can Do That?. ” menampilkan 36 tip berharga yang akan membuat alur kerja Anda semakin efisien

Membungkus

Ada 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?

Ekstensi mana yang digunakan untuk HTML dalam Visual Studio Code?

Apakah Visual Studio Code mendukung HTML dan CSS?

Bagaimana cara mengatur HTML dan CSS dalam Visual Studio Code?