Pelajari cara menghubungkan Visual Studio Code ke shared hosting menggunakan ekstensi SFTP agar file HTML, CSS, dan JavaScript otomatis ter-upload setiap kali disimpan. Lengkap dengan konfigurasi sftp.json dan penjelasan setiap parameternya.

Saat belajar HTML, CSS, atau JavaScript, banyak pemula masih menggunakan cara manual untuk mengunggah file ke hosting.

Workflow yang dilakukan biasanya seperti ini.

Jika proses tersebut dilakukan beberapa kali mungkin tidak terasa. Namun ketika mulai membuat halaman web yang lebih kompleks, kamu bisa mengulangi langkah tersebut puluhan bahkan ratusan kali dalam sehari.

Selain memakan waktu, cara ini juga membuat proses belajar menjadi kurang efisien.

Untungnya, Visual Studio Code memiliki ekstensi SFTP yang memungkinkan file langsung ter-upload ke shared hosting setiap kali disimpan.

Dengan begitu workflow berubah menjadi jauh lebih sederhana.

Kamu cukup fokus menulis kode, sedangkan proses upload dilakukan secara otomatis di belakang layar, bahkan setelah cursor berpindah untuk auto save.

Pada tutorial ini kamu akan mempelajari cara menghubungkan Visual Studio Code ke shared hosting menggunakan FTP sehingga setiap perubahan pada file kode sumber atau assets projek mu bisa langsung dikirim ke server.

Persyaratan

Sebelum memulai, pastikan kamu telah memiliki beberapa hal berikut.

• Visual Studio Code
• Shared Hosting yang mendukung FTP
• Akun FTP pada cPanel
• Domain yang sudah aktif
• Folder website yang dapat diakses melalui browser

Jika seluruh persyaratan tersebut sudah tersedia, kita dapat melanjutkan ke proses konfigurasi.

---

Langkah 1 — Membuat FTP Account di cPanel

Langkah pertama adalah membuat akun FTP yang nantinya digunakan oleh Visual Studio Code untuk terhubung ke hosting.

Masuk ke dashboard cPanel, kemudian cari menu FTP Accounts.

Pada halaman tersebut, buat akun FTP baru sesuai kebutuhan.

Setelah akun berhasil dibuat, simpan beberapa informasi penting berikut karena akan digunakan pada proses konfigurasi Visual Studio Code.

FTP Username

Username digunakan sebagai identitas saat Visual Studio Code melakukan koneksi ke server.

Contohnya:

belajar@sungkanngoding.com

Pastikan menggunakan username FTP yang benar, bukan username cPanel jika keduanya berbeda.

FTP Password

Password berfungsi untuk melakukan autentikasi ke server FTP.

Gunakan password yang kuat dan hindari menggunakan kombinasi yang mudah ditebak.

Jika lupa password, kamu dapat menggantinya kembali melalui menu FTP Accounts di cPanel.

FTP Host

Host merupakan alamat server FTP yang akan dihubungi oleh Visual Studio Code.

Contohnya dapat berupa:

ftp.namadomain.com

Pada beberapa penyedia hosting, host FTP juga dapat berupa alamat IP server.

Remote Directory

Remote Directory merupakan folder tujuan tempat file website akan disimpan.

Jika website utama berada pada domain utama, biasanya menggunakan:

/

Sedangkan untuk addon domain atau subdomain, direktori dapat berupa:

/public_html/namadomain

atau

/subdomain

Pastikan direktori yang digunakan sesuai dengan lokasi website pada hosting.

---

Langkah 2 — Install Extension SFTP

Selanjutnya buka Visual Studio Code.

Kemudian pilih menu Extensions atau tekan tombol:

Ctrl + Shift + X

Cari ekstensi berikut.

Setelah ditemukan, klik Install dan tunggu hingga proses instalasi selesai.

Ekstensi ini akan bertugas menghubungkan Visual Studio Code dengan server hosting menggunakan protokol FTP maupun SFTP.

---

Langkah 3 — Membuat File sftp.json

Buka folder project HTML kamu di Visual Studio Code.

Kemudian tekan:

Ctrl + Shift + P

Lalu jalankan perintah:

SFTP: Config

Visual Studio Code akan membuat folder:

.vscode

Di dalamnya terdapat file:

sftp.json

Ubah isi file tersebut menjadi seperti berikut.

{
  "name": "belajar",
  "host": "ftp.namadomain.com",
  "protocol": "ftp",
  "port": 21,
  "username": "belajar@sungkanngoding.com",
  "password": "PASSWORD-FTP",
  "remotePath": "/",
  "uploadOnSave": true,
  "useTempFile": false,
  "openSsh": false,
  "ignore": [
    ".vscode",
    ".git",
    "node_modules"
  ],
  "watcher": {
    "files": "**/*.{html,css,js}",
    "autoUpload": true,
    "autoDelete": true
  }
}

Selanjutnya, mari kita pahami fungsi setiap parameter agar tidak sekadar menyalin konfigurasi tanpa mengetahui kegunaannya.

Parameter	Fungsi
name	Nama konfigurasi yang akan muncul pada Visual Studio Code. Bebas diisi sesuai nama project.
host	Alamat FTP server tujuan. Biasanya berupa ftp.domain.com atau alamat IP hosting.
protocol	Menentukan jenis koneksi yang digunakan, misalnya ftp atau sftp. Pastikan sesuai dengan layanan hosting yang digunakan.
port	Nomor port koneksi. FTP menggunakan port 21, sedangkan SFTP biasanya menggunakan port 22.
username	Username FTP yang telah dibuat melalui cPanel.
password	Password akun FTP. Pastikan sesuai agar proses login berhasil.
remotePath	Folder tujuan tempat file akan di-upload. Jika website berada di root hosting, gunakan /.
uploadOnSave	Jika bernilai true, setiap kali file disimpan menggunakan Ctrl + S, Visual Studio Code akan langsung mengunggah perubahan ke server.
useTempFile	Menentukan apakah upload menggunakan file sementara. Umumnya cukup menggunakan false.
openSsh	Digunakan jika ingin memakai OpenSSH. Untuk koneksi FTP biasa, gunakan false.
ignore	Daftar folder atau file yang tidak akan ikut di-upload ke hosting. Sangat penting agar folder konfigurasi dan Git tidak ikut terkirim.
watcher.files	Menentukan jenis file yang akan dipantau secara otomatis. Pada contoh ini semua file ter-upload kecuali yang di ignore.
watcher.autoUpload	Mengaktifkan upload otomatis ketika file mengalami perubahan.
watcher.autoDelete	Menghapus file di server jika file tersebut dihapus dari project lokal sehingga struktur folder tetap sinkron.

Sampai tahap ini, Visual Studio Code telah berhasil terhubung dengan shared hosting. Pada bagian selanjutnya kita akan menguji apakah fitur Auto Upload sudah berjalan dengan benar, sekaligus membahas berbagai masalah yang sering muncul seperti Login Authentication Failed, Timeout While Connecting to Server, Upload Berhasil Tapi File Tidak Muncul, serta berbagai solusi yang dapat diterapkan.

Kesimpulan

Menghubungkan Visual Studio Code ke shared hosting menggunakan ekstensi SFTP merupakan salah satu cara terbaik untuk mempercepat workflow pengembangan website.

Dengan mengaktifkan fitur uploadOnSave, setiap perubahan pada file kode sumber akan langsung dikirim ke server saat file disimpan. Hal ini menghilangkan kebutuhan untuk membuka cPanel dan mengunggah file secara manual setiap kali melakukan perubahan.

Bagi pemula yang sedang belajar Frontend Development, workflow ini dapat menghemat banyak waktu sehingga proses belajar menjadi lebih fokus pada penulisan kode daripada pekerjaan berulang.