How I use Visual Studio Code

About…

About this page

This page is there to quickly describe how I use on a daily basis the awesome Visual Studio Code, a multi-platform text editor.

Note

What is a text editor?

« A text editor is a software for creating and editing text files. »

« Its use is common, even essential for some basic computing tasks such as system administration and software development.. »

Needless to say that I use it constantly, mostly on Linux (Ubuntu 15.10), and on Windows (7).

The Wikipedia page on text editors contains a list of the most popular publishers multi-platform text. Sublime Text is obviously on the list, along with gedit, the two legendary Emacs and Vim, and for example Komodo Edit.

This article contains quick explanation of the installation and use of Visual Studio Code, and also a list of the best plugins that I use with VSCode, links to my configuration files and general remarks.

Note

Licence?

This page, and all related files are freely distributed under the terms of the licence GPLv3 ! (Like anything else published or distributed on this website).

---

About Visual Studio Code

The official website is code.VisualStudio.com. My article focuses on versions higher than 1.14 of Visual Studio Code.

Overview of Visual Studio Code when using my configuration (September 2018).

Voir aussi

Sublime Text 3

was my favorite editor from a few years back. After 4 years of intensive use, I am slowly giving up on Sublime Text to only use Visual Studio Code, and like Edith Piaf « non, je ne regrette rien »…

What is Visual Studio Code?

Visual Studio Code is a text editor and source code available on multiple platforms. It is written in TypeScript and offers an API in TypeScript or in Javascript (with nodejs). The software is compiled to Javascript and packaged as an application with Electron.

Visual Studio Code is a completely free software, multi-platforms, produced by Microsoft, and its source code is open-source under the MIT License. See on GitHub: Microsoft/vscode.

However, the software as distributed on the download website, comes with a restrictive license. Well, it’s Microsoft, what were you expecting, GPL?!

Visual Studio Code incorporates most of the basic features of a text editor, including customizable syntax highlighting, auto-completion, a plugin system …

But that awesome text editor offers more advanced features, including:

• Minimap: previewing entire file in a sidebar,

• Selecting and editing in several sections of code in parallel (multi-cursor),

• Bookmark even within files,

• Automatic backup,

• Search and replace with plain text or regular expressions,

• Support for macros and plug-ins written in TypeScript ou Javascript,

• Customizing keyboard shortcuts.

Note

It is still in very active development, but it works already perfectly well!

How to install it?

The official website code.visualstudio.com/Download gives links to the last version of VSCode on every supported platforms.

This page explains in details how to install VSCode on different platforms process.

It’s easy, free and fast :) !

How to install plugins?

Note

Plugin ?

For computer softwares, plugins are additional components that complete a software host to provide it with new features.

VS Code is shipped with an awesome package manager that allows users to find, install, update and remove additional packages.

The package manager is an official feature of VS Code, contrarily to packagecontrol.io for Sublime Text. Have a look at marketplace.visualstudio.com/vscode for more details.

Another serious advantage I find in VS Code is the fast that it is available in French (and entirely translated), and in a dozen in other languages. Cf. https://code.visualstudio.com/docs/getstarted/locales.

A lot more details elsewhere!

There is an official documentation, very well written: code.visualstudio.com/docs.

Voir aussi

This « awesome » list gives very good advices: github.com/viatsko/awesome-vscode.

Humorous interlude

---

How I use Visual Studio Code

My configuration

My configuration files, scripts and snippets of buildings for Visual Studio Code are all in the folder publis/VSCode.

To use one of these files, just copy it into User/.

State

Actively maintained (July 2017).

Config

More info on the documentation?

This page « settings » explains how to configure of VSCode.

My configuration files:

• settings.json is the main config file.

Key shortcuts

More info on the documentation?

This page « keybindings ».

Like (almost) everything else in VS Code, it’s easy to modify or add key shortcut for anything. It can be done globaly, or project wise or language wise.

• keybindings.json are my custom shortcuts (I like ctrl+e to go the end of a line, like in Emacs, or ctrl+maj+e for beginning of a line).

Snippets

More info on the documentation?

This page « userdefinedsnippets » explains completely how these snippets have to be designed and how can they help you to be more effective.

List of my snippets, in this folder: snippets.

Build systems

More info on the documentation?

This page « tasks » also completely explains how to use and design build systems.

VS Code (as with other good text editors), it is possible to build, run or compile your files automatically and easily. VS Code comes with « tasks », or build scripts, mainly for Javascript development, with built-in support for npm and bower tasks, and it is easy to create and install new ones.

List of my build systems, in this folder: tasks.

Macro

Not yet.

Fun comic book about VS Code

---

The best plugins?

All of these plugins are free, open-source, and they are all easily installable from the package manager (Ctrl+Shift+X)

For each packet quoted below, a link to the information page on marketplace.visualstudio.com/vscode is given.

Note

My own plugin?

Not yet.

For Sublime Text, I wrote this plugin, SwitchDictionary, available through PackageControl, cf. SwitchDictionary.

Small customization plugins:

• Paste and Indent : paste code with « correct » indentation.

• Power Mode : your code is powerful, unleash it! Useless but fun!

• Select Line Status Bar : displays selected lines count in status bar.

• Shortcuts : add handy shortcuts to your status bar.

• Sublime Text Keymap : popular Sublime Text keybindings for VS Code.

Plugins that add great features:

• Align : align text in vscode like the atom-alignment package.

• Auto Close Tag : automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text.

• Bookmarks : mark lines and jump to them.

• Color Highlight : highlight web colors in your editor, like a RGB #ff00ff code for instance.

• Calculate : select some math, evaluate it.

• change-case : quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word.

• Clipboard History : keep a history of your copied items and re-paste if needed. Useful if you don’t use a system-wise clipboard manager. I am using the great glipper.

• Gremlins : reveal invisible whitespace characters and non-breaking spaces, to delete them easily.

• Path Autocomplete Provides path completion, very tiny but useful in some situations like to insert links to other pages (e.g. about SublimeText3).

• All Autocomplete provides autocompletion of words and items based on all open editors.

• Trailing Spaces : highlight trailing spaces and delete them in a flash!

• VSCode Google Translate : allows you to easily translate a selected piece of text (or lines) into any language, with Google Translate.

• WakaTime : metrics, insights, and time tracking automatically generated from your programming activity. I like using Wakatime, as I talked about it here (wakatime.html).

A better support for some languages:

• Bash Debug : a debugger extension for bash scripts (using bashdb).

• Python : linting, Debugging (multi threaded, web apps), Intellisense, auto-completion, code formatting, snippets, unit testing, and more, for the Python language.

• MagicPython : syntax highlighter for cutting edge Python.

• Python-autopep8 : applies autopep8 to your current file.

• Git Blame : see git blame information in the status bar.

• 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.

• HTML Preview : a HTML previewer.

• HTML Snippets : full HTML tags including HTML5 Snippets.

• JS-CSS-HTML Formatter : Format, prettify and beautify JS, CSS, HTML code by using shortcuts, context menu or CLI.

• Julia : Julia Language Support.

• LaTeX Workshop : boost LaTeX typesetting efficiency with preview, compile, autocomplete, colorize, and more.

• This is an extension I made myself! But now from 2019 it is useless, as VSCode ships with builtin support for Makefiles. Makefiles Support For VSCode : is my extension that adds support for GNU Makefile files (as far as now, a very limited support: only the syntax coloring and detection of the files, the Makefiles are not yet integrated within the VS Code build system).

• Doesn’t work! Make seems to be exactly offering what I had on Sublime Text and was using extensively: « Run any Makefile target with ease. Just run CMD-SHIFT-P and type make. You will be prompted for a target. » ! But I can’t make it work locally….

• Make support and task provider works a little, and it is the only one that offers this kind of functionality. It’s not perfect! But that’s already something…

Avertissement

I also tried, Makefile Command Runner et makeRunner the 08/02/2021, unsuccessful: both install without problem, but do nothing. I don’t have time to go report and help fix it, too much work these days…

• Markdown All in One : all you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more).

• minify : minify for VS Code. Minify with command, and (optionally) re-minify on save.

• OCaml : rich OCaml language support for Visual Studio Code. It really works perfectly well!

• Ocaml tuareg-master : a quick extension to send single OCaml statement (finished with ;;) to opened console.

• reStructuredText : edit reStructuredText (RST, ReST) with accurate live preview!

• Table Formatter : format table syntax of Markdown, Textile and reStructuredText.

Heavier plugins, or plugins designed for a specific language:

• VSCode LTex (and its documentation) : grammar checking with LanguageTool : it works directly in LaTeX and Markdown file but can be used on other formats as well. It seems amazing, I just discovered it (February 2021).

• Readability Check to check for readability (but only in English).

• Code Spellchecker : spelling checker for source code.

• Color Picker : helper with GUI to generate color codes such as CSS color notations.

• Dash : quickly access local documentation with Dash.app or Zeal integration in Visual Studio Code.

• :emojisense: : adds suggestions and autocomplete for emoji to VS Code.

• Gitmoji snippets : easy-to-use emojis for your commit messages.

Note

Purely subjective

This list simply reflects my daily use of VSCode. These choices are purely subjective. For instance, this awesome-vscode list also presents a list of good plugins to use.

---

Additional advice

As for every powerful and awesome software, Visual Studio Code will require a small training time, but it is far easier to master than other editors like Emacs, Vi(m), or even Atom or Sublime Text. Thanks to the complete translation in French (and other languages) of the user interface as well as the documentation!