Visual Studio Code has come a long end. From a not-so-simple editor it has grown to a multi-language editor with lots of whistles and bells.
There are also a huge amount of extensions available in the meantime for each and every task and/or language.
I'm using it to edit files on my Raspberry Pi's using the remote plugin and for lots of other things too.
The nice thing I find about Visual Studio Code is that it's also integrated in WSL(2), the Windows Subsystem for Linux.
You can simply type code on the command line and Visual Studio Code will be opened for you.
Below, you can find some things I found useful to know about Visual Studio Code. It's very limited but hopefully will grow bit by bit in the future.
To map a new file extension to an existing extension do the following:
Make sure the file with the new extension is active
Open the Command Palette with Ctrl-Shift-P and type in Change Language Mode
Choose Configure File Association for "<new_filename>"
Select the existing language with which you want to associate the new extension with: if there's already an association it will be shown next to the particular language with the text Current Association.
See images below for more clarification.
From now onwards, the new language will have the same colouring as the associated language for as far as keywords and so on are recognised.
If you want to create your own file extension colourisation then you have to create a TextMate language extension (.tmLanguage file) for that particular extension. See here for more information.
To summarize:
Make sure you have the latest npm installed (if necessary, remove the old Node.js installation)
Run the following commands:
npm install -g yo
npm install -g generator-code
yo code
This should bring up the following dialogue info:
C:\Users\Geert>yo code
(node:8908) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
New Language Pack (Localization)
New Web Extension (TypeScript)
New Notebook Renderer (TypeScript)
Follow the guidelines given on the screen. You will end up with a new directory called <extension>\.tmLanguage and other files for your extension.
You can find a language overview for Visual Studio Code here.
To change the font size in the text editor:
File -> Preferences -> Settings
Expand Text Editor
Select Font
Select Font Size
Change the value to your convenience
To change the font size of the terminal:
File -> Preferences -> Settings
In the search bar, type terminal font size
In the Terminal > Integrated: Font Size, type the value of the font size you want.
The terminal font size is adapted immediately, even when split windows are used.
When you have many files open it's sometimes difficult to find the correct tab since by default the tabs are shown on one line. If the tab you're looking for is not visible, you have to start scrolling.
This can be tedious and can be solved quite easily: use multi line tabs.
To activate this feature, do the following steps:
Open File -> Preferences -> Settings (or Ctrl + ,)
In the Search Settings search bar, type wrap tabs
In the items shown select Workbench > Editor: Wrap Tabs and tick the tick box.
From now on the tabs will be shown on multiple lines if there's not enough space to fit them on one line only.
VSC can be used to edit files directly on remote computers like the Raspberry Pi. I'm doing this almost always from within WSL, running Ubuntu 22.04 LTS.
Here's my setup to communicate with two Raspberry Pi's (can be as many as you want):
Starting Windows Terminal (not!!! the regular command prompt that already exists for ages)
Install it if not yet done.
Opening a tab to connect to my Ubuntu 22.04 LTS installation
Make sure you can automagically connect to the Raspberry Pi's by setting up private/public keys between Ubuntu and the RPi's.
See this section on how to do this.
Create bash scripts to easily connect to the RPi's
I then have a bash script called connect_rpiff.sh, again in a separate subdirectory of mystuff, that contains the following simple commands:
#!/bin/bash
ssh -X pi@192.168.1.40
Make sure the bash script is executable: chmod +x connect_rpiff.sh.
That's it!
There's an ssh connection to the RPi with the given address. Again: it's necessary you can automagically log in into the RPi's, otherwise it won't work!
The -X given as option to ssh is to forward GUI stuff from the RPi to the Ubuntu environment, should the need be there.
Repeat the above if you have more than one remote RPi in action you want to access.
If you have 2 RPi's, split the Ubuntu screen on your PC in 2 parts using Alt-Shift-D
Run the two bash files in the Ubuntu command prompts (one script in each window): you should end up with two RPi command prompts, one for each RPi addressed.
Example for one connection to a RPI: run ./connect_rpiff.sh from within ./mystuff/bashfiles (or whatever you called your (sub)directories).
Make sure sshfs is installed on your Ubuntu distro.
See this page on how to do this.
Make mounting points for each of your RPi's.
In my setup I have a directory called mystuff where I put all my own things in, from downloaded apps to projects to mounting directories.
So, I have created a mounting directory called rpi_ff (what's in a name?) for one of my RPi's.
The mounting directories are necessary so that Visual Studio Code can access files on the RPi's through Ubuntu via the mounted directories.
Setting up the mounting points on the mounting directories created
Once the mounting directories are created we have to make mounting points pointing to that directory. Therefor, I've created another bash script to do this for me. This is the content of the bash script called sshfs_connect_rpi.sh:
#!/bin/bash
sshfs pi@192.168.1.40:/home/pi/mystuff/ /home/geertvc/mystuff/rpi_ff/
sshfs pi@192.168.1.42:/home/pi/mystuff/ /home/geertvc/mystuff/rpi_gf/
What this does is the following:
Starting an sshfs session to the RPi using its user and IP address.
Then it point to the directory on the RPi where we want the mounting point pointing to. This is done by adding a column and the path on the RPi, just after the IP address of the remote RPi.
Finally, I give the mounting point on my Ubuntu session, one for each RPi
From now onwards, I should be able to see the content of the directory mystuff on the RPi's through my mounting point on my Ubuntu session.
I then launch VSC from within Ubuntu with the command code (yes, simple as that!).
Once VSC is launched, it will show me the directory structure of my Ubuntu session. I then can go to my mounting points rpi_gf and rpi_ff and see in fact the content of /home/pi/mystuff instead, seen the fact I've mounted this directory on my mounting point.
That's it. This is how you can use VSC to write/edit files on remote RPi's.
I have the following VSC extensions installed (not using all of them, though):
Better C++ Syntax
Bookmarks
C/C++ Themes
debug-tracker-vscode
Dev Containers
Jupyter Keymap
Perl
Peripheral Viewer
Remote - SSH
Remote - SSH: Editing Configuration Files
Remote - Tunnels
Remote Development
Remote Explorer
Rust Syntax
Serial Monitor
WSL
Typically for WSL:
C/C++
C/C++ Extension Pack
CMake
CMake Tools
Perl
Perl Navigator
C/C++ Themes
With the dark theme it's sometimes difficult to see which tab is active. The only visual difference is a small blue line on top of the active tab. This is not very convenient.
However, there's a solution to that. It's possible to change the tab colour for both the active as well as the inactive tabs.
To do so, do the following:
Open the settings.json file. To find this file, open the command palette (Ctrl-Shift-P) and start to type "open settings": you will see several options, select the Open User Settings (JSON) one. The file settings.json will open in the VS code editor.
Add the following code block into the file (I've added this at the end of the file):
"workbench.colorCustomizations": {
"tab.activeBackground": "#ffee0036",
//"tab.inactiveBackground": "#ff0000",
},
Make sure there's no red squiggle visible otherwise there's something wrong with the syntax in the file (e.g. forgot to add a comma to the end of the previous section).
Once this is in place, the colour selected will be used as background when the tab is active.
Note that I commented out the inactive background colour since I don't want to change this. I only left it in as a reminder on how to do that should I change my mind in the future.
This is the result now: a yellow-ish background for the active tab (there's no arguing about tastes and colors, right??? 😉).
Sources:
https://stackoverflow.com/a/65909052/1252050
https://stackoverflow.com/a/63147363/1252050
https://stackoverflow.com/a/74712100/1252050