Basic editing in VS Code
VS Code comes with some great options, which will enable you to code faster. Let's look at some of the options.
Generating HTML
The Emmet 2.0 extension is built into the editor, and helps you to quickly write HTML code.
Here are some examples.
To create a table with five rows having two columns in each row, you can use the following statement:
table>tr*5>td*3
This is what the table looks like:
Figure 1.29 – Generate HTML using the Emmet extension
As shown in the preceding screenshot, you will notice that VS Code starts showing you the HTML it will generate. Press Enter to generate the HTML.
In case you want to add a class attribute to the tag, use a dot (.) after the tag name. An example of this can be seen in the following code snippet:
table>tr*5.myclass>td*2
This will generate the same table as in Figure 1.29, with myclass placed as a class attribute for the <tr/> tag. The cursor will be placed between the first <td></td> tag; use Tab to navigate to the next <td/> tags for faster editing.
Multi-cursor editing
One of the most important features of VS Code is the multi-select cursor. It has several variants, which we will explore now, as follows:
- Alt/Option + Ctrl/Command + Down Arrow Key： This option will allow you to place a cursor on multiple lines at the same place. In the following screenshot, you can notice the cursor is placed on five different lines at the same spot:
Figure 1.30 – Multi-cursor editing on the same position
- Ctrl/Command + Shift + L： This command will allow you to select multiple occurrences of the same text and edit at the same time. Pressing the arrow key will keep the cursors active and allow quick multi-cursor editing. Press Esc to remove the cursors. This is illustrated in the following screenshot:
Figure 1.31 – Multi-cursor editing of the same text
- Alt/Option + mouse click: This option will allow you to place cursors at specific points and edit at the same time. Press Esc to remove the cursor. This is illustrated in the following screenshot:
Figure 1.32 – Multi-cursor editing by placing cursor on mouse clicks
- Ctrl/Command + D： Highlight a text item and then, on each press of Ctrl/Command+D, the system will move the cursor to select the same text item. If you would like to skip a specific selection, press Ctrl/Command + K, and then continue with Ctrl/Command + D.
- Alt/Option + Shift + Down Arrow Key： Place the cursor on a particular line and press the command to duplicate the same line.
- Alt/Option + Down Arrow Key： Place the cursor on a particular line and press the command to move the line below. The same works for multiple selected lines.
Code refactoring
While writing code, there are opportunities when the code written can be further optimized to increase readability and maintainability. Readable code is easier to change. It allows other developers to easily find the required code section and make changes as required. In a software development life cycle, having to often maintain or change code is more time consuming then first writing it.
VS Code provides some nice code refactoring features. Support for JavaScript and TypeScript is built into the tool. Let's go through a few examples.
Extracting to a constant
Once you select a section of code, a light bulb appears on the left; on clicking that, you will see a context menu open up with some refactoring options. Once you select the Extract to constant in module scope option, VS Code will create a constant and replace it with the string literals—for example, 'Product List!', shown as follows:
Figure 1.33 – Extract to constant
The following screenshot shows the refactored code. Here, string literals have been replaced with a constant variable:
Figure 1.34 – Extract to constant refactored code
Apart from extract to constant, another option is extracting code to a method.
Extracting to a method
Most of the time while writing code, you come across a piece of code that can be reused. This code is extracted into a method to avoid code duplication. This enhances code maintainability, since future changes are not required to be done in several places.
VS Code provides a very easy-to-use and quick way to extract your code into reusable methods.
In the following example, the displayed success message is selected. A light bulb appears on the left and shows an Extract to method in class option:
Figure 1.35 – Reusable code can be extracted to a method
Once you select this option, VS Code will ask for a method name as an input, as illustrated in the following screenshot:
Figure 1.36 – Reusable code can be extracted to a method
On entering the method name, and as shown in preceding screenshot, the selected piece of code will be extracted into a method, and a method call will be placed in the same section.
Renaming symbols
It is often the case that while writing code, you might feel the need to rename some used variables. These variables are used in several places, and Find and Replace seems to be a hectic option.
VS Code here provides a quick Rename Symbol option.
Select the variable to be changed and press F2. VS Code will ask for the new variable, as illustrated in the following screenshot:
Figure 1.37 – Rename variable using F2
On pressing Enter, the variable name is replaced throughout the file, as illustrated in the following screenshot:
Figure 1.38 – Variable name changed to newVariableName
The preceding screenshot shows pageTitle changed to newVariableName.
Refactoring extensions
Furthermore, VS Code supports refactoring for other languages with extensions. You can search the refactoring extension for your language on the VS Code extension marketplace.
Snippets
Code snippets help you code faster—these are predefined code templates that VS Code suggests while writing code. The following is an example of a method template—on pressing Tab, the code on the right will be inserted:
Figure 1.39 – Code snippets
Apart from the predefined templates, there are several extensions available that will come with their own code snippets.
Custom snippets
Snippets help you to be quick in writing repetitive code, and in case the out-of-the-box snippets do not satisfy your requirements, VS Code provides you with an option to define your own custom snippets, called User Snippet.
Let's create a user snippet for HTML code.
Go to File | Preferences | User Snippet. The command pallet will pop up. Enter html and press Enter, as illustrated in the following screenshot:
Figure 1.40 – Create custom HTML code snippets
The html.json file contains the HTML user snippets. We will create a snippet that will generate a table. The list that follows details the different parts of a user snippet.
In our example, the following applies:
- table-snippet: This is the name of the snippet.
- prefix: The name mentioned in this section is used to call the snippet.
- description: This will be displayed in the pop-up window.
- body: This is the place where you write your code template. It's an array that will contain the line of code to be inserted when you call the snippet. \t is used for code indentation.
Copy and paste the following code into an html.json file:
''table-snippet'':{
''prefix'': ''mytable'',
''description'': ''Table Snippet'',
''body'': [
''<table>'',
''\t<tr>'',
''\t\t<td>Column 1</td>'',
''\t\t<td>Column 2</td>'',
''\t</tr>'',
''</table>'',
]
}
So, our snippet is created. Next, we will call it. If the following code does not work for you, restart VS Code.
As soon as you start typing mytable, VS Code suggests the code snippet you created, as illustrated in the following screenshot:
Figure 1.41 – Calling the custom HTML code snippet created earlier
On pressing Tab, the code will be inserted, as illustrated in the following screenshot:
Figure 1.42 – Code created from the custom HTML code snippet
The preceding screenshot shows the table generated from User Snippet.