Ekstensi dan Tema VS Code yang bisa membuat mu semangat ngoding.

Blog Aug 28, 2020

Text editor merupakan salah satu tools yang wajib dimiliki oleh seorang programmer atau developer, tanpa text editor programmer atau developer akan kesusahan dalam membangun atau mengembangkan suatu aplikasi maupun website.

Saat sekarang ini sudah banyak text editor yang membantu para developer dalam membangun dan mengembangkan aplikasi, seperti:

  • Notepad++
  • Sublime Text 3
  • Atom
  • IntelliJ IDEA
  • Visual Studio Code
  • dst.

Dari tiap-tiap text editor memiliki kelebihan dan kekurangannya masing-masing, seperti Notepad++ ( ringan tapi gk ada autocomplete ), Sublime text 3 ( highlight code nya udah lumayan bagus dibanding notepad++ tapi autocomplete nya masih ngebaca local file ), Atom ( highlight nya bagus, autocomplete bagus, tetapi rada berat ),  intellij ( highlight, autocomplete bagus akan tetapi berbayar untuk mencoba fitur ultimate text editor ), Visual Studio Code ( highlight, autocomplete, dan bagus utk development JS / TS ).

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

Visual Studio Code dibangun oleh Microsoft dan text editor ini bersifat Open Source, yang mana kita bisa berkontribusi dalam mengembangkannya.

Tema yang saya gunakan dalam mengembangkan aplikasi menggunakan VS Code

  1. One Dark Pro
  2. Font FiraCode
  3. Material Icon Theme

One Dark Pro

Ekstensi highlighting ini sangat membantu saya dalam hal memisahkan warna di setiap variable, function, class dan lainnya.

One Dark Pro - Visual Studio Marketplace
Extension for Visual Studio Code - Atom’s iconic One Dark theme for Visual Studio Code

Font FiraCode

Font dari FiraCode ini memberikan kesan yang menarik karna stuktur fontnya mengikuti rules programmer misalkan simbol ( -> ) pada font firacode simbol ini akan berubah menjadi tanda panah, dari situ cukup membantu dan unik aja gitu.

tonsky/FiraCode
Free monospaced font with programming ligatures. Contribute to tonsky/FiraCode development by creating an account on GitHub.

Material Icon Theme

Material Icon ini cukup banyak icon-icon yang ada, jadi ketika membuat sebuah folder yang udah nge tag si icon nya, folder tersebut akan mendapatkan icon yang diharapkan.

Material Icon Theme - Visual Studio Marketplace
Extension for Visual Studio Code - Material Design Icons for Visual Studio Code

Adapun ekstensi VS Code yang dapat memudahkan kerjaan mu, yakni:

  1. Gitlens
  2. File Utils
  3. Visual Studio IntelliCode
  4. Sublime Text Keymap
  5. Prettier
  6. Eslint
  7. ES7 React / Redux / GraphQL / React-Native Snippet
  8. dotENV
  9. Docker
  10. Wakatime

GitLens

source: vs code

Dengan Gitlens kita bisa lihat perubahan codingan di line tertentu / di file tertentu, dan masih banyak fungsi lainnya.

File Utils

source: vs code

Dengan File Utils memiliki fungsi yang sangat bermanfaat, seperti ( file delete, file duplicate, file move, file rename, dst ). dikarenakan bawaan dari VS Code nya ada beberapa options klik kanan yang kurang akan bisa terbantu oleh ekstensi ini.

Visual Studio IntelliCode

source: vs code

Sebenarnya intelisense dari VS Code itu sendiri sudah ada, akan tetapi masih ada kekurangan kalo menurut ku. Dengan Visual Studio IntelliCode ini kita bisa tau suggestion mana yang penting / suggestion yang di sarankan. Ini membuat kita menjadi lebih tau dan terarah utk menggunakan suggestionnya.

Sublime Text Keymap

source: vs code

Dikarenakan keymap nya VS Code rada aneh, contoh: misalkan kita mau copy 1 line biasanya di text editor lain menggunakan shortcut / keymap ( Ctrl + D ). Malah di VS Code jadi aneh kalo pencet tombol Ctrl + D nya. Maka dari itu aku menggunakan ekstensi ini, dan sampai sekarang masih sangat membantu dalam mengerjakan proyek di VS Code.

Prettier

source: vs code

Dengan menggunakan ekstensi ini, kodingan kamu akan menjadi rapi dan kalo ada rules prettiernya juga ngebantu kita.

Eslint

source: vs code

Ketika kita menggunakan eslint kita akan diarahkan ngoding ke jalan yang benar, dengan rules eslint, ini sangat membantu kita saat membuat variable, function maupun class. Dan jika dikombinasikan dengan prettier, ini akan menjadi ekstensi yang sangat powerfull..

ES7 React / Redux / GraphQL / React-Native Snippet

source: vs code

Dengan ekstensi ini sangat membantu dalam mengembangkan proyek berbasis framework react js, redux, graphql dan react-native.

dotENV

source: vs code

Ekstensi ini cuma membuat .env kamu jadi lebih bagus dengan highlighting nya yang tidak membuat pusing.

Docker

source: vs code

Dengan ekstensi ini membuat kita jadi lebih mudah dalam ngatur config Dockerfile maupun docker-compose.yml, serta menjadi shortcut langsung di text editor nya tanpa harus membuka Docker Dashboard.

Wakatime

source: vs code

Ekstensi ini dapat membantu kamu dalam melihat aktifitas ngoding kamu dalam sehari, seminggu, bahkan bulanan. Ini sangat membantu kamu dalam kerja freelance atau pun lembur jadi aktifitas kamu sewaktu ngoding akan ke catat di website Wakatime saat kamu integrasikan dengan VS Code.

Conclusion

Ada beberapa Tema yang bagus utk di coba, yakni One Dark Pro, Font FiraCode dan Material Icon Themes, disini saya sangat suka menggunakan FiraCode karna font nya unik saat digunakan utk ngoding, dan Hightlight One Dark Pro juga bagus untuk ngasih hightlight utk function, variable, class dan lainnya.

Dan tidak lupa pula utk ekstensi yang menurut saya sangat ngebantu dalam mengembangkan sebuah produk maupun mengerjakan project dari client.

Referensi

Artikel diatas saya kutip dari beberapa sumber :

  1. https://code.visualstudio.com/
  2. https://github.com/tonsky/FiraCode

Tags

N. Fajri

Hi, I'm a Full Stack Developer from Indonesia, currently, I'm a working on Nusantech. Beside's programming, I enjoy eating food and traveling. I like to explore new things related to technology.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.