ckportfolio.com - Setting Up Visual Studio Code

Setting Up Visual Studio Code

Installing Visual Studio Code and SFTP Plugin

Download and install Visual Studio Code. Upon launch, click on the fifth tab from the top, and search for sftp.

Clicking on Install in the right pane will enable SFTP communication between the editor and the server.

Workspace and Connection

Create a new folder that will serve as your workspace, and simply drag into the VS Code window. The sidebar will display the contents of the folder. Here, select View from the top menu bar and select Command Palette, a simple search box for all VS commands:

Type in relevant keywords to look for SFTP: Config, and press return / enter key to open up the configuration file.

Replace the placeholder content with the following JSON snippet, including the two braces:

{
    "name": "OCAD Server by CK",
    "host": "ocad.ckprototype.com",
    "protocol": "sftp",
    "port": 22,
    "username": "ocad",
    "password": "100mccaulst",
    "remotePath": "/var/www/ocad.ckprototype.com/public",
    "uploadOnSave": true
}

If you can verify that OCAD Server by CK is available for your perusal in the sixth tab, you are now ready to start coding directly in the remote server.

Simple "Hello World"

Using the illustration below, create a folder (ex. wk1-ck) within your workspace and create a index.php within the new folder. It is extremely important for you to ensure that all your code is neatly stored in a single folder, so that your code does not cause conflict with others in this shared server.

Simply edit the file and save, and the bottom status bar will notify successful upload. We can now go to the following path to review our work: http://ocad.ckprototype.com/public/{foldername}/

ex. http://ocad.ckprototype.com/public/wk1-ck/

It looks like the code made its way into the server seamlessly, with our work immediately available on a public server. We are now ready to move onto the next task.

Fin