Visual Studio Code Can Do That?

All the best things about Visual Studio Code that nobody ever bothered to tell you


Hosted on Azure App Service ☁️     Videos stream from Azure CDN ⚡️

My Setup


Interactive Playground


Visible the first time VS Code is opened for a project. Get back to it at any time by selecting "Welcome" from the Command Palette.

Emmet


Emmet is a markup expansion tool that makes writing HTML much easier. It has a simple syntax and is not difficult to master. VS Code supports Emmet by default.


Refer to the Emmet Cheat Sheet to learn more about the Emmet syntax.

Wrap Selection With Tag


Wrap any text with a tag. This box also supports Emmet.


If you have multiple lines that all need to be wrapped in separate tags, use the * symbol.


A good idea is to add a keyboard shortcut for this as it's particularly useful for wrapping links with anchor tags. I have this mapped to Option + Shift + W in my setup.

Enable Emmet In JSX


Emmet can be enabled in JXS and will even expand class to className.


Add the following line to your User Preferences...


"emmet.includeLanguages": {
  "javascript": "javascriptreact"
},

Prettier


Prettier is a JavaScript code formatting tool. It is particularly useful to ensure that all developers working on a project are formatting code the same way.


Prettier has many settings that can be customized, as well as integration with ESLint. Additionally, Visual Studio Code can be configured to format code with Prettier automatically by setting formatOnSave in User Settings.


1. Install the Prettier Extension for Visual Studio Code

2. Add the following line to your User Preferences...


"prettier.singleQuote": true,
"prettier.eslintIntegration": true,
"prettier.tabWidth": 2,

"editor.formatOnSave": true

Font Ligatures


Font Ligatures are when two ore more characters are joined together to create a special symbols. Ligatures are especially well suited for programming where compound symbols such as >= or === are used.


Download FiraCode Font and add to fonts on your computer.



Add the following line to your User Preferences...


"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

Open External Terminal


You can open an external terminal session in the current directory at any time with the keyboard shortcut...


Win: Ctrl + Shift + C
Mac: ⌘ + Shift + C

Run And Debug - Zero Configuration


It is possible to run and debug any JavaScript file without any debug launch configuration. Just select "Node.js" from the dropdown menu on the debug tab and press the debug ▶️ icon. All debugging features are supported.

Enable Type Checking For JavaScript


Use TypeScript to check your plain JavaScript code by adding a //@ts-check to the top of the file.


To enable the setting globally across your entire project, add the following line to your User Preferences ( ⌘ + ,)...


"javascript.implicitProjectConfig.checkJs": true  

Drop a .tsconfig file in your project to control specific TypeScript checking features.

Integrated Terminal


A full featured, high-performance terminal. Right inside of VS Code.

Intellisense In JSON Files


Intellisense is provided in JSON files. This works not only in the User Preferences file, but also in package.json files allowing you to see the current version of any npm package as you import it.


Use Ctrl + Spacebar to trigger intellisense at any time.

Docker


VS Code can configure, build, deploy, manage and even debug Docker containers with the Docker extension.

Insiders Build


The VS Code Insiders build contains all of the latest and greatest features that might not be available in the stable release yet. You can download and install the Insiders Build right alongside the stable release.

Settings Sync


Use the Settings Sync extension to synchronize your theme, user preferences and installed plugins across installations of VS Code. Note that these instances do not have to be on the same machine. In fact, you can share your exact setup of VS Code with a friend or collegue simply by publishing your settings publically and sending them the ID.


Note that this is particularly useful for keeping VS Code stable and the Insiders Build in sync.

Multiple Launch Configurations


VS Code can launch and attach the debugger across multiple processes. This is called a "Compound Launch Configuration". This is useful when dealing with a front-end heavy application that contains both a server comonent and some sort of built-in development server (such as Webpack) which is handling live-reloads.


This video uses the following launch configuration to debug both an application that has both server (Express) and front-end (React) components and uses the following launch configuration (launch.json).


{
  "compounds": [
    {
      "name": "Launch Browser/Server",
      "configurations": ["Launch Browser", "Launch Server"]
    }
  ],
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Browser",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Server",
      "program": "${workspaceRoot}/server/server.js"
    }
  ]
}

Note: you need to have the Debugger For Chrome extension installed to debug applications running in Chrome.

Deploying Apps


VS Code can deploy applications directly to Azure with the Azure App Service Tools extension. The extension creates the site via a wizard and then generates a shell script which automates the CLI commands to check code into Git and then pull into Azure.


When using AppService for Linux, npm install and npm start are run automatically by Azure.