pada tanggal

 

8 EKSTENSI VS CODE UNTUK WEB DEPELOVER/TOOL MEMPERMUDAH PROGRAMMER

 

 

1.      LIVE SERVER

Live Server adalah ekstensi di Visual Studio Code (VS Code) yang memungkinkan kamu menjalankan file HTML secara langsung di browser dengan fitur live reload, yaitu browser akan otomatis memuat ulang halaman setiap kali kamu menyimpan perubahan di kode.

🔧 Fungsi Live Server di VS Code:

·         Menjalankan website lokal dengan cepat.

·         Melihat perubahan langsung tanpa refresh manual.

·         Mendukung HTML, CSS, JS, dan lainnya.

📦 Cara menggunakannya:

1.      Install ekstensi “Live Server” di VS Code.

2.      Buka file HTML.

3.      Klik kanan > pilih "Open with Live Server".

4.      Browser akan terbuka dan menampilkan hasilnya.

 

 

Gambar: Tampilan Live Server

 

 

 

 

2. PRETTIER

 

Prettier adalah sebuah code formatter — alat yang secara otomatis merapikan kode kamu agar lebih konsisten, rapi, dan mudah dibaca. Prettier mendukung berbagai bahasa pemrograman seperti JavaScript, TypeScript, HTML, CSS, JSON, Markdown, dan lainnya.

🔧 Fungsi Prettier:

  • Merapikan struktur kode (indentasi, spasi, titik koma, dll).
  • Membuat gaya penulisan kode konsisten, terutama dalam tim.
  • Menghemat waktu karena kamu tidak perlu memformat secara manual.
  • Mengurangi perdebatan gaya penulisan kode di tim developer.

✅ Contoh Sebelum & Sesudah Format dengan Prettier:

Sebelum:

javascript

CopyEdit

function hello(name){console.log("Hello, "+name);}

Sesudah (dengan Prettier):

javascript

CopyEdit

function hello(name) {

  console.log("Hello, " + name);

}

⚙️ Cara Menggunakan Prettier di VS Code:

  1. Install Ekstensi: Cari dan pasang ekstensi "Prettier - Code formatter" dari VS Code Extension Marketplace.
  2. Atur sebagai Default Formatter:
    • Buka Settings (Ctrl + ,)
    • Cari: default formatter
    • Pilih: esbenp.prettier-vscode
  3. Aktifkan Format on Save (opsional):
    • Masih di Settings, cari: format on save
    • Centang opsi tersebut

📦 Atau via Terminal (untuk proyek JavaScript/Node.js):

bash

CopyEdit

npm install --save-dev prettier

npx prettier --write .

Kalau kamu ingin Prettier disesuaikan dengan aturan tertentu (misalnya tanpa titik koma, pakai single quote), kamu bisa bikin file config .prettierrc, contohnya:

json

CopyEdit

{

  "semi": false,

  "singleQuote": true,

  "tabWidth": 2

}

Mau aku bantu setup Prettier di project-mu?

Get smarter responses, upload files and images, and more.

 

 



Gambar : Tampilan Prettier

 

 

3.   ESLINT
Eslint ESLint adalah alat analisis kode statis untuk mengidentifikasi pola bermasalah yang ditemukan dalam kode JavaScript. Alat ini dibuat oleh Nicholas C. Zakas pada tahun 2013. Aturan dalam ESLint dapat dikonfigurasi, dan aturan yang disesuaikan dapat didefinisikan dan dimuat. ESLint mencakup masalah kualitas kode dan gaya pengkodean.

 



Gambar : Tampilan ESLint

 

 

4.      EMMET
Emmet adalah sekumpulan plug-in untuk editor teks yang memungkinkan pengkodean dan pengeditan berkecepatan tinggi dalam HTML, XML, XSLT, dan format kode terstruktur lainnya melalui bantuan konten. Proyek ini dimulai oleh Vadim Makeev pada tahun 2008 dan terus dikembangkan secara aktif oleh Sergey Chikuyonok dan para pengguna Emmet.





Gambar : Tampilan Emmet

 

5.   AUTO RENAME TAG

Auto Rename Tag adalah ekstensi di Visual Studio Code (VS Code) yang secara otomatis mengubah pasangan tag HTML atau XML saat kamu mengedit salah satu tag.

🔧 Fungsi Auto Rename Tag:

Jika kamu mengganti tag pembuka (opening tag), maka tag penutup (closing tag) juga akan ikut berubah secara otomatis, dan sebaliknya.

✅ Contoh:

Sebelum Auto Rename Tag:

Kamu edit manual:

html
CopyEdit
<div> <!-- kamu ubah -->
</div> <!-- kamu juga harus ubah -->

Setelah Install Auto Rename Tag:

Kamu hanya perlu ubah <div> menjadi <section>, maka </div> otomatis jadi </section>.

🚀 Cara Menggunakan Auto Rename Tag di VS Code:

  1. Buka Visual Studio Code.
  2. Masuk ke Extensions (Ctrl + Shift + X).
  3. Cari: Auto Rename Tag.
  4. Install ekstensi oleh Jun Han (ikon biru dengan simbol tag).
  5. Selesai! Sekarang perubahan pada tag akan otomatis menyinkronkan pasangan tag-nya.

🧠 Catatan:

  • Ekstensi ini sangat berguna untuk proyek HTML, JSX (React), XML, dan lainnya.
  • Bisa dikombinasikan dengan Auto Close Tag dan Prettier untuk pengalaman coding frontend yang lebih efisien.

Top of Form

Bottom of Form

 

6.   SONARQUBE (CODE QUALITY ANALYSIS)

 

SonarQube adalah sebuah platform open-source yang digunakan untuk menganalisis kualitas kode secara statis. Ini membantu tim developer untuk:

  • Menemukan bug, kerentanan keamanan, dan code smell (kode yang tidak efisien atau sulit dirawat),
  • Meningkatkan maintainability dan keandalan kode sumber,
  • Memastikan kode memenuhi standar coding yang baik.

🧠 Fungsi Utama SonarQube:

Fungsi

Penjelasan

🔍 Static Code Analysis

Menganalisis kode tanpa menjalankan program

🔐 Security Analysis

Mendeteksi potensi kerentanan keamanan

⚠️ Code Smells

Menemukan bagian kode yang berpotensi membingungkan atau boros

📊 Quality Gate

Menetapkan ambang batas (threshold) agar kode bisa dianggap "lulus" kualitasnya

💬 Integrasi CI/CD

Bisa diintegrasikan dengan Jenkins, GitHub Actions, GitLab CI, dll

📦 Bahasa yang Didukung:

  • Java, JavaScript, TypeScript
  • C#, C, C++
  • Python, Go, Kotlin, PHP, dll.

🚀 Cara Kerja (Secara Umum):

  1. Install SonarQube di lokal/server.
  2. Tambahkan SonarScanner ke dalam proyek (via CLI atau plugin CI/CD).
  3. Jalankan analisis:

bash

CopyEdit

sonar-scanner \

  -Dsonar.projectKey=namaproject \

  -Dsonar.sources=. \

  -Dsonar.host.url=http://localhost:9000 \

  -Dsonar.login=token_anda

  1. Lihat hasil analisis di dashboard web SonarQube (biasanya http://localhost:9000).

🧰 Tools Tambahan:

  • SonarScanner CLI – untuk proyek lokal.
  • SonarLint – plugin di VS Code/IntelliJ untuk analisis langsung saat menulis kode.
  • Integrasi CI/CD – GitHub Actions, Jenkins, Azure DevOps, dll.

🏁 Kelebihan:

✅ Membantu menjaga kualitas kode dalam jangka panjang
✅ Bisa diotomatisasi di CI/CD
✅ Dashboard visual yang informatif
✅ Mendukung banyak bahasa

Kalau kamu butuh panduan install SonarQube di lokal (Windows/Linux), atau integrasi dengan CI seperti GitHub Actions atau Jenkins, tinggal bilang saja ya.

 

 

7.   Git hooks (otomatisasi sebelum commit).

Git hooks adalah skrip otomatis yang dijalankan oleh Git pada saat kejadian tertentu terjadi dalam siklus hidup repositori Git, seperti sebelum melakukan commit, setelah push, atau setelah merge.

💡 Penjelasan Sederhana

Git hooks = "otomatisasi di balik layar Git."

Dengan Git hooks, kamu bisa:

  • Mencegah commit jika ada error (misalnya kodingan belum di-format).
  • Menolak push jika tidak sesuai aturan.
  • Mengecek format pesan commit.
  • Menjalankan test otomatis sebelum kode dikirim.

📦 Contoh Jenis Git Hooks

Nama Hook

Kapan Dijalankan

Contoh Fungsinya

pre-commit

Sebelum commit dibuat

Cek format kode, linting, test

commit-msg

Setelah tulis pesan commit

Validasi format pesan commit

pre-push

Sebelum melakukan push

Jalankan test, pastikan branch sesuai

post-merge

Setelah proses merge selesai

Rebuild file, pasang dependensi ulang

🔧 Cara Menggunakan Git Hooks

  1. Masuk ke folder .git/hooks di dalam repositori Git kamu.
  2. Contoh mengaktifkan pre-commit:

bash

CopyEdit

cp .git/hooks/pre-commit.sample .git/hooks/pre-commit

  1. Edit file pre-commit, isi dengan perintah yang kamu inginkan (misalnya bash, Python).
  2. Buat file itu bisa dieksekusi:

bash

CopyEdit

chmod +x .git/hooks/pre-commit

🧪 Contoh: Hook pre-commit untuk Cek Format Kode

bash

CopyEdit

#!/bin/sh

echo "Menjalankan pengecekan kode..."

black . || {

  echo "Format kode tidak sesuai. Commit dibatalkan."

  exit 1

}

📁 Catatan Penting

  • Git hooks tidak dibagikan secara otomatis ke tim karena berada di dalam .git/.
  • Supaya bisa digunakan bersama tim:
    • Pakai tools seperti Husky (khusus JavaScript/Node.js).
    • Atur core.hooksPath supaya menggunakan folder hooks di luar .git.

Kalau kamu ingin contoh Git hook untuk kebutuhan tertentu (seperti validasi commit message atau menjalankan test), tinggal beri tahu saja ya!

 

 

8.      AI Assitant (AI khusus buat bantuan ngoding).

 

 

AI Assistant (Asisten AI) adalah program atau sistem berbasis kecerdasan buatan (Artificial Intelligence/AI) yang dirancang untuk membantu manusia melakukan berbagai tugas, baik secara otomatis maupun interaktif, menggunakan pemrosesan bahasa, pembelajaran mesin, dan/atau logika cerdas.

🧠 Penjelasan Sederhana

AI Assistant = "asisten digital pintar yang bisa diajak ngobrol atau memberi bantuan dalam berbagai hal."

🎯 Contoh Fungsi AI Assistant

  1. Menjawab pertanyaan
    → Misalnya: “Apa itu Git?”, “Berapa kurs dolar hari ini?”
  2. Membantu pekerjaan teknis
    → Contoh: menulis kode, membuat presentasi, menganalisis data.
  3. Membantu komunikasi
    → Menerjemahkan bahasa, membuat email, memperbaiki tata bahasa.
  4. Membantu otomasi tugas
    → Jadwalkan pertemuan, kirim pengingat, atur tugas.
  5. Berbasis suara atau teks
    → Siri, Alexa, Google Assistant (berbasis suara)
    → ChatGPT, Copilot, Claude (berbasis teks)

⚙️ Teknologi di Balik AI Assistant

  • Natural Language Processing (NLP): agar bisa mengerti dan merespons bahasa manusia.
  • Machine Learning (ML): agar bisa belajar dari data dan membaik seiring waktu.
  • Speech Recognition & Synthesis: (jika berbasis suara) untuk memahami dan merespons lewat audio.

🧑‍💻 Contoh AI Assistant Populer

Nama

Jenis Interaksi

Contoh Penggunaan

ChatGPT

Teks/chat

Tanya jawab, penulisan, pemrograman

Google Assistant

Suara & teks

Perintah harian, info cuaca, navigasi

Siri (Apple)

Suara

Tugas iPhone seperti membuka aplikasi

Alexa (Amazon)

Suara

Smart home, musik, belanja

Microsoft Copilot

Teks

Bantu menulis di Word, Excel, dll

Kalau kamu mau, aku juga bisa bantu membuat AI Assistant sederhana (misalnya chatbot untuk website atau asisten dalam aplikasi tertentu). Mau coba?

 

 

 

 

 

 

 

sukses itu maju ke depan bukan ke belakang dan selalu berpikir positif

Komentar

Posting Komentar