VS Code: Some practical notes and tips


General Configuration

Setting the Display Language

To set the display language press [Ctrl][Shift][P] and then enter “display”:

Select the [Configure Display Language] option and then choose your desired language.

Editing

Settings

Configuring the tab size (indentation)

For Windows version:

Open [File\Preferences\Settings]:

In the appearing search box enter “Indentation” to filter for related settings.

It’s possible that your tab size option is overridden by another setting as in the following case:

If you click on the hyperlink [Editor: Detect Indentation] would land on the option which controls the space size in your current setting:

If you don’t want this automatic tab size detection you can uncheck this option and then enter the tab size you want in the previous setting.

Renaming

Renaming all occurrences of a text

Press ctrl-F2 and all occurrences are marked and ready to be edited

Multiword/Multirows/Columns Editing

Columns selection

Press [Shift] [Alt] and then mark the columns using the mouse.
If you prefer arrow keys you can achieve the same by pressing [Ctrl] [Shift] [Alt] and then marking the columns using the arrow keys.

Multiword Editing within the entire file

  • Select the word you want to edit.
  • Press [Ctrl] [F2]
  • Edit the word

Find & Replace within a selected section of the file

  • Press [Ctrl] [H] to activate Find & Replace
  • Select the section where you want your text to be replaced
  • Enter your old and new text in Find & Replace mask
  • Execute replace all –> This will only affect the text within the selected area

Formatting Code

HTML

If you open an html file in VS Code, you can cause VS Code to format the entire document or your selection by pressing Shift + Alt + F

Wrapping Text

How to set text wrapping for your project

Approach 1

Press [Ctrl] [Shift] [P] or open the menu option [View\Command Palette] and then select the option “Open Settings (JSON)”:

This opens the settings.json file. Enter the following row into your settings.json file and save it:

{
    "git.ignoreWindowsGit27Warning": true,
    "[yaml]": {
        "editor.insertSpaces": false,
        "editor.autoIndent": "none"
    },
    "redhat.telemetry.enabled": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.wordWrap": "on"
}

Approach 2

Press [Ctrl] [Shift] [P] or open the menu option [View\Command Palette] and then select the option “Open Settings (UI)”:

Enter “wrap” into the search box at the top and then set the option [Word Wrap] to “on”:

Markdown support

Out-of-the-box capabilities of VS Code

VS Code has some out-of-the-box capabilities which allow you to start writing/editing markdown-based readme files. For more abilities, there are lots of extensions available. In this section, we want to look at some of the VS Code’s own capabilities.

Preview window

As soon as you open a markdown file, which is a file with the extension .md you see the following icon:

Click on this and you will see the preview of your markdown document:

Intellisense

To access IntelliSense markdown commands, put the cursor in the correct position and press [Ctrl] [Space], and then press the arrow up key:

Adding a code block

To add a code block, position your cursor at the desired position, press [Ctrl] [space] and then the up arrow to activate IntelliSense for Markdown, and then select the option [fenced code]:

Once you select the option [fence codeblock] a block is pasted into the editor beginning and ending with “` and a dropdown allows you to select the programming language for the code block:

The result looks like this:

Plugins

Markdown Preview Enhanced

This plugin allows splitting the screen so that on the left side you can edit a Markdown file and see its preview on the right side of the screen.

Once you have installed the plugin, you can open a markdown file in VS Code and then use the hotkeys [Ctrl] [k] [v] to activate the plugin and have the preview of your markdown file visible on the right side of the screen.