fbpx

Order Now - Dedicated Server High Performance

Panduan

Cara Merapikan Coding di Visual Studio Code Secara Otomatis 

Wiliam

Pada kesempatan kali ini kami akan memberikan cara merapikan coding di visual studio code secara otomatis dengan menggunakan extension prettier dan beautify. Sebagai seorang programmer tentu saja pasti bizzie sudah tidak asing lagi dengan text editor Visual Studio Code atau biasa juga disebut VS Code. VS Code sendiri merupakan text editor yang bersifat open source atau gratis. 

Namun, jangan salah karena di dalam aplikasi tersebut sendiri memiliki banyak sekali extension yang sangat membantu khususnya pada saat bizzie sedang membuat program. Salah satu extension yang ada adalah extension bernama Prettier dan Beautify. Prettier dan Beautify ini adalah extension atau add-on di dalam VS Code. Dimana extension ini akan berguna untuk membantu bizzie dalam merapikan kode program atau coding. 

Tentu saja bizzie pasti pernah mengalami ketika copy paste sebuah kode atau membuat kode sendiri terkadang bizzie perlu merapikan sendiri secara manual. Namun, dengan keberadaan extension Prettier dan Beautify ini, kode program yang bizzie buat sendiri bisa secara otomatis dirapikan. Berikut ini ada penjelasan lengkap cara merapikan coding di visual studio code dengan menggunakan extension Prettier dan Beautify. 

Cara Merapikan Coding di Visual Studio Code 

Pada umumnya fungsi dari kedua extension yaitu Prettier dan Beautify adalah sama yaitu berguna untuk membantu dalam merapikan kode program. Namun, tetap saja ada perbedaan yang membuat kami merasa bahwa extension Prettier jauh lebih overpower jika dibandingkan Beautify. 

Perbedaan diantara keduanya adalah pada saat menggunakan extension Beautify maka extension ini hanya bekerja untuk merapikan kodenya saja. Sedangkan jika bizzie menggunakan extension Prettier, selain merapikan kode ia juga menambahkan beberapa elemen atau sesuatu yang kurang di dalam program tersebut.

Sebelum mengetahui cara merapikan coding di visual studio code, ada baiknya bizzie mengetahui kelemahan dari extension Prettier itu sendiri. Jika sebelumnya kami sudah menjelaskan bahwa extension Prettier ini jauh lebih overpower dibandingkan extension Beautify, namun ada hal lain yang harus bizzie pertimbangkan juga. Contohnya adalah sebuah template untuk bagian Header yang dibuat menjadi dinamis dengan menggunakan JSX. 

Masalah cara merapikan coding di visual studio code yang akan dihadapi karena adanya extension Prettier ini adalah dimana ia akan secara otomatis menambahkan tag yang kurang. Tentu saja hal tersebut cukup merepotkan, terlebih lagi jika bizzie adalah seorang pemula. Namun, untuk mengatasi masalah tersebut mau tidak mau bizzie harus mematikannya sementar. Bizzie juga bisa memberikan pengecualian terhadap Prettier agar ia bisa bekerja pada bahasa pemrograman tertentu. 

Cara Merapikan Coding di Visual Studio Code 

Setelah bizzie mengetahui fungsi dan juga contoh penggunaan extension, berikut ini adalah penjelasan bagaimana cara merapikan coding di visual studio code. Dengan cara menginstall dan melakukan konfigurasi sebelum extension ini bisa bekerja. 

1. Melakukan Instalasi 

Cara merapikan coding di visual studio code yang pertama adalah dengan melakukan instalasi. Dimana untuk menginstall, bizzie perlu masuk ke dalam menu extension atau dengan cara menekan CTRL+Shift+X secara bersamaan. Jika sudah, bizzie bisa mencari dengan cara masukkan kata kunci yaitu Prettier atau Beautify pada bagian kolom pencarian. Kemudian bizzie akan melihat gambar dari kedua extension tersebut. Dimana extension Prettier berlogo huruf P dan Beautify berlogo sebuah kelopak bunga berwarna pink. Jika sudah selesai menginstall extensionnya maka langkah selanjutnya adalah melakukan konfigurasi. 

2. Melakukan Konfigurasi 

Cara merapikan coding di visual studio code selanjutnya adalah melakukan konfigurasi. Untuk melakukan konfigurasi ini, bizzie harus masuk ke dalam menu settings. Bizzie juga bisa menekan tombol CTRL + secara bersamaan. Jika sudah terbuka, maka ketik formatter di bagian form pencarian. Maka setelah itu akan muncul sebuah tampilan. Pada bagian Default Formatter bizzie bisa pilih ingin menggunakan extension Prettier atau Beautify. Selain itu, bizzie juga bisa memilih untuk mengaktifkan Format on Paste atau Format on Save. Singkatnya adalah bizzie harus memilih apakah kode tersebut akan dirapikan ketika kode di pastekan atau ketika kode di save. 

Visual Studio Code merupakan sebuah teks editor multiplatform yang dikembangkan oleh perusahaan Microsoft dan tersedia di Windows, Linux atau Mac. Visual Studio Code ini juga sudah mendukung banyak bahasa pemrograman, seperti JavaScript, Typescript dan Node.js. Ada juga bahasa pemrograman lainnya dengan bantuan plugin yang bisa dipasang di Visual Studio Code ini seperti C++, C#, Python, Go, Java dan lain sebagainya. 

Visual Studio Code telah memiliki berbagai fitur berguna yang tentu saja akan terus bertambah seiring dengan perkembangan versi VSCode itu sendiri. Perkembangan Visual Studio Code ini juga dilakukan berkala setiap bulannya. Hal tersebut membuat Visual Studio Code jauh lebih unggul dibandingkan teks editor lainnya. cara merapikan coding di visual studio code juga terbilang mudah. 

Jadi, itu dia tadi bagaimana cara merapikan coding di visual studio code secara otomatis dengan menggunakan bantuan extension, yaitu Prettier dan Beautify, Apabila membahas mana yang jauh lebih baik antara extension Prettier dan extension Beautify tentu saja semua kembali kepada bizzie sendiri. Bizzie bisa memilih salah satu extension tersebut yang sesuai dengan kebutuhan. Cukup sekian, semoga dengan adanya artikel ini dapat memberikan informasi yang lebih seputar bahasa pemrograman yang bermanfaat untuk para pemula atau yang sudah profesional. 

Baca Juga