Skip to content

Code Editor

Code - OSS is an open source project without any proprietary code. But keep in mind that not all extensions are available here.

Visual Studio Code is a distribution of the Code - OSS repository with Microsoft specific customizations released under a traditional Microsoft product license.

The code editor can be used for developing and debugging and a lot more. It runs on any OS and unlike large development environments (Microsoft Visual Studio, Eclipse...) it won't need a project setup before.

Code uses the information it finds in the files and folders to provide project and platform-specific functions, such as matching auto complete.

Code supports a variety of programming, markup, and database languages, from JavaScript, HTML, and CSS, through C #, C ++, and Python, to PHP and SQL, just to name a few. Common languages usually already included in the standard scope of the editor, other languages are available as an extension. In addition to pure syntax highlighting, auto completion is also provided for some languages, meaningfully supplementing user input: a pop-up displays previously declared variables, methods, functions, and objects that can be accessed in the program context, as well as extensive templates of commonly used pieces of code (templates and snippets).

Installation

Only install the package Code - OSS from the repository for the open source version or visual-studio-code-bin from AUR.

On Debian you may install using the repository, to do the updates with your normal system updates:

# add repository
curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt-get install apt-transport-https
# install Code
sudo apt-get update
sudo apt-get install code

User Settings

Visual Studio Code can be configured to your personal needs. The base for this is a JSON configuration file. Using the command Preferences: Open User Settings you can open a view with the default configuration on the left and your settings on the right side. You can only change the ones on the right side.

But you can also use the configuration form which is reachable using the gear icon on the lower left or ++ctrl+,++. This dialog shows a tree structured form with some of the most essential settings for the core and the extensions.

I used at least the following editor settings:

{
    "editor.formatOnSave": true,
    "editor.tabSize": 4,
    "editor.detectIndentation": false,
    "editor.multiCursorModifier": "ctrlCmd"
}

The last one is necessary on my KDE based Linux Distribution because Alt+Left Button is already used by the os.

Workspace or Project Settings

You can also add a settings.json within the /.vscode folder in your project which will overwrite the user settings. This is a convenient way to set project specific settings which are needed for every user.

User Interface

The user interface of Visual Studio Code is divided into directory tree, editor and console. In code, multiple editor windows can be opened next to each other thanks to split or side-by-side editing. Multiple selection allows you to interactively change multiple lines at the same time, for example, when renaming variables. Code navigation enables targeted searches for specific codes, such as methods or symbols.

VSCode

The UI pattern is similar to other editors such as Sublime Text and Atom: on the left is a file manager that displays all the files and folders in the current directory. Right next to it is the actual editor. There is space for various panels, such as a terminal or a log for errors and warnings. The user interface can be flexibly adapted to your own needs.

If you need to do something always consider to lookup for included commands using F1 and search for them.

Commands

Use F1 or the key combination Ctrl+Shift+P to open the command palette. The editor can be operated with keyboard commands via them so that you can do without the mouse almost completely. The command palette is an input box that displays a list of all available commands; it is therefore not necessary to remember the shortcuts of all commands. This list can be filtered by entering the command you are looking for and using the arrow keys to search. With Enter a command is executed.

VSCode Commands

The command palette of Code knows different modes:

  • > default command mode commands are executed as usual.
  • # and @ to search for symbols such as methods and variables in the current workspace or file.
  • : jumps to the given line number
  • Ctrl+P search for open files by typing their name. All files in the currently open folder are searched.

The command palette of Code can do even more use ? displays a list of all modes.

Shortcuts

All the shortcuts can be shown directly in the editor calling Preferences -> Keyboard Shortcuts and you can also search and change them in this table. Although the most used ones will be shown here:

General

  • Ctrl+Shift+P or F1 Show Command Palette
  • Ctrl+P Quick Open, Go to File...
  • Ctrl+Shift+N New window/instance
  • Ctrl+W Close window/instance
  • Ctrl+, Open User Settings
  • Ctrl+K Ctrl+S Keyboard Shortcuts

Basic editing

  • Ctrl+X Cut line (empty selection)
  • Ctrl+C Copy line (empty selection)
  • Alt+Down / Alt+Up Move line down/up
  • Ctrl+Shift+K Delete line
  • Ctrl+Enter / Ctrl+Shift+Enter Insert line below/ above
  • Ctrl+Shift+\ Jump to matching bracket
  • Ctrl+J / Ctrl+[ Indent/Outdent line
  • Ctrl+Home / Ctrl+End Go to beginning/end of file
  • Ctrl+Up / Ctrl+Down Scroll line up/down
  • Alt+Page Up / Alt+Page Down Scroll page up/down
  • Ctrl+Shift+[ / Ctrl+Shift+] Fold/unfold region
  • Ctrl+K Ctrl+[ / Ctrl+K Ctrl+] Fold/unfold all subregions
  • Ctrl+K Ctrl+0 / Ctrl+K Ctrl+J Fold/Unfold all regions
  • Ctrl+K Ctrl+C Add line comment
  • Ctrl+K Ctrl+U Remove line comment
  • Ctrl+/ Toggle line comment
  • Ctrl+Shift+A Toggle block comment
  • Alt+Z Toggle word wrap

Rich languages editing

  • Ctrl+Space Trigger suggestion
  • Ctrl+Shift+Space Trigger parameter hints
  • Ctrl+Shift+I Format document
  • Ctrl+K Ctrl+F Format selection
  • F12 Go to Definition
  • ++ctrl+shift+F10 Peek Definition
  • Ctrl+K F12 Open Definition to the side
  • Ctrl+. Quick Fix
  • Shift+F12 Show References
  • F2 Rename Symbol
  • Ctrl+K Ctrl+X Trim trailing whitespace
  • Ctrl+K M Change file language

Multi-cursor and selection

  • Ctrl+Left Button Insert cursor (changed by multi cursor setting above)
  • Shift+Alt+Up / Shift+Alt+Down Insert cursor above/below
  • Ctrl+U Undo last cursor operation
  • Shift+Alt+I Insert cursor at end of each line selected
  • Ctrl+I Select current line
  • Ctrl+Shift+L Select all occurrences of current selection
  • Ctrl+F2 Select all occurrences of current word
  • Shift+Alt+Right Expand selection
  • Shift+Alt+Left Shrink selection
  • Shift+Alt+drag mouse Column (box) selection

Display

  • F11 Toggle full screen
  • Shift+Alt+0 Toggle editor layout (horizontal/vertical)
  • Ctrl+= / Ctrl+- Zoom in/out
  • Ctrl+B Toggle Sidebar visibility
  • Ctrl+Shift+E Show Explorer / Toggle focus
  • Ctrl+Shift+F Show Search
  • Ctrl+Shift+G Show Source Control
  • Ctrl+Shift+D Show Debug
  • Ctrl+Shift+X Show Extensions
  • Ctrl+Shift+H Replace in files
  • Ctrl+Shift+J Toggle Search details
  • Ctrl+Shift+C Open new command prompt/terminal
  • Ctrl+K Ctrl+H Show Output panel
  • Ctrl+Shift+V Open Markdown preview
  • Ctrl+K V Open Markdown preview to the side
  • Ctrl+K Z Zen Mode (Esc Esc to exit)

Search and replace

  • Ctrl+F Find
  • Ctrl+H Replace
  • F3 / Shift+F3 Find next/previous
  • Alt+Enter Select all occurrences of Find match
  • Ctrl+D Add selection to next Find match
  • Ctrl+K Ctrl+D Move last selection to next Find match

Navigation

  • Ctrl+T Show all Symbols
  • Ctrl+G Go to Line...
  • Ctrl+P Go to File...
  • Ctrl+Shift+O Go to Symbol...
  • Ctrl+Shift+M Show Problems panel
  • F8 Go to next error or warning
  • Shift+F8 Go to previous error or warning
  • Ctrl+Shift+Tab Navigate editor group history
  • Ctrl+Alt+- Go back
  • Ctrl+Shift+- Go forward
  • Ctrl+M Toggle Tab moves focus

Editor management

  • Ctrl+W Close editor
  • Ctrl+K F Close folder
  • Ctrl+\ Split editor
  • Ctrl+1 / Ctrl+2 / Ctrl+3 Focus into 1st, 2nd, 3rd editor group
  • Ctrl+K Ctrl+Left Focus into previous editor group
  • Ctrl+K Ctrl+Right Focus into next editor group
  • Ctrl+Shift+Page Up Move editor left
  • Ctrl+Shift+Page Down Move editor right
  • Ctrl+K Left Move active editor group left/up
  • Ctrl+K Right Move active editor group right/down

File management

  • Ctrl+N New File
  • Ctrl+O Open File...
  • Ctrl+S Save
  • Ctrl+Shift+S Save As...
  • Ctrl+W Close
  • Ctrl+K Ctrl+W Close All
  • Ctrl+Shift+T Reopen closed editor
  • Ctrl+K ++Enter Keep preview mode editor open
  • Ctrl+Tab Open next
  • Ctrl+Shift+Tab Open previous
  • Ctrl+K P Copy path of active file
  • Ctrl+K R Reveal active file in Explorer
  • Ctrl+K D Show active file in new window/instance

Debug

  • F9 Toggle breakpoint
  • F5 Start / Continue
  • F11 / Shift+F11 Step into/out
  • F10 Step over
  • Shift+F5 Stop
  • Ctrl+K Ctrl+I Show hover

Integrated terminal

  • Ctrl+` Show integrated terminal
  • Ctrl+Shift+` Create new terminal
  • Ctrl+Shift+C Copy selection
  • Ctrl+Shift+V Paste into active terminal
  • Ctrl+Shift+Up / Ctrl+Shift+Down Scroll up/down
  • Shift+Page Up / Shift+Page Down Scroll page up/down
  • Shift+Home / Shift+End Scroll to top/bottom

Tasks

You can run different tasks which are possible to be run on the command line directly from within the VSCode IDE.

To define custom tasks call Configure Tasks from the global Tasks menu and select the Create tasks.json file from template entry. Then select Other format. You will get a JSON configuration in the current workspace and can define your tasks there:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "cargo build",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "problemMatcher": []
        },
        {
            "label": "test",
            "type": "shell",
            "command": "cargo test",
            "group": {
                "kind": "test",
                "isDefault": true
            }
        }
    ]
}

The task's properties have the following semantic:

  • label - The task's label used in the user interface.
  • type - The task's type. For a custom task, this can either be shell or process. If shell is specified, the command is interpreted as a shell command. If process is specified, the command is interpreted as a process to execute.
  • command - The actual command to execute.
  • args - Optionally array used if they are not given as a one liner within the command call
  • windows - Any Windows OS specific properties.
  • group - Defines to which group the task belongs.
  • presentation - Defines how the task output is handled in the user interface.

Call the tasks using F1 with tasks.

Read more at VSCode Tasks.

Debugger

The sleek and flexible Code Editor gives developers all the functionality they need to get the job done. This is mainly due to the good integration of the debugger and the direct Git connection. Code is perfect for all scripting languages. There are some enhancements in Marketplace for better handling...

With the Chrome Debugger extension, front-end developers can debug their JavaScript code with Google Chrome. Code uses the Chrome DevTools Protocol, which associates the files loaded in the browser with the files opened in the editor. This allows the developer to place breakpoints directly into code, watch variables, or see the entire call stack as they debug - all without leaving the editor. A very useful extension that you should definitely look at as a front-end developer.

Extensions

The standard functionality of Code can be extended with additional packages that can adapt almost anything, from the appearance and behavior of the user interface to core editor functions. Microsoft's code editor brings with it a package manager. Additional languages, debuggers and tools can be easily installed.

In the chapters below I comment on some plugins. To get more information search for the extension in the editor and read the detailed description. Shortcut to get to them is Ctrl+Shift+X or open it with the square icon on the left.

The editor will also sometimes show you some recommended extensions based on the files you opened.

Project Manager

Project Manager add a new sidebar to easily switch between projects. After configuring each project you can easily select the project in the new sidebar which switches to this project and Explorer and Source Control will both hold this.

Peacock can be used to give the projects individual colors and distinguish between them.

Markdown

  • Markdown All in One - All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).
  • markdown lint - The Markdown lint will check the syntax of the markdown files and give hints for proper standardized markdown which will work.

To configure MarkdownLint add something like the following:

User Settings

"markdownlint.config": {
    "MD007": { "indent": 4 },
    "MD013": false,
    "MD030": {
        "ul_single": 3,
        "ol_single": 2,
        "ul_multi": 3,
        "ol_multi": 2
    },
    "MD041": false
}

See also the rules description.

Spellchecker

Code Spell Checker - A basic spell checker that works well with code and help to catch common spelling errors while keeping the number of false positives low.

Possible suggestions will be displayed with the displayed fixes or using ++ctrl+.++ to select from or add the word to user or workspace dictionary. More dictionaries for other languages are also available.

Code Formatting

Prettier enables Code to automatically optimize the format to the default style guides. A good way is to enable it on save in the settings.

You can customize some parameters, I used to set the following to mainly have markdown which is fully compatible with MkDocs for markdown parsing (specifically the tabWidth of 4 spaces is needed to use lists with multiline points).

{
    "prettier.printWidth": 100,
    "prettier.tabWidth": 4,
    "editor.formatOnSave": true
}

Also auto formatting on save is enabled in the above.

Git

Nowadays Git is a central tool for many developers. But if you have to switch to the command line or other GUI application while programming to check or uncheck code, it will interrupt the workflow. That's why Microsoft Code comes with Git integration by default. This provides the developer with the most important Git operations in the editor.

Best use the Git Extension Pack which comes with all needed extension.

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. All this will be added tió the repository sidebar.

Git History (git log) - View git log, file or line history.

gitignore - Language support for .gitignore files. Lets you pull .gitignore files from the https://github.com/github/gitignore repository.

Open in GitHub / Bitbucket / VisualStudio.com - Jump to a source code line in Github / Bitbucket / VisualStudio.com.

Attention

Maybe the git process asks for your password which VSCode will do using a popup box at the top and if you don't fill it out in time you will get a timeout issue.

Organization

todo-tree will show all TODO and FIXME and also Markdown checkboxes with the documentation comments in a sidebar tab.

Markdown Checkbox this will help you to create todo lists in markdown. Use Ctrl+Shift+C to create a new checkbox add one after hitting Enter at the end of a checkbox line and mark the active line as done with Ctrl+Shift+Enter.

Regex-Previewer will help you to interactively get your regular expressions right.

VueJS

The VueJS Extension Pack already comes with a lot of extension needed for working with Vue:

  • npm - This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json
  • NPM IntelliSense - Visual Studio Code plugin that auto completes npm modules in import statements
  • Import Cost VSCode - This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
  • Prettier - Code formatter - Code package to format your JavaScript / TypeScript / CSS using Prettier.
  • vetur - Vue tooling for Code, powered by vue-language-server.
  • vue-peek - This extension extends Vue code editing with Go To Definition and Peek Definition support for components and filenames in single-file components with a .vue extension. It allows quickly jumping to or peeking into files that are referenced as components (from template), or as module imports
  • auto-rename-tag - Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
  • auto-close-tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
  • Sorting HTML and Jade attributes - Sorting of the tag attributes in the specified order.
  • Bracket Pair Colorizer - This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.

ESLint - Integrates ESLint into Code. If you are new to ESLint check the documentation.

REST Client

REST Client lets you write your requests in editor with syntax highlighting and auto completion, send and view the response in a separate pane with syntax highlighting. Also you can create a curl call out of it. It is very easy but powerful.

Warning

The editor has to be in format HTTP to show the "Send Request" command. Best way is to name your REST command files *.http

Multiple requests in one file are supported by ### as a delimiter line. Variables are also possible, declare them starting with '@' und use them in double bracket. Also a variable can get the value from a previous call.

example.http

See all of them in this short example:

@server = http://localhost:3030

### Authenticate

# @name login
POST {{server}}/authentication
Content-Type: application/json

{
  "strategy": "local",
  "email": "demo@alinex.de",
  "password": "demo123"
}

### Collect JSON Web Token

@JWT = {{login.response.body.accessToken}}

### Run checkup with authenticated user

GET {{server}}/checkup/host.uptime
    ?reporter=status
Authorization: Bearer {{JWT}}

In the editor you will find a link to execute each statement directly above each request definition. Alternatively use the context menu or keyboard shortcut.

To further tweak the example above you may set the server variable for different environments. This is done by adding environment specific variables into your Code configuration.

.vscode/settings.json

    "rest-client.environmentVariables": {
      "$shared": {
        "server": "http://localhost:3030"
      },
      "test": {
        "server": "http://backoffice.service.office-test.dvb"
      },
      "production": {
        "server": "http://backoffice.service.cloud.dvb"
      }
    }

With such an environment setting you can specify your environment in the lower left of the Code status bar.

Remote - SSH

Remote SSH allows you to open a remote folder from any remote machine, virtual machine, or container with a running SSH server and take full advantage of Code's feature set. Once connected to a server, you can interact with files and folders anywhere on the remote filesystem.

Attention

This esxtension is only available in VSCode on in the OSS edition.

Mongo DB

Visual Studio Code has great support for working with MongoDB databases. Through the Azure CosmosDB extension, you can create, manage and query MongoDB databases from within Code.

After installing you will find it in the Activity Bar under Azure.

You can:

  • connect to a MongoDB server
  • browse through your collections
  • show entries
  • change and update them
  • make *.mongo scripts with code completion
  • execute the scripts

To setup the database connection open the Azure activity bar, select 'Attached Database Accounts' -> 'Attach Database Account...' then select 'MongoDB' and give the server address.

VSCode MongoDB

You can navigate through the database like through a file system.

PostgreSQL

This will give you access to PostgreSQL databases and allows to query them.

Edit with Shell

This plugin lets you easily call shell commands and get the output within the editor. It can also send the marked text through the command and replace it with the output.

You may add the key binding:

{
    "key": "ctrl-r ctrl-r",
    "command": "editWithShell.runCommand",
    "when": "editorTextFocus"
}

Compare Folders

This allows to make a diff of complete folders.

Rust Programming

The Rust plugin includes:

  • Rust Language Server integration.
  • Auto completion (via racer or RLS).
  • Go To Definition (via racer or RLS).
  • Go To Symbol (via rustsym or RLS).
  • Code formatting (via rustfmt).
  • Code Snippets.
  • Cargo tasks (Ctrl-Shift-p and type cargo to view them).

Also the following extensions may help:

  • Better TOML - TOML configuration files syntax highlighting
  • CodeLLDB - LLDB debugging for Rust programs
  • Rust (RLS) - the language server
  • search-crates-io - auto complete search within Cargo.toml
  • crates - will display latest version in Cargo.toml and allows to switch through hover list

Keep in mind that if you just installed Rust you have to sometimes reboot your systems to find the new commands in the path. After that VSCode will ask for tool chain...

Misc

  • Material Icon Theme - lots of icons based on Material Design
  • TSLint - Integrates TypeScript linting into Code.

Problems

ssh_askpass - If something goes wrong while working with git, look into the output and redo the git commands from CLI to further analyse.