Using VSC for Web Dev – Web Scripting

Set Up A Local Directory Structure

Create a directory on your laptop’s hard drive that has the name of your website. For example, I have a directory named n0code.net. Inside that directory create a subdirectory named public_html. We will place all of our files for our website in the public_html directory.

Download Visual Studio Code (VSC)

You can find it at https://code.visualstudio.com.

Create a Home Page

Start VSC and on the splash page choose Open. The app will open a file picker. Choose to the public_html file that you created earlier.

Now in VSC, create a file in public_html named index.html and add the following HTML code to the file.

<!doctype html>
<html>
  <head></head>
  <body>
    <h1>My Home Page</h1>
  </body>
</html>

Set up Automatic Upload

Next we’ll setup VSC to automatically upload our files to our server when we save the files. To do this we need a VSC extension.

Click the Extensions icon on the left side of the VSC app. Search for SFTP and install the SFTP extension by Natizyskunk.

Click the Explorer icon on the left side of the VSC app to close the Extensions search and open the file explorer pane.

In the VSC toolbar, choose View and then Command Palette... In the Command Palette, search for SFTP:Config and choose it from the drop down box. This should open a file named sftp.json.

Edit the sftp.json file using the following as a template. Note that you will need to replace the highlighted items to reflect your hosting account’s information.

host: Replace with your domain name.
username: Replace with your cPanel username.
password: Add the password property and replace 12345678 with your cPanel password.
remotePath: Replace the underlined part of the path with your cpanel username.

After you’ve made the necessary changes, save the file.

Test the SFTP Connection

In VSC, open your index.html file and save the file. If successful, on the left side of the bottom edge of VSC you should see SFTP change to done index.html and then change back to SFTP.

Open a browser and navigate to your webpage. You should see the index.html page you created.