Cara Setting FTP di Visual Studio Code

Visual Studio Code adalah salah satu text editor yang dapat Anda gunakan untuk mengelola file atau folder di server hosting. Anda dapat menghubungkan Visual Studio Code dengan server melalui protokol FTP. Dalam artikel ini, kami akan berbagi cara setting FTP di Visual Studio Code secara mudah.

Sebelum kami bahas tentang cara setting FTP di Visual Studio Code, terlebih dahulu kita akan membahas tentang apa itu FTP untuk memudahkan Anda dalam memahami artikel ini. Berikut informasinya.

Apa itu FTP?

Seperti yang telah kita ketahui bersama, FTP adalah singkatan dari File Transfer Protocol. Dari namanya, kita sudah bisa menebak bahwa ftp merupakan protokol yang berfungsi untuk melayanai transfer file, baik dari local ke server ataupun sebaliknya.

Pada layanan hosting, Anda dapat menggunakan username dan password cPanel untuk menghubungkan server dengan aplikasi ftp client. Dengan FTP, kita dapat mengupload, mengedit, hingga menghapus data di server secara lebih mudah.

Informasi lebih lanjut mengenai FTP dapat dilihat dari halaman berikut ini: Apa itu FTP?

Mengenal Visual Studio Code

Visual Studio Code atau yang biasa kita kenal sebagai VS Code adalah aplikasi text editor yang dikembangkan oleh Microsoft. Visual Studio Code adalah software open source yang tersedia secara gratis dan dirancang khusus untuk pengembangan perangkat lunak.

Pada perkembangannya, Visual Studio Code tidak hanya digunakan untuk edit script website namun juga digunakan untuk beberapa fungsi lain seperti SSH, debug, GIT hingga koneksi FTP.

Saat ini VS Code dapat dijalankan di berbagai platform termasuk Windows, macOS, dan Linux, sehingga sangat fleksibel dalam penggunaannya.

Setting FTP di Visual Studio Code

Ada beberapa hal yang perlu Anda lakukan untuk menghubungkan FTP dengan Visual Studio Code, yaitu seperti install plugin atau extension hingga melakukan login. Berikut langkah-langkahnya.

Step 1. Install extension FTP

Langkah pertama yang perlu dilakukan adalah Install plugin atau extension FTP di Visual Studio Code. Ada beberapa extension yang bisa Anda gunakan seperti ftp-simple, ftp-sync, simple-ftp atau yang lain.

Pastikan Anda mengunduh ekstensi berbasis FTP, bukan SFTP. Di tutorial kali ini, kami akan menggunakan extension ftp-simple.

Step 2. Setting FTP

Setelah extension terinstal, langkah selanjutnya adalah melakukan setting FTP di VS Code.

1. Pada extension ftp-simple tekan F1, lalu pilih ftp-simple : Config – FTP connection setting seperti gambar berikut.
   
   Nantinya kita akan diarahkan untuk mengatur (setup) settingan FTP hosting/server/vps tujuan.

2. Selanjutnya, silahkan melengkapi data FTP yang akan Anda gunakan untuk menghubungkan VS Code ke server. Apabila Anda menggunakan cPanel, Anda dapat menggunakan username dan password login ke cPanel sebagai FTP User.
   
   Anda juga bisa membuat akun FTP di cPanel yang panduannya bisa Anda pelajari pada artikel berikut: cara membuat akun FTP cPanel

Keterangan pengisian :

• “name” : “namadomain.com”,
• “host” : “ftp.namadomain.com”,
• “port” : 21,
• “type” : “ftp”,
• “username” : “username_ftp”,
• “password” : “password_ftp”,
• “path” : “/”,
• “autosave” : true,
• “confirm” : true

Catatan: Pada bagian name, host, username, password disesuaikan dengan akun FTP Anda masing-masing. Berikut contoh tampilan isian settingan FTP di Visual Studio Code-nya.

3. Selanjutnya tekan F1 dan pilih ftp-simple : Open – Open the file directly from FTP server, lalu pilih nama domain yang ingin di remote.

4. Apabila berhasil, tampilan teks editor Visual Studio Code akan seperti gambar berikut.

Di sebelah kiri (sidebar) akan ditampilkan folder atau file yang ada di hosting Anda pada directory root user FTP. Sampai tahap ini, Anda dapat melakukan edit script, hapus, membuat file baru, membuat folder baru di server Anda melalui teks editor VS code.

Demikian artikel kami tentang cara setting FTP di Visual Studio Code, semoga bermanfaat.