10 ekstensi Kode VS terbaik 2018 untuk pengembang front-end

Visual Studio Code mungkin dapat disebut editor kode modern terbaik. Jika Anda belum bekerja dengannya, maka Anda setidaknya harus melihatnya. Banyak sekali ekstensi yang telah ditulis untuk VS Code, yang ditempatkan di direktori Marketplace , akses mudah yang dikelola dari editor itu sendiri.

Ada ekstensi untuk debugging dan memformat kode, ekstensi yang membuatnya lebih mudah untuk bekerja dengan berbagai platform (seperti Heroku, GitHub, Docker, Azure) dan teknologi. Di Marketplace, Anda dapat menemukan tema untuk editor, linter, alat untuk memfasilitasi entri fragmen kode berulang, dan banyak lagi.



Penulis materi, terjemahan yang kami terbitkan hari ini, memilih 10 ekstensi VS Code terbaik, terutama ditujukan bagi mereka yang terlibat dalam pengembangan front-end, yaitu, bekerja dengan HTML, CSS, JavaScript dan berbagai kerangka kerja web.

Informasi awal

Jika Anda belum pernah bekerja dengan VS Code sebelumnya, tetapi ingin mencoba editor ini, Anda dapat mengunduhnya di sini . Tapi, jika tertarik, materi di mana kemampuannya diperagakan.

Setelah mengunduh dan menginstal VS Code, buka panel ekstensi.


Panel ekstensi

Selanjutnya, menggunakan bidang pencarian, temukan ekstensi yang Anda minati, pelajari informasi tentangnya, dan jika Anda memutuskan membutuhkannya, pasanglah. Alat pencarian ekstensi terlihat seperti gambar di bawah ini.


Cari ekstensi untuk Kode VS di Marketplace

Sekarang mari kita bicara tentang ekstensi.

Server langsung

Ekstensi Server Langsung

Ekstensi luar biasa ini dirancang untuk membuat server lokal, yang digunakan selama pengembangan untuk meng-host halaman statis dan dinamis di dalamnya. Setelah menginstal ekstensi ini, tombol Go Live akan muncul di taskbar, yang memungkinkan Anda untuk memulai server. Menekan tombol ini saat mengedit halaman HTML akan menyebabkan halaman ini terbuka di browser. Server mendukung pemuatan ulang halaman interaktif, yang dilakukan setelah membuat perubahan pada kode dan menyimpan file yang sesuai.

Kompiler sass langsung

Ekstensi Live Sass Compiler

Ekstensi ini, secara interaktif, mengkompilasi file SCSS ke dalam file CSS. Ini dilakukan dengan sangat cepat. Anda dapat meluncurkan pratinjau hasil menerapkan gaya yang dikompilasi di browser menggunakan tombol Watch my sass di taskbar. Ekstensi ini, seperti yang baru saja dibahas, mendukung pemuatan materi secara interaktif.

Cuplikan Kode Javascript (ES6)

Potongan Kode Javascript Extension (ES6)

Ekstensi ini penting karena memiliki lebih dari 2 juta unduhan, dan, tampaknya, popularitasnya hanya meningkat seiring waktu. Ini memberikan pengembang dengan konstruk perangkat lunak (snippet) yang cocok untuk digunakan dalam jenis file berikut:

• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Html (.html)
• Vue (.vue)

NPM

Ekstensi NPM

Ini adalah ekstensi resmi Node Package Manager (npm) untuk VS Code. Itu membuatnya mudah untuk bekerja dengan file package.json. Secara khusus, ini menampilkan peringatan tentang dependensi yang tercermin dalam file, tetapi tidak diinstal, serta yang diinstal tetapi tidak terdaftar di package.json. Ini membantu untuk mengidentifikasi paket-paket yang versinya tidak mematuhi aturan yang ditentukan dalam package.json, dan menyediakan alat yang mudah bagi pengembang untuk menjalankan perintah npm.

ESLint

Ekstensi ESLint

Ekstensi ini menyediakan kemampuan linting untuk file .js dan .jsx. Ini dapat dikonfigurasi dan memungkinkan untuk pemformatan kode yang seragam. ESLint, dengan hampir 12 juta unduhannya, dapat disebut sebagai salah satu ekstensi paling populer untuk VS Code.

Lebih cantik

Ekstensi lebih cantik

Ekstensi yang sangat populer ini menawarkan hampir empat juta unduhan. Ini membantu untuk memformat kode JavaScript, yang memungkinkan mempertahankan basis kode yang seragam dan meningkatkan keterbacaan program. Ada ekstensi serupa di Marketplace, Beautify, juga cukup populer.

Intip CSS

Ekstensi mengintip CSS

Ekstensi yang bermanfaat ini berguna ketika bekerja dengan tata letak halaman, mengidentifikasi dan menurunkan, berdasarkan nama kelas dan pengidentifikasi elemen, gaya yang diterapkan padanya. Ini membantu menghemat waktu dengan menghilangkan kebutuhan pengembang untuk terus berpindah antara file HTML dan CSS. Tentu saja, tugas-tugas tersebut dapat diselesaikan dengan melihat file yang sesuai dalam mode layar terbagi, tetapi tidak semua orang suka bekerja dengan gaya ini.

Cuplikan 6 sudut

Ekstensi potongan 6 sudut

Ini adalah ekstensi resmi yang menawarkan potongan pengembang untuk Angular 6. Kode yang sesuai mengikuti panduan gaya Angular, menggunakan ekstensi ini mempercepat proses pengembangan proyek Angular, khususnya, karena penyelesaian kode. Ini mendukung TypeScript, sintaks pekerja layanan, RxJS, ngRx, dan bahkan Bahan Angular. Jika Anda mengembangkan aplikasi Angular dalam VS Code dan belum menggunakan ekstensi ini, maka Anda harus melihatnya.

Vetur

Ekstensi Vetur

Ini adalah ekstensi resmi Vue.js untuk VS Code dengan jumlah unduhan yang mengesankan, yang memiliki lebih dari 5 juta. Hal ini dimaksudkan untuk memfasilitasi pengembangan aplikasi Vue.js. Vetur dapat memeriksa kode untuk kesalahan, mendukung pelengkapan otomatis dan cuplikan.

Debugger untuk Chrome

Debugger untuk Ekstensi Chrome

Ini adalah ekstensi resmi untuk Kode VS, yang dirancang untuk men-debug kode JS menggunakan Google Chrome. Saat ini salah satu ekstensi Kode VS yang paling banyak digunakan.

Ringkasan

Kami hanya memeriksa belasan ekstensi untuk Kode VS, tetapi sebenarnya ada banyak ekstensi. Sangat mungkin bahwa dengan menjelajahi katalog Marketplace, Anda akan menemukan sesuatu di sana yang menurut Anda jauh lebih berguna daripada ekstensi yang dibahas. Namun, kebanyakan dari mereka dapat sangat membantu bagi pengembang front-end. Kami harap mereka juga berguna bagi Anda.

Jika Anda tertarik dengan topik ekstensi untuk Kode VS - ini adalah salah satu materi kami tentang mereka, berfokus pada pengembang JS. Dengan menerbitkan materi itu, kami mengajukan pertanyaan kepada pembaca tentang ekstensi apa yang mereka gunakan. Kemudian ternyata ini adalah Code Outline, Todo Tree dan GitHub. Hari ini, para pembaca yang budiman, kami ingin mengajukan pertanyaan yang sama kepada Anda. Ekstensi untuk Kode VS apa yang Anda sukai?