Cara menggunakan css auto-prefix vscode

bewoksatukosong.com | Kalian pernah liat ga sih ketika sedang nonton tutorial terus si content creator, hanya menuliskan 1 kata tiba - tiba berubah dengan syntax yang lengkap, sebenarnya kita bisa menggunakan extension  bahasa pemograman yang kalian pergunakan, tapi ada juga perintah syntax yang tidak ada di extension. contohnya seperti  kodingan php dibawah ini

<? php tulis disini ?> 

<?= 'hello world' ?>

Nah kadang kita males nulis syntax seperti ini, nah dengan mengetikan php atau phpp, maka akan terbentuk seperti syntax diatas. Oh iya kalian bisa juga menambahkan snippet yang lain ya, om bewok hanya memberi contoh. Oke langsung saja kita mulai ya cara membuat snippet di visual studio code

Tailwind CSS uses a lot of custom CSS at-rules like @tailwind, @apply, and @screen, and in many editors this can trigger warnings or errors where these rules aren’t recognized.

The solution to this is almost always to install a plugin for your editor/IDE for PostCSS language support instead of regular CSS.

If you’re using VS Code, our official Tailwind CSS IntelliSense plugin includes a dedicated Tailwind CSS language mode that has support for all of the custom at-rules and functions Tailwind uses.

In some cases, you may need to disable native CSS linting/validations if your editor is very strict about the syntax it expects in your CSS files.

IntelliSense for VS Code

The official Tailwind CSS IntelliSense extension for Visual Studio Code enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting.

Cara menggunakan css auto-prefix vscode
  • Autocomplete. Intelligent suggestions for class names, as well as CSS functions and directives.
  • Linting. Highlights errors and potential bugs in both your CSS and your markup.
  • Hover Previews. See the complete CSS for a Tailwind class name by hovering over it.
  • Syntax Highlighting. Provides syntax definitions so that Tailwind features are highlighted correctly.

Check out the project on GitHub to learn more, or add it to Visual Studio Code to get started now.

Automatic class sorting with Prettier

We maintain an official Prettier plugin for Tailwind CSS that automatically sorts your classes following our .

Cara menggunakan css auto-prefix vscode

It works seamlessly with custom Tailwind configurations, and because it’s just a Prettier plugin, it works anywhere Prettier works — including every popular editor and IDE, and of course on the command line.

Check out the plugin on GitHub learn more and get started.

JetBrains IDEs

JetBrains IDEs like WebStorm, PhpStorm, and others include support for intelligent Tailwind CSS completions in your HTML and when using @apply.

Banyak sekali fitur-fitur yang disediakan oleh Visual Studio Code, diantaranya Intellisense, Git Integration, Debugging, dan fitur ekstensi yang menambah kemampuan teks editor. Fitur-fitur tersebut akan terus bertambah seiring dengan bertambahnya versi Visual Studio Code. Pembaruan versi Visual Studio Code ini juga dilakukan berkala setiap bulan, dan inilah yang membedakan VS Code dengan teks editor-teks editor yang lain.

Teks editor VS Code juga bersifat open source, yang mana kode sumbernya dapat kalian lihat dan kalian dapat berkontribusi untuk pengembangannya. Kode sumber dari VS Code ini pun dapat dilihat di link Github. Hal ini juga yang membuat VS Code menjadi favorit para pengembang aplikasi, karena para pengembang aplikasi bisa ikut serta dalam proses pengembangan VS Code ke depannya.

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…

code.visualstudio.com

Documentation for Visual Studio Code

Find out how to set-up and get the most from Visual Studio Code. Optimized for building and debugging modern web and…

code.visualstudio.com

Pada artikel kali ini, saya akan membagikan beberapa ekstensi yang sering digunakan ketika memakai VS Code. Beberapa ekstensi ini mungkin ada yang sudah pembaca gunakan sejak lama. Ekstensi yang saya pakai kebanyakan berhubungan dengan web development berbasis JavaScript dan Node JS. Hal itu dikarenakan kebutuhan saya dalam mengerjakan proyek aplikasi dan pekerjaan sampingan yang ditemui setiap hari, misalnya membantu pengembangan aplikasi web, migrasi aplikasi web dari bahasa pemrograman lama atau framework lama ke framework berbasis JavaScript dan Node JS , dan menjadi ninja sebentar untuk membantu debugging atau testing.

Ekstensi Visual Studio Code

VS Code dapat digunakan secara langsung tanpa perlu ekstensi selama alur pemrogramannya sudah didukung langsung. Namun ada beberapa alur pemrograman yang tidak didukung langsung misalnya penggunaan snippets code dan kemampuan Intellisense yang masih kurang. Disini letak kegunaan ekstensi karena dapat menambah kemampuan dukungan alur pemrograman yang diinginkan. Ekstensi VS Code ini banyak dibuat oleh pengembang-pengembang pihak ketiga yang juga menjadi kontributor dari VS Code. Ekstensi untuk VS Code dapat dilihat di Pasar Ekstensi dengan tautan berikut ini

Visual Studio Marketplace

One place for all extensions for Visual Studio, Azure DevOps Services, Azure DevOps Server and Visual Studio Code…

marketplace.visualstudio.com

Pasar ekstensi VS Code yang menampilkan ekstensi karya pengembang

Di dalam Pasar Ekstensi tersebut, pengguna VS Code dapat memilih-memilih ekstensi yang diinginkan sesuai kebutuhan. Dan mayoritas ekstensi tersebut bersifat gratis. Pasar Ekstensi VS Code berisi tambahan kemampuan snippet code untuk bahasa pemrograman tertentu, alur kerja pengembangan, tambahan kemampuan fitur VS Code, tema warna untuk VS Code, dan masih banyak lagi. Pemasangan ekstensi di dalam VS Code dapat dilakukan langsung di dalam VS Code. Yaitu dengan mengakses menu Extensions (Ctrl + Shift + X ), kemudian mencari ekstensi dengan mengetikkan nama ekstensi di kotak pencarian.

Daftar ekstensi di Marketplace di dalam VS Code

Petunjuk selanjutnya mengenai pemasangan ekstensi di VS Code dapat dilihat di tautan berikut ini.

Managing Extensions in Visual Studio Code

The features that Visual Studio Code includes out-of-the-box are just the start. VS Code extensions let you add…

code.visualstudio.com

Para pembaca yang ingin ikut berkontribusi dengan membuat ekstensi untuk VS Code pun sudah disediakan cara-caranya yang terdapat di tautan berikut.

Extension API

Visual Studio Code is built with extensibility in mind. From the UI to the editing experience, almost every part of VS…

code.visualstudio.com

Daftar Ekstensi Yang Saya Pakai

Daftar ekstensi yang terpasang

Ekstensi yang saya pakai berjumlah sekitar lebih dari 50 buah. Daftar ekstensi tersebut akan saya jelaskan secara singkat satu per satu berikut link keterangan untuk mengunduh ekstensinya melalui VS Code Marketplace.

  1. Angular Snippets by Dan Wahlin . Ekstensi snippet dan suggestion untuk penggunaan framework Angular.
  2. Angular Snippets by Mikael Morlund. Ekstensi snippet dan suggestion untuk penggunaan framework Angular.
  3. Angular Snippet by John Papa . Ekstensi snippet dan suggestion penggunaan framework Angular.
  4. Angular Schematics. Ekstensi menjalankan perintah Angular CLI dari File Explorer dan Command Palette VS Code.
  5. Angular Console . Ekstensi untuk menjalankan Angular CLI dari VS Code dengan user interface atau GUI.
  6. Auto Close Tag. Ekstensi untuk menambahkan penutup tag secara otomatis pada HTML dan XML . Ekstensi ini sementara tidak saya pakai karena bugs yang menyebabkan penggunaan CPU yang tinggi.
  7. Auto Rename Tag. Ekstensi untuk mengganti tag pembuka dan tag penutup bersamaan pada HTML dan XML . Ekstensi ini sementara tidak saya pakai karena ada bugs yang menyebabkan penggunaan CPU yang tinggi.
  8. Autoprefixer . Ekstensi untuk menambahkan prefix tipe browser secara otomatis dalam kelas CSS. Misalnya prefix -webkit-box untuk CSS Flexbox.
  9. Babel JavaScript . Ekstensi untuk menampilkan highlight pada syntax JavaScript ES2015 ke atas.
  10. Beautify . Untuk merapikan susunan kode JavaScript, HTML, CSS, dan JSON yang sesuai standar.
  11. Better Comment . Ekstensi untuk memberikan tanda komentar yang lebih hidup dan mudah diperhatikan jika dibandingkan dengan komentar biasa di dalam kode.
  12. Bookmarks . Menambahkan penanda bookmark pada baris kode dan navigasi ke penanda tersebut.
  13. Bracket Pair Colorizer 2 . Versi terbaru dari ekstensi pewarnaan bracket sebelumnya. Versi terbaru ini membawa kompatibilitas dan performa lebih baik pada Visual Studio Code versi terbaru.
  14. Carbon-now-sh . Ekstensi untuk membuat screenshot kode dengan layanan Carbon.
  15. CDNJS . Mencari library dari CDNJS dan menambahkan langsung ke dalam HTML.
  16. Change Case . Mengganti nama variabel menjadi berbentuk camelCase, CONSTANT_CASE, snake_case, dst menurut seleksi kursor pengguna.
  17. Close HTML/XML Tag . Memberikan tag penutup otomatis pada HTML dan XML.
  18. CodeSnap . Ekstensi untuk membuat screenshot kode langsung dari text editor.
  19. CodeStream . Ekstensi untuk melakukan diskusi antar pengembang dalam satu tim, dengan fitur menambahkan komentar di dalam baris-baris kode. Dapat diintegrasikan dengan Slack, Teams, GitHub, GitLab, Bitbucket, Jira, Trello, dst.
  20. Color Highlight . Menampilkan kotak warna dari kode hex warna yang ada di dalam kode CSS, JavaScript, ataupun HTML.
  21. Color Info . Ekstensi untuk menambahkan keterangan lebih lanjut dari warna di CSS.
  22. CSS Formatter . Ekstensi untuk memformat susunan CSS agar lebih rapi.
  23. CSS Peek . Melihat detail dari suatu kelas atau id dari CSS yang terdapat di dalam HTML .
  24. CSV to Table . Konversi data CSV menjadi bentuk tabel data dalam bentuk susunan karakter ASCII.
  25. Debugger for Chrome . Ekstensi penghubung antara VS Code dengan browser Google Chrome, yang digunakan untuk debugging aplikasi web.
  26. Debugger for Firefox . Ekstensi penghubung antara VS Code dengan browser Mozilla Firefox, yang digunakan untuk debugging aplikasi web.
  27. Dependency Analytics . Melihat info dari dependency NPM yang dipakai.
  28. Docker . Menambahkan syntax highlight dan linting untuk Dockerfile.
  29. DotENV . Menambahkan syntax highlight dan linting untuk file .env .
  30. EditorConfig for VS Code . Ekstensi untuk menyetel gaya penulisan di dalam panel teks editor, penggunaan spasi atau tab untuk mengatur jarak antar kode, besar jarak antar tab, jarak antar spasi, menambahkan satu baris di akhir baris kode, dst.
  31. Error Lens. Ekstensi untuk menampilkan keterangan lebih detail dari error yang ditemui ketika penulisan kode.
  32. ES7 React/Redux/GraphQL/React-Native snippets . Ekstensi untuk menambahkan snippet dan syntax highlighting untuk React JS , Redux, dan GraphQL dengan ES2016.
  33. ESLint . Ekstensi untuk mengatur gaya penulisan sesuai standar JavaScript ES2015+ . Selain itu bisa memperbaiki kesalahan penulisan jika ditemui penulisan JavaScript yang belum sesuai standar.
  34. ES6 Mocha Snippets . Ekstensi untuk membuat kerangka unit testing dengan Mocha.
  35. ES6 String HTML . Ekstensi untuk menambahkan syntax highlighting pada kode html yang berbentuk String template literal.
  36. File Utils . Ekstensi untuk menambahkan operasi membuat data, duplikasi data, memindahkan data, mengubah nama data, dan menghapus data dan direktori folder.
  37. Gi . Membuat file .gitignore dengan mudah.
  38. Gistpad . Untuk manajemen Gist dan Code Snippet yang ada di akun Github Gist milik sendiri.
  39. Gitignore . Dukungan syntax highlight dan mengambil kerangka gitignore dari repositori Gitignore di Github.
  40. Git History . Ekstensi untuk melihat grafik riwayat commit dari repository Git di dalam folder proyek yang sedang dibuka. Selain itu bisa dilakukan operasi-operasi Git seperti branch, cherry pick, merge, dst.
  41. GitLens . Ekstensi untuk meningkatkan kemampuan integrasi Git VCS di dalam Visual Studio Code.
  42. Git Graph. Ekstensi menambahkan tampilan GUI dari alur Git dan status Git di VS Code langsung.
  43. Github Pull Request . Membuat pull request dengan mudah di layanan Github.
  44. Highlight Matching Tag . Menambahkan sorotan pada tag pembuka dan tag penutup pada elemen HTML.
  45. HTML CSS Support . Menambahkan kemampuan Intellisense (suggestion dan completion) untuk penulisan class dan id dari CSS di dalam HTML.
  46. HTML Snippets . Ekstensi untuk menambahkan dukungan terhadap penulisan HTML5. Namun fungsi HTML Snippets ini sudah diadopsi langsung oleh fungsi utama Visual Studio Code.\
  47. Indent Rainbow . Ekstensi untuk menambahkan warna pada jarak tab dan spasi (indent) . Cukup membantu untuk menampilkan indent pembuka dan indent penutup. Terutama pada file HTML, JS, CSS, pada file Python, dst.
  48. IntelliSense for CSS class names in HTML . Menambahkan kemampuan Intellisense terhadap pemakaian CSS Class di dalam HTML. Ekstensi ini akan melakukan pendeteksian untuk mencari file CSS yang terdapat di dalam folder proyek.
  49. Import Cost . Melihat ukuran file yang diimport dari dependency dan file JS yang lain.
  50. Inline HTML . Menambahkan syntax highlighting , snippet , dan intellisense pada sintaks HTML atau CSS yang berada di dalam ES2015 template Strings.
  51. JavaScript Booster . Menambahkan produktivitas dalam JavaScript programming dengan menambahkan snippet dan saran penulisan pada kode yang ditulis.
  52. JavaScript (ES6) code snippets . Ekstensi untuk kerangka snippets penulisan JavaScript berbasiskan standar ES2015.
  53. JavaScript Snippet Pack . Kumpulan snippet untuk JavaScript ES2015.
  54. Jest . Menggunakan unit testing Jest dengan mudah.
  55. Jumpy . Navigasi antar kata dengan pintasan cepat.
  56. JS Refactor . Menambahkan fungsi refactor untuk kode JavaScript.
  57. Kubernetes . Dukungan untuk melakukan debug aplikasi berbasis Kubernetes Container.
  58. Lit HTML . Syntax highlighting dan Intellisense untuk sintaks HTML yang berada di dalam kode template String JavaScript.
  59. Live SASS Compiler . Ekstensi untuk melakukan preview dan kompilasi file SASS atau SCSS ke CSS secara realtime, dan menampilkannya ke dalam browser secara langsung.
  60. Live Server . Ekstensi untuk menjalankan server lokal untuk proses debugging tampilan dan desain HTML. Live server ini akan mendeteksi perubahan di dalam file HTML, CSS, dan JS dan otomatis melakukan live reload halaman.
  61. Live Share . Ekstensi untuk kolaborasi dengan pengembang lain secara online.
  62. Live Share Audio . Ekstensi tambahan untuk Live Share dengan fungsi komunikasi melalui suara dengan pengguna Live Share yang lain.
  63. Markdown Preview Enhanced. Ekstensi untuk menampilkan preview dari file Markdown.
  64. Markdown Lint. Ekstensi untuk menambahkan snippet dan koreksi ketika penulisan Markdown.
  65. Markdown All In One. Ekstensi untuk membantu penulisan markdown dengan fitur snippet, pintasan keyboard, preview, dan pembuatan daftar isi.
  66. MetaGo . Ekstensi untuk membantu navigasi di dalam kode dengan teknik perpindahan antar karakter huruf kode yang sama.
  67. Multiple Clipboard . Menambahkan dukungan untuk menampung banyak clipboard copy paste di VS Code.
  68. MongoDb for VS Code. Ekstensi untuk manajemen database MongoDb , seperti melihat schema, collections, playground untuk eksperimen data dan schema, dan masih banyak lagi.
  69. Node.js Modules Intellisense . Ekstensi untuk menambahkan Intellisense terhadap daftar dependency di dalam Node Modules dan folder proyek. Sehingga ketika melakukan import statement di dalam kode JavaScript, terdapat saran atau suggestion dari nama module dependency nya.
  70. Node Readme . Ekstensi untuk melihat dokumentasi dari libray JavaScript yang telah terinstall di Node Module .
  71. Node Exec . Ekstensi yang berguna untuk menjalankan file JavaScript secara langsung dengan runtime Node JS, dan menampilkan hasilnya ke dalam Terminal.
  72. NPM Support for VS Code . Menambahkan fungsi untuk menjalankan script NPM melalui VS Code, inspeksi dependency yang ada di package.json , dan manajemen script NPM yang berjalan.
  73. NPM Intellisense . Ekstensi ini hampir sama dengan ekstensi untuk NPM sebelumnya. Namun dilengkapi dengan perintah atau snippet yang bisa dipakai melalui Command Palette di VS Code.
  74. Open in Browser . Ekstensi untuk membuka file HTML yang sedang disunting di VS Code ke browser komputer. Berguna untuk melihat tampilan web ketika proses desain dan mockup.
  75. Paste JSON as Code . Melakukan copy paste data JSON menjadi bentuk model atau class.
  76. Path Intellisense . Menambahkan Intellisense atau autocomplete pada penggunaan path di dalam HTML. Biasanya dipakai mereferensikan path dari file CSS ke dalam HTML.
  77. Path Autocomplete . Fungsinya hampir sama dengan ekstensi Path Intellisense, namun ekstensi ini untuk mereferensikan file atau modul JavaScript yang satu dengan yang lain, ketika melakukan proses impor.
  78. Prettier Code Formatter . Ekstensi untuk merapikan kode JavaScript, TypeScript, dan CSS.
  79. Polacode . Ekstensi untuk mengambil tampilan atau screenshot dari beberapa potong kode. Berguna untuk membagikan potongan kode ke sosial media atau aplikasi chat.
  80. Polymer Snippet , Polymer Syntax , dan Polymer IDE . Ekstensi untuk menambahkan fungsi snippet dan syntax highlighting pada framework Polymer dan Web Component.
  81. Project Manager . Ekstensi untuk mengatur project-project yang pernah dibuka ke dalam bentuk bookmark project.
  82. Quokka.js . Ekstensi untuk membuat lembaran coret-coret kode JavaScript, sebelum diimplementasikan ke proyek utama.
  83. React Native Tools . Ekstensi untuk fungsi debugging pada framework React Native.
  84. React Native/ React / Redux Snippets for ES6 / ES7 . Ekstensi untuk menambahkan fungsi snippet pada pengembangan aplikasi React Native.
  85. React JS Code Snippets . Ekstensi yang berisi snippet untuk React JS development dan sintaks ES2015.
  86. Regex Previewer . Menambahkan preview pada fungsi Regex di JavaScript dan TypeScript.
  87. Remote Containers . Ekstensi untuk membuka container Docker dari VS Code.
  88. Remote SSH . Ekstensi untuk membuka folder dan kode dari remote server dengan SSH.
  89. REST Client . Melakukan uji coba endpoint REST API dari Visual Studio Code langsung.
  90. Search node_modules . Menambahkan kemampuan untuk mencari file yang terdapat di dalam dependency pada folder node_modules, melalui Command Palette VS Code.
  91. Settings Sync . Ekstensi untuk melakukan backup data setelan VS Code ke dalam Github Gist. Data setelan yang dibackup diantaranya daftar ekstensi yang terpasang, setelan VS Code, key binding, dst . Dengan adanya fitur backup setelan ini, kita dapat melakukan ekspor dan impor setelan VS Code, ke mesin komputer yang lain. Atau untuk berjaga-jaga jika kita berganti komputer dan ingin memasang kembali ekstensi dan setelan yang pernah dipasang sebelumnya.
  92. Surround . Menambahkan rangkap if else for dst dari selector kursor.
  93. Svelte . Ekstensi untuk dukungan framework Svelte JS.
  94. Svelte Intellisense . Menambahkan fungsi intellisense pada proyek berbasis Svelte JS.
  95. Svelte 3 Snippets. Menambahkan snippets untuk Svelte JS versi 3.
  96. SVG Viewer . Melihat preview untuk gambar SVG.
  97. Team Chat for Slack , Discord , Live Share . Menambahkan fungsi berkirim pesan instan pada ekstensi Live Share.
  98. Trailing Spaces . Menambahkan sorotan pada spasi kosong yang ada diakhiran kode dan menghapus spasi kosong tersebut.
  99. TSLint . Memberikan fungsi linter untuk koreksi dan perbaikan kode TypeScript.
  100. Todo Highlight . Highlight TODOs, FIXMEs, keywords, dan annotations .
  101. Todo List . Menampilkan daftaraction comments (TODO, FIXME, HACK etc) ke dalam daftar yang mudah dibaca.
  102. Todo+ . Manajemen todo lists dengan mudah.
  103. Turbo Console Log . Menambahkan pintasan cepat untuk menulis Console Log di JavaScript.
  104. Version Lens . Ekstensi untuk melihat versi package dependency JavaScript di file package.json dan membandingkannya dengan versi terbaru yang ada di repository NPMJS .
  105. Vetur . Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS .
  106. Visual Studio IntelliCode . Menambahkan kemampuan Intellisense dengan AI dan suggestion yang tepat.
  107. VS Code Faker . Membuat data palsu untuk alamat, nama, lorem ipsum, dan kontak untuk uji coba.
  108. VS Live Share . Ekstensi untuk berbagi layar dan workspace di VS Code dengan pengguna atau tim proyek yang lain. Sangat berguna untuk melakukan pemrograman atau coding bersama , dengan pengguna yang terpisah jarak .
  109. VS Live Share Extension Pack . Tambahan untuk ekstensi VS Live Share dengan fitur chatting dan mengobrol melalui suara.
  110. Vue 2 Snippets . Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS .
  111. Vue VSCode Snippets . Ekstensi yang menambahkan kemampuan snippets dan intellisense pada penulisan aplikasi web berbasis Vue JS .
  112. Waka Time . Mencatat statistik aktivitas programming kita yang dilakukan di VS Code.
  113. YAML . Menambahkan dukungan untuk sintaks YAML .

Penjelasan detail dari ekstensi-ekstensi tersebut dapat dilihat dengan menekan atau klik tulisan dari nama ekstensi. Ketika diklik, browser akan membuka halaman detailnya di web Visual Studio Marketplace.

Tema dan Ikon Visual Studio Code

Selain ekstensi untuk kenyamanan penulisan kode dan kolaborasi, saya juga menggunakan ekstensi untuk mengubah tema teks editor VS Code ini. Ekstensi ini berupa tema ikon untuk representasi file di dalam folder proyek. Ekstensi tema yang juga dipakai yaitu ekstensi untuk tema pewarnaan kode di dalam teks editor. Cara mengganti tema dan ikon di VS Code cukup mudah, yaitu dengan mengakses menu File > Preferences > Color Theme atau File Icon Theme . Bisa juga dengan menggunakan Command Palette yaitu dengan menekan tombol Ctrl + Shift + P . Kemudian ketikkan Theme , dan opsi pun akan muncul.

Beberapa opsi untuk mengakses setelan tema dan ikon di VS Code

Dokumentasi mengenai tema dan ikon di VS Code ini bisa kalian baca di dokumentasi berikut ini.

Visual Studio Code Themes

Color themes let you modify the colors in Visual Studio Code's user interface to suit your preferences and work…

code.visualstudio.com

Tema favorit yang biasa digunakan ada beberapa macam, diantaranya tema Mayukai Theme dan tema Gruvbox Material. Setiap hari saya selalu mengganti diantara tema teks editor tersebut agar tidak bosan dan lebih bervariasi. Tema-tema ini bisa dipasang di Visual Studio Marketplace.

Tampilan Mayukai Theme

Tampilan tema Gruvbox

Sedangkan untuk tema ikon file yang menjadi favorit adalah tema Material Icon Theme, Nomo Dark Icon Theme, Simple Icons , dan VS Code Great Icons.

Tema ikon untuk Ayu (kiri) dan Seti (kanan)

Beberapa tema untuk memberikan warna di tulisan kode yang saya rekomendasikan yaitu :

  1. Mayukai Theme .
  2. Ayu Theme .
  3. Gruvbox Material .
  4. Cobalt2 Theme .
  5. Horizon Theme .
  6. Palenight Theme .
  7. Material Theme .
  8. Mirage Theme .
  9. Night Owl Theme .
  10. Atom One Dark .
  11. One Dark Pro .
  12. Tomorrow Night Theme .
  13. Shades of Purple .
  14. Hopscotch .
  15. Noctis .
  16. Palenight Theme.

Kemudian berikut daftar tema icon yang saya rekomendasikan dan menarik untuk melengkapi beberapa tema yang telah disebutkan di atas.

  1. VS Code Icons .
  2. Material Icon Theme .
  3. VS Code Great Icon .
  4. Seti Icon . Tema ikon ini adalah tema bawaan di Visual Studio Code.
  5. Ayu Icon . Tema ikon ini adalah tema ikon yang otomatis terpasang ketika memasang Ayu Theme .
  6. Nomo Dark Icon .

Demikian daftar ekstensi dan tema yang saya gunakan untuk melengkapi teks editor Visual Studio Code. Beberapa diantaranya sangat membantu untuk menambah kenyamanan dan produktivitas dalam penggunaan VS Code ini. Silahkan saja kalian coba ekstensi-ekstensi yang telah saya berikan di atas. Siapa tahu bisa cocok dan menjadi menambah produktivitas dan kenyamanan ketika menggunakan Visual Studio Code.

Update April 2019

Saya membuat sebuah extensions pack yang berisi daftar ekstensi, tema, dan icon yang telah saya sebutkan di atas. Ekstensi ini bernama Full JavaScript Complete Pack . Ekstensi ini dapat diunduh melalui Visual Studio Code marketplace dari dalam text editor VS Code langsung. Atau bisa melalui tautan berikut ini.