Visual Studio Code - VS Code

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux.

Install VS Code

Download VS Code - quickly find the appropriate install for your platform (Windows, macOS and Linux).

Edit the VS Code settings

To edit the VS Code settings:

Open the Command Palette (⇧⌘P) and type settings
Then select the option Preferences: Open Settings (JSON)

Check out my personal VS Code settings

 "terminal.integrated.fontFamily": "Hack Nerd Font",
 "terminal.integrated.fontSize": 14,

 "window.zoomLevel": 0,

 "editor.fontSize": 14,
 "editor.rulers": [80, 120],
 "editor.renderWhitespace": "all",
 "editor.renderControlCharacters": true,
 "editor.wordWrap":"on",
 "cSpell.language": "en,fr",

 "markdown-preview-github-styles.colorTheme": "light",

Add VS Code command to Terminal

You can run VS Code from Terminal by typing code after adding it to the PATH:

Launch VS Code
Open the Command Palette (⇧⌘P) and type shell command
Select the option Install 'code' command in PATH
Restart the terminal application to update the PATH

You will be able to type code . in any folder to start editing files in that folder.

Define the VS Code as default git editor and diff tool

Paste that in the terminal:

git config --global core.editor 'code --wait'

git config --global diff.tool vscode
git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'

Using VS Code with particular technologies

Microsoft created a collection of recipes for using VS Code with particular technologies (mostly Web).

Make sure to visit it at Microsoft/vscode-recipes.

VS Code Extensions

The features that Visual Studio Code includes out-of-the-box are just the start. VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow.

Browse for extensions

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (⇧⌘X).

This will show you a list of the most popular VS Code extensions on the VS Code Marketplace.

Install extensions

When using the VS Code Marketplace or browsing for extensions into the VS Code, just click on the option Install to install the extension.

Alternatively, you can use the terminal command:

code --install-extension extension-name

Install extensions using mac-setup install

bash <(curl -fsSL raw.githubusercontent.com/monsieurborges/mac-setup/master/install) vscode

Visual Studio IntelliCode

Visual Studio IntelliCode provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

code --install-extension VisualStudioExptTeam.vscodeintellicode

The example below shows IntelliCode in action for Python code:

Code Spell Checker

Code Spell Checker is a basic spell checker that catch common spelling errors while keeping the number of false positives low.

Supported Languages:

English (US) - default
English (GB) - add to VS Code settings: "cSpell.language": "en-GB",
Dutch
Catalan
Czech
French
German
Russian
Spanish
Swedish
Medical Terms

code --install-extension streetsidesoftware.code-spell-checker

Install French - Code Spell Checker

Install French dictionary:

code --install-extension streetsidesoftware.code-spell-checker-french

Edit the VS Code settings:
```
"cSpell.language": "en,fr",
```

Prettier - Code formatter

Prettier - code formatter using prettier.io

code --install-extension esbenp.prettier-vscode

Better Comments

Better Comments will help you improve your code commenting by annotating with alert, informational, TODOs, and more!

code --install-extension aaron-bond.better-comments

indent-rainbow

indent-rainbow makes indentation easier to read.

code --install-extension oderwat.indent-rainbow

Path Intellisense

Path Intellisense autocompletes path filenames.

code --install-extension christian-kohler.path-intellisense

GitLens — Git supercharged

GitLens supercharges the Git capabilities built into Visual Studio Code.

code --install-extension eamodio.gitlens

Git History

Git History - view git log, file history, compare branches or commits.

code --install-extension donjayamanne.githistory

Markdown All in One

Markdown All in One is all you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).

code --install-extension yzhang.markdown-all-in-one

markdownlint

markdownlint is Markdown/CommonMark linting and style checking.

code --install-extension DavidAnson.vscode-markdownlint

Markdown Preview Github Styling

Github Styling changes VS Code's built-in markdown preview to match Github's style.

code --install-extension bierner.markdown-preview-github-styles

Markdown Emoji

Markdown Emoji adds emoji syntax support to VS Code's built-in markdown preview.

code --install-extension bierner.markdown-emoji

Markdown PDF

Markdown PDF converts converts Markdown files to pdf, html, png or jpeg files.

code --install-extension yzane.markdown-pdf

Activate Github theme

Edit the VS Code settings:

"markdown-pdf.highlightStyle": "github.css",

Enable LaTeX equations

Paste that in the terminal:

read -r -d '' SCRIPT <<"EOF"
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({ tex2jax: {inlineMath: [['$', '$']]}, messageStyle: 'none' });
</script>
EOF

MARKDOWN_PDF=$(echo ${HOME}/.vscode/extensions/yzane.markdown-pdf-*/template/template.html)

echo "${SCRIPT}" >> "${MARKDOWN_PDF}"

HTML CSS Support

HTML CSS Support is the missing CSS support for HTML documents.

code --install-extension ecmel.vscode-html-css

ESLint

ESLint find and fix problems in your JavaScript code.

code --install-extension dbaeumer.vscode-eslint

React Native Tools

React Native Tools - debugging and integrated commands for React Native.

code --install-extension msjsdiag.vscode-react-native

Live Server

Live Server launches a local development Server with reloading feature for static & dynamic pages.

code --install-extension ritwickdey.LiveServer

npm Intellisense

npm plugin that autocompletes npm modules in import statements.

code --install-extension christian-kohler.npm-intellisense

REST Client

REST Client for Visual Studio Code.

code --install-extension humao.rest-client

Remote - SSH

Remote - SSH opens any folder on a remote machine using SSH and take advantage of VS Code's full feature set.

No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine. You can open any folder on the remote machine and work with it just as you would if the folder were on your own machine.

code --install-extension ms-vscode-remote.remote-ssh

Python

Python - Linting, Debugging (multi-threaded, remote), Intellisense, Jupyter Notebooks, code formatting, refactoring, unit tests, snippets, and more.

code --install-extension ms-python.python

The example below shows Python extension with native Jupyter Notebook edition:

C/C++

C/C++ IntelliSense, debugging, and code browsing.

code --install-extension ms-vscode.cpptools

Go

Go language support for Visual Studio Code.

code --install-extension golang.Go

Java by Red Hat

Java by Red Hat - Java Linting, Intellisense, formatting, refactoring, Maven/Gradle support and more.

code --install-extension redhat.java

Docker

Docker adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files.

Check out the Working with Docker tutorial to get started.

code --install-extension ms-azuretools.vscode-docker

YAML

YAML Language Support by Red Hat, with built-in Kubernetes and Kedge syntax support.

code --install-extension redhat.vscode-yaml

Rainbow CSV

Rainbow CSV - Highlight CSV and TSV files, Run SQL-like queries.

code --install-extension mechatroner.rainbow-csv

CMake

CMake langage support for Visual Studio Code.

brew install cmake

code --install-extension twxs.cmake

CMake Tools

CMake Tools provides the native developer a full-featured, convenient, and powerful workflow for CMake-based projects.

brew install cmake

code --install-extension ms-vscode.cmake-tools

SVG

SVG - A Powerful SVG Language Support Extension. Almost all the features you need to handle SVG.

code --install-extension jock.svg

LaTeX Workshop

$LaTeX Workshop$

LaTeX Workshop boosts LaTeX typesetting efficiency with preview, compile, autocomplete, colorize, and more.

⚠️ LaTeX Workshop requires LaTeX MacTex.

code --install-extension James-Yu.latex-workshop

$LaTeX with VSCode$

Configure LaTeX Workshop

Be sure to create a directory called build in the same place of your LaTeX files
Copy my recipe to your VS Code settings

    "latex-workshop.view.pdf.viewer": "tab",
    "latex-workshop.latex.autoBuild.run": "never",
    "latex-workshop.latex.outDir": "./build/",
    "latex-workshop.latex.recipes": [
        {
            "name": "latexmk",
            "tools": ["latexmk"]
        },
        {
            "name": "pdflatex -> bibtex -> pdflatex*2",
            "tools": ["pdflatex","bibtex","pdflatex","pdflatex"]
        },
        {
            "name": "pdflatex -> biber -> pdflatex*2",
            "tools": ["pdflatex","biber","pdflatex","pdflatex"]
        },
        {
            "name": "pdflatex -> glossaries -> bibtex -> pdflatex*2",
            "tools": ["pdflatex","makeglossaries","bibtex","pdflatex","pdflatex"]
        },
        {
            "name": "pdflatex -> glossaries -> biber -> pdflatex*2",
            "tools": ["pdflatex","makeglossaries","biber","pdflatex","pdflatex"]
        }
    ],

    "latex-workshop.latex.tools": [
        {
            "name": "latexmk",
            "command": "latexmk",
            "args": [
                "-synctex=1",
                "-interaction=nonstopmode",
                "-output-directory=build",
                "-file-line-error",
                "-pdf",
                "%DOC%"
            ]
        },
        {
            "name": "pdflatex",
            "command": "pdflatex",
            "args": [
                "-synctex=1",
                "-interaction=nonstopmode",
                "-file-line-error",
                "-output-directory=build",
                "%DOC%"
            ]
        },
        {
            "name": "makeglossaries",
            "command": "makeglossaries",
            "args": ["-d","./build","%DOCFILE%"]
        },
        {
            "name": "bibtex",
            "command": "bibtex",
            "args": ["./build/%DOCFILE%"]
        },
        {
            "name": "biber",
            "command": "biber",
            "args": ["./build/%DOCFILE%"]
        }
    ],

Files

vs-code.md

Latest commit

History