Visual Studio Code (with SFTP Addon)

There are plenty of other editors and IDEs that you can use just as well. For example, I'll use Visual Studio Code (also called VS Code). Mac users may be more inclined to Sublime Text. The prerequisite is that the IDE or editor can establish an SFTP connection to be able to synchronize files with the server.

We still need a local working folder, which is best created now. I name the www and put it into the already created linux-server folder (/linux-server/www).

After downloading and installing, we open the www folder with Visual Studio Code and save the "workspace" under the name www. This creates the www.code-workspace file. The location is free, I place the file next to the www folder as an example. A good way of working can also be to store all workspace files in one place. This is quite handy when working on many projects in parallel.

Open the working folder with Visual Studio Code and save it as a workspace (screenshots were taken under Windows. Under MacOS and Linux adjust the path accordingly).

We can execute the workspace file directly in the future, which restores the last working state. And it is also used to save settings that only affect the current project. So it has the same function as project files of IDEs.

SFTP Addon

The SFTP addon brings us the convenience of synchronizing local files with the server during development.

This way of working is not recommended if several people are working on the server!

Using the "Extensions" button, we search for "SFTP" and then select the addon from the publisher "Natizyskunk" from the list. After that we can install it:

Add SFTP connection to the workspace

Via the VS Code command palette we create a configuration file with our connection data. The command palette opens via the gear wheel (bottom left) or with the key combination CTRL+SHIFT+P. We wallow for "SFTP: Config" and confirm with Enter. This creates and opens the file sftp.json:

The sftp.json should have the following connection settings (based on this preliminary work):

.vscode/sftp.json


{
  "host": "116.203.69.89",
  "port": 22123,
  "username": "tom",
  "protocol": "sftp",
  "privateKeyPath": "D:/linux-server/keys/private-key",
  "passphrase": true,
  "remotePath": "/var/www/",
  "uploadOnSave": true,
  "syncMode": "update",
  "ignore": [".vscode", ".git", ".DS_Store", "node_modules"]
}

The passphrase can also be stored as plain text. However, it is useful to set "passphrase": true, which will prompt for the passphrase on the first connection attempt.

It is important to specify a remotePath, because otherwise we would synchronize with the root directory (which by the way would not be allowed without the keyword sudo). The setting "uploadOnSave": true causes a file to be uploaded immediately after saving it.

All SFTP functions can be executed via the context menu (right mouse button on files or folders). Since we already have folders and files on the server, we should download them first:

download server files via the context menu

Alternatively, instead of "Download Folder", we could have gotten the files with "Sync Remote -> Local".

Important to know: If new files or folders are created locally, they must be uploaded manually. For example via context menu with Upload or Sync Local -> Remote. After that, files are automatically updated by the uploadOnSave option.

Test SFTP connection

For testing you can change the existing index.htm to see if everything is set correctly:

Other useful settings

The following settings in VS Code are optional and primarily a personal preference.

We open the settings for example via "Edit/Settings or with the shortcut CTRL+,. The individual options can be found very quickly with a setting ID (e.g. editor.insertSpaces).

Tabs instead of spaces

Basically, a team should agree on whether tabs or spaces are used for indentation. This makes working with Git easier. Tabs offer the advantage that everyone can set the tab size to suit themselves without changing the document.


editor.insertSpaces: disable

Tab Size

A small tab size makes it easier to program on small screens, such as a notebook.


editor.tabSize: 2

Default charset utf-8

A newly created file thus automatically gets the character encoding utf-8.


files.encoding: utf8

Guess charset of document

This prevents opening a file with an incorrect encoding and saving it incorrectly if necessary.


files.autoGuessEncoding: true

Bracket Pair Colorization

Bracket pairs get different colors, which makes the code more readable.


editor.bracketPairColorization.enabled: true

No compactFolders in explorer

Really a matter of taste. I prefer the view of a tree structure even if a folder is empty.


explorer.compactFolders: disable

Show git folder in explorer

Files of a ".git" folder should not be edited manually anyway, so I hide that one.


"files.exclude": {
	"**/.git": false,
}

More useful addons

For web development I recommend the following addons:

Database Management Addons: