Visual Studio Code for Web Development

Visual Studio Code (VS Code) is powerful and it helps to improve our productivity significantly. In this post I would like to share some efficient tips for web development.

Built-in Features

Shortcuts

There are countless keyboard shortcuts in VS code. You can view them by pressing ⌘+K ⌘+R (Keep command ⌘ pressed, then press K and R successively) on macOS, or Ctrl+K Ctrl+R on Windows. Here I will list the most useful shortcuts. I use symbols ( for command, for shift, for option and for control) for macOS and Ctrl, Shift, Alt for Windows.

General

  • ⇧ ⌘ P/Ctrl+Shift+P Show All Commands
    We can access all available commands based on your current context. If we forget some shortcuts, just use this command. We can also use F1 to show all commands.
  • Ctrl+` Toggle Integrated Terminal
    This is a command that is the same on Windows and macOS. With the integrated terminal, we can use some commands like npm install, npm start easily.
  • ⌘ P/Ctrl+P Quick Open
    With quick open, we can view recent active files. We can type filenames or use array keys to open the target file. Furthermore, if we repeat quick open twice (i.e., ⌘+P ⌘+P/Ctrl+P Ctrl+P, we can keep or Ctrl pressed, meanwhile press P twice), we can cycle quickly between recently opened files.
  • ⌃ 1/Alt+1 Open 1st Tab
    We can switch to the tab based on its index. The first tab is the left most one. It’s useful when the number of tabs are small.
  • ⇧ ⌘ [/Ctrl+PageUp, ⇧ ⌘ ]/Ctrl+PageDown Open Previous/Next Tab
    If we are at the first tab and we use the command to open the previous tab, we will be navigated to the last tab.

Coding

  • ⌘ C/Ctrl+C Copy Line
    It will copy the whole line where the cursor locates. We don’t need to manually select the whole line first. Similarly, ⌘ X/Ctrl+X will cut the whole line.
  • ⇧ ⌘ K/Ctrl+Shift+K Delete Line
    Use this command to delete the line in which the cursor locates (without interfering clipboard).
  • ⌥ ↑/Alt+↑, ⌥ ↓/Alt+↓ Move Line Up/Down
    We can use this command to move the current line up/down (i.e., exchange with its previous/next line).
  • ⇧ ⌥ ↑/Shift+Alt+↑, ⇧ ⌥ ↓/Shift+Alt+↓ Copy Line Up/Down
    We can use this command to copy a line up/down. Note that this command is unbounded on Linux (personally it is not used often anyway).

Launching from command line

Not only can we toggle (integrated) terminal from VS Code, we can also launch VS Code from terminal easily. The most used command is simple: navigate to the project directory, and type code .. For example, we create a React application with npx create-react-app myapp, then we can use cd myapp and code . to open VS Code directly. It’s more efficient than opening VS code and navigating among different files.
Note that on macOS, we have to install ‘code’ command in PATH first. To do that, we can use ⇧ ⌘ P or F1 in VS Code to show the commands, then type shell and we will see Shell Command: Install ‘code’ command in PATH. Hit enter and it is finished. For Windows and Linux users, the VS Code installations should add the VS Code binaries location to the system path so you don’t have to worry about that.

Emmet

Emmet is one of the most important tools in web development. It is built-in in VS Code, but it is not exclusive to VS Code. You can download Emmet for other editors as well, e.g., Sublime Text, Atom. Here I’d like to introduce the most frequent used Emmet syntax (for me). You can refer to this video or the cheat sheet for more information.

HTML Boilerplate

By typing an exclamation mark ! and hit tab (or enter, depends on personal preference), we can generate the boilerplate for HTML 5 so we don’t have to type those DOCTYPE on our own. You can also type html:5 or doc to generate the boilerplate. They perform the same function, so why not just type one character.

HTML Tags

By typing the HTML tag and hit tab/enter (I will omit the tab/enter step in the following introduction), it will generate complete opening tag and closing tag, sometimes with some common attributes. E.g., div will generate <div></div>, a will generate <a href=""></a>, img will generate <img src="" alt="">.

Some tags’ name is a bit long, and you can type abbreviations as well. E.g., bq is equivalent to blockquote and will generate <blockquote></blockquote>. inp for input, tarea for textarea, etc.

Classes, IDs and Attributes

In CSS, we can target classes with selector . and ids with #, these rules also apply in Emmet. If we want to declare a div with class row, we can type div.row and it will generate <div class="row"></div>. Similarly, div#username will produce <div id="username"></div>.
We can chain the rules together. E.g., div.col-12.col-md-8#address generates <div class="col-12 col-md-8" id="address"></div>.
In fact, if the tag is div, we can ommit the tag name and directly type .col-12.col-md-8#address, and we will get the same result as above. This is called implicit tags in Emmet.
: is used for state in CSS, and it is about HTML elements’ attributes in Emmet. Here are some examples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
a
<a href=""></a>

a:blank
<a href="http://" target="_blank" rel="noopener noreferrer"></a>

a:link
<a href="http://"></a>

input
<input type="text">

input:number
<input type="number" name="" id="">

input:p
<input type="password" name="" id="">

button
<button></button>

button:s
<button type="submit"></button>

We can also deal with custom attributes with square bracket []. The content in the square bracket is the attribute name and the corresponding value. For example, p[title="Hello world"] will produce <p title="Hello world"></p> The value can be omitted and it will generate an empty string. E.g., td[rowspan=2 colspan=3 title] will produce <td rowspan="2" colspan="3" title=""></td>.

Content

If we want to add some contents as well, we can use curly brace {}. E.g., p{Hello} would produce <p>hello</p>.
Sometimes we want to add some texts to see how well the website looks like with text, but we don’t want to type so many non-sense words. We can use lorem to generate some dummy text for us. The default lorem will generate a 30-word dummy text, but you can specify how many words should be generated by adding numbers. E.g., lorem100.

Hierarchy

We can deal with HTML’s hierarchical structures in Emmet as well. There are four operators and they are easy to understand and remember: > represents child, + represents sibling, ^ represents climb-up and () represents grouping. Here are some examples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<b>ul>li</b>
<ul>
<li></li>
</ul>

<b>h1+p</b>
<h1></h1>
<p></p>

<b>div>ul>li^p</b>
<div>
<ul>
<li></li>
</ul>
<p></p>
</div>

<b>div>(h1+p)</b>
<div>
<h1></h1>
<p></p>
</div>

Multiplication

With the multiplication sign *, we can create multiple elements immediately. For example, (p>lorem)*5 will generate 5 paragraphs, each paragraph with 30 dummy words. ul>li*3 will create an unordered list with 3 list items inside.
Sometimes, multiple elements would have relevant ids or contents. For instance, list items in an unordered list have ids from item1 to item5. We can use the dollar sign $ to achieve this. ul>li#item$*5 will produce 5 <li>s with id item1 to item5.

Balance

Emmet has a feature called “Balance”. It searches for tag or tag’s content bounds from current caret position and selects it. It will expand (outward balancing) or shrink (inward balancing) selection when called multiple times. It is helpful when we get lost in a deep HTML hierarchy. For example, if we want to cut a <div> with many nested <div>s, we may get lost which </div> should be the ending tag. With Emmet Balance we don’t need to worry about that. You can view the demo here. To perform the balancing operation, we can use ⇧ ⌘ P/Ctrl+Shift+P to toggle the command palette and type “Balance outward”. Personally, I map this to keyboard shortcuts ⌃ ⇧ ↓(Ctrl + Shift + ↓) and ⌃ ⇧ ↑(Ctrl + Shift + ↑).
After get the content selected by Emmet Balance, we can wrap the entire content in a new tag (e.g., <div class="row"></div>). To do that, we can cut the entire block, type .row and then paste the content inside. Emmet also provides a feature called “Wrap with Abbreviation”. To perform the wrap operation, just same as balancing, use ⇧ ⌘ P/Ctrl+Shift+P to toggle the command palette and type “Wrap”.

Multi Cursor Selection

We can use more than one cursors when editing with VS Code. To add more cursors with mouse/trackpad, we can keep Alt pressed and click on where we want to add new cursors. For instance, if we want to add a new class to multiple HTML elements, it’s pretty handy to use multiple cursors so that we only need to type once.
We can use keyboard shortcut ⌥ ⌘ ↑/Ctrl+Alt+↑ and ⌥ ⌘ ↓/Ctrl+Alt+↓ to set cursors above or below the current cursor’s position.
What if we want to change all of the <span>s to <div>s? VS Code offers a keyboard shortcut ⇧ ⌘ L/Ctrl+Shift+L to add additional cursors to all occurrences of the current selection. So if the current cursor lies in a span tag, using the shortcut will add cursors and highlight all spans in the file.
VS Code also provides another shortcut ⌘ D/Ctrl+D to select only the next occurrence and we can add selections one by one. But personally I seldom use that. (Just use alt+Click often.)

Fold

When you move your mouse near the line number in VS Code, sometimes you will see the down arrow, which means that you can collapse the code to save some space. You can fold the code either by clicking the down arrow, or use the keyboard shortcut to toggle the command palette and type “Fold” and hit enter.
VS Code can recognize tags, methods, classes and other structures. And you can also specify arbitrary blocks.

Extensions

VS Code has numerous fantastic extensions which help with our coding. Here I’d like to share some of the most helpful extensions.

Prettier

Prettier is an opinionated code formatter. With the help of Prettier, we can focus on the coding and don’t have to worry about the code format because it will auto format the code whenever we save the file. It supports main web languages (HTML, CSS, JavaScript, TypeScript, JSX, GraphQL, etc). It can be installed locally with yarn or npm, and it also supports editor integration. It names Prettier - Code formatter in VS Code extension. Just search in the extensions and click install, or using the command ext install esbenp.prettier-vscode in the command palette.
After installing Prettier, don’t forget to go the settings (⌘ ,/Ctrl + ,) and search format on save. By default the checkbox is off, just check that checkbox so that Prettier works everytime you save the file.
Another setting is optional: if you don’t want Prettier to mess up the git repository (Prettier might change every line in your code once you save the file), you can search Prettier: require config in the config and check the checkbox. In this way, Prettier only works won’t work without configuration files. To add a configuration file, create a new file named .prettierrc in the root directory and the content of the file is an empty object {}. If you have some preference and want to make some configuration on Prettier, you can refer to Configuration File.

ESLint

Prettier mainly focuses on code format, while ESLint deals with code logic. It is tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. Unlike Prettier whose local installation is optional, ESLint extension relys on ESLint library installed in the opened workspace folder. Fortunately, npx create-react-app installs ESLint library for us. In other case, we may have to install ESLint locally before we can use the ESLint.

1
2
3
4
5
npm install eslint --save-dev

# or

yarn add eslint --dev

ESLint makes VS Code more like a JavaScript IDE. It can detect problems like something is assigned a value but never used, something is not defined and underline warnings and errors.

References