EditorConfig
The EditorConfig (https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) plugin has the function of creating a default configuration file for not only VS Code but also any IDE that supports this format.
This plugin is useful for standardizing things for your project and your team – for example, the number of spaces that each Tab key represents, or whether your project will use single quotes or double quotes to represent strings.
To use it, just create or have a file named .editorconfig at the root of your project and VS Code will respect the settings described in the file.
VS Code settings
VS Code, in addition to extensions, has several native settings that can help in your day-to-day work. By accessing the File menu, we can activate the automatic saving flag so you don’t have to worry about pressing Ctrl + S all the time (although this habit is already engraved in stone in our brains…).
Another interesting setting is Zen mode, where all windows and menus are hidden so you can just focus on your code. To activate it, go to View | Appearance | Zen Mode, or use the keyboard shortcut Ctrl + K + Z for Windows/Linux systems and Cmd + K + Z for macOS.
To improve the readability of your code during editing, an interesting setting is Bracket coloring, which will give each parenthesis and bracket in your code a different color.
To enable this setting, open the configuration file using the shortcut Ctrl + Shift + P for Windows/Linux or Cmd + Shift + P for macOS and type Open User Settings (JSON).
In the file, add the following elements:
{
“editor.bracketPairColorization.enabled”: true,
“editor.guides.bracketPairs”: true
}
VS Code also has the Inlay Hints feature, which shows details of parameter types and return methods, as well as other useful information on the line you are reading in the code.
To configure it in the Settings menu, look for Inlay Hints and activate it if it is not already configured. For the development of your Angular application, you can also perform specific configurations by selecting TypeScript.
It is also possible to turn on this functionality by directly configuring the settings.json file with the following elements:
{
“typescript.inlayHints.parameterNames.enabled”: “all”,
“typescript.inlayHints.functionLikeReturnTypes.enabled”: true,
“typescript.inlayHints.parameterTypes.enabled”: true,
“typescript.inlayHints.propertyDeclarationTypes.enabled”: true,
“typescript.inlayHints.variableTypes
.enabled”: true,
“editor.inlayHints.enabled”: “on”
}
Fira Code font and ligatures
An important detail that not every developer pays attention to is the type of font they use in their code editor. A confusing font can make it difficult to read code and tire your eyes.
The ideal option is to use monospaced fonts, that is, fonts where the characters occupy the same horizontal space.
A very popular font is Fira Code (https://github.com/tonsky/FiraCode), which, in addition to being monospaced, has ligatures for programming – that is, joining or changing characters that represent symbols such as ==, >=, and =>, as shown in the following figure:
Figure 1.1 – Example of symbols with font ligatures
After installing the font on your operating system, to enable ligatures in the font in VS Code, access the configuration file as in the previous section and add the following elements:
{
“editor.fon
tFamily”: “Fira Code”,
“editor.fontLigatures”: true,
}