Using VSCode Locally

How to use local VSCode to work on an instance. 

The default code editor for MDOQ development is web based VSCode, which is configured and setup to work as soon as your instance is ready. However if you wish to work with your local version of VSCode (which will have your theme, extensions and preferences), there are only a extra steps to connect your machine to VSCode.

Prerequisites

• Your public SSH key added to instance configuration
• A development instance created
• VSCode installed
• VSCode Remote - SSH extension installed

Steps

1. The first step is to gather the connection information from the instance. Select it, and navigate to Settings => SSH and scroll to the bottom of allowed Identities under which should be two fields
   
   • Host
   • Username
2. Open VSCode and click the "Remote Explorer" icon
   
   (It should be on the left hand navigation bar)
3. Click the cog icon to configure your settings
   
   This will ask you which file to edit, usually the default is correct. If not you will need to determine which is the correct file.
4. This will open the file specified, there may already be entries.
   Scroll to the bottom of the file and add the following
   

   Host [INSTANCE_NAME]
     HostName [HOST]
     User [USER]
     Port [PORT]
     IdentityFile [SSH_PATH]
       

   You will need to change:
   
   • [INSTANCE_NAME] - change this to a recognisible name. (It doesn't need to match anything in MDOQ) If you want spaces, wrap it in "'s
   • [HOST] change this to be everyting before the ":" from the Host you collected from the instance settings.
   • [USER] change this to the User collected from the instance settings.
   • [PORT] change this to be everything after the ":" from the Host you collected from the instance settings
   • [SSH_PATH] change this to be the path of your private key file. On linux/mac this is usually "~/.ssh/id_rsa"
   Then save the file.
   For example
   

   Host "Demo Instance"
     HostName acme.00.mdoq.io
     User magento
     Port 1234
     IdentityFile "~/.ssh/id_rsa"
       

5. Click the refresh button
   
6. You should then see your [INSTANCE_NAME] value in the list
   
7. Hover of the connection and select the "Connect in new window icon"
   
8. In the new window you will be asked a few questions:
   
   • "Select the platform" - Select "Linux"
   • "Accept fingerprint" - Select "Continue"
9. Once connected, click the files button on the left
   
10. Click "Open folder"
11. In the popup, enter "/home/magento/htdocs" and click okay
    (the window will refresh)
12. That's it you should now be able to edit files, and if you open a terminal (`Ctrl` + `Shift` + `'` or select Terminal > New Terminal from the top nav )  run ssh commands.

Reconnecting to the instance

If you close the application, all the previous configuration will be save, you can simple select the "htdocs" directory from the connection.

SFTP Option

If you don't want to install the Remote SSH extension, you could also use SFTP, though your terminal will not work.

1. Enable SFTP for your instance.
2. Install the SFTP extension in your VSCode
3. Following the documentation from the extension you can enter the following configuration

    {
     "name": "[INSTANCE NAME]",
     "host": "[HOST]",
     "protocol": "sftp",
     "port": [PORT],
     "username": "[USERNAME]",
     "password": "[PASSWORD]",
     "remotePath": "/home/mdoq/htdocs",
     "uploadOnSave": true
   },

   (replacing the brackets values, with values from your instance, these can be found under Settings -> SFTP)

Once done you can just edit the files in your local VSCode and the extension will automatically sync them to your instance. (There is no need to commit them to get them to your instance)