Introduction to VSCode and extensions for Front-end students
Tags: vscode, beginners, webdev
Published: 2023-09-05 18:44:34

**VSCode** is the **most popular** code editor for **web development** in **2023**, but if you are a **beginner**, you may not know about it.

**Software development** requires a powerful editor with **code highlighting**, **code completion**, **code checking**, support for **almost all languages**, and more.

> Currently, **VSCode** is the **preferred choice** for almost all web development.

## What is VSCode?

**VSCode** is an alias for **Visual Studio Code**, a source code editor developed by **Microsoft** in **2015**. It is widely used by **software developers** to write, debug, and edit code in various programming languages. **VSCode** is known for its lightweight interface, extensibility, and integration with various tools and extensions, making it a popular choice for programmers working on a variety of projects. Its latest version was launched in **July 2023** with version number **1.81**.

## Why Use VSCode?

The major advantage of this code editor is its **extensible capacity**. There are extensions for almost all **purposes** of software development.

Another great advantage is the **ability** to **customize** various settings of the editor.

Moreover, **VSCode** is an excellent editor for various languages such as **JavaScript**, **Python**, **Java**, **C#**, **HTML**, **CSS**, and many others.

Another advantage is the **IntelliSense** function in the editor. This function is incredible because it allows you to:
- **Autocompletion**: IntelliSense automatically suggests words, variables, functions, and methods as you type, saving time and reducing typing errors.
- **Method and Property Suggestions**: It displays available options for methods and properties of objects, making it easier to discover functionalities.
- **Real-time Error Detection**: IntelliSense can highlight syntax errors and type-related issues as you write, helping identify problems before running the code.
- **Integrated Documentation**: Information about function parameters, method descriptions, and examples can be displayed directly in the editor, aiding in understanding APIs.
- **Quick API Exploration**: IntelliSense allows you to quickly explore libraries and frameworks, offering insights into available resources as you type.
- **Enhanced Productivity**: By speeding up code writing and providing contextual insights, IntelliSense boosts developer productivity.
- **Error Reduction**: By providing accurate suggestions and helpful information, IntelliSense assists in avoiding common errors and improving code quality.

> **IntelliSense** is a general term for various code editing features, including **code completion**, **parameter info**, **quick info**, and **member lists**. IntelliSense features are sometimes called by other names such as **"code completion"**, **"content assist"**, and **"code hinting"**. (Source: [Microsoft](https://code.visualstudio.com/docs/editor/intellisense))

Like it? See more in [IntelliSense in VSCode Docs](https://code.visualstudio.com/docs/editor/intellisense).

But, that's not all.

This code editor is **open-source**, completely **free**, **multiplatform** (it works on **Windows**, **Linux**, and **Mac**). It supports **multiple languages** (you can work in **Portuguese**, **English**, **Spanish**, or any other language) and is **lightweight** (uses minimal hardware resources, except RAM memory).

## VSCode Disadvantages

The most notable disadvantage is **RAM memory consumption**, mainly if you install many extensions. However, this problem is caused by the **Electron** base. **Electron** is a framework to create desktop applications using web technologies, similar to a browser, much like the reputation of **Google Chrome**. (See Figure 1).

![Google Chrome's joke](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrvb6dn6r0wb89yfws53.png)
Figure 1. Google Chrome's joke. Source: [Tecmundo](https://www.tecmundo.com.br/software/211458-google-chrome-usa-tanta-memoria.htm)

Personally, I prefer to develop only in **front-end technologies** using **VSCode**, but that's a personal preference.

## Installation

**VSCode** can be downloaded from the [VSCode Download Page](https://code.visualstudio.com/download). Alternatively, you can use the web version at [vscode.dev](https://vscode.dev). The startup screen of **VSCode** is shown in Figure 2.

![Startup screen of VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hr20kogiidyg7uoycm1.png)
Figure 2. Startup screen of VSCode.

## Extensions for Front-End Engineers

I've divided this section into three parts: extreme essential, essential and non-essential extensions. Feels free to install only extreme essential extensions in the first moment.

### Extreme Essential Extensions
#### 1. Live Preview

The champion among **VSCode extensions** is [**Live Preview**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) because this extension enables the preview of your web code, including **HTML**, **CSS**, **JavaScript**, and more.

To use this extension, install it, then create an **HTML** file. An icon will appear in the top-right corner of **VSCode**. (See Figure 3).

![Figure 3. Live Preview Extension. Source: VSCode Marketplace](https://raw.githubusercontent.com/microsoft/vscode-livepreview/main/img/open-preview-btn.gif)
Figure 3. Live Preview Extension. Source: VSCode Marketplace.

#### 2. Shortcut Menu Bar

You can expand **VSCode's menu bar** with useful functionalities using [**Shortcut Menu Bar**](https://marketplace.visualstudio.com/items?itemName=jerrygoyal.shortcut-menu-bar). I recommend these menus:
- **Beautify**: Fix code indentation
- **Compare with save**: Show differences between the current file state and the saved state.
- **New file**: Create a new file
- **Toggle Terminal**: Open and close terminal

To customize this extension, access **VSCode Preferences/Settings**, then search for **Shortcut Menu Bar** in the extensions section. (See Figure 4).

![Figure 4. My menu bar with Shortcut Menu Bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v0p0oh1cwr9l86hpn3w.png)
Figure 4. My menu bar with Shortcut Menu Bar.

#### 3. Highlight Matching Tag

Similar to our previous recommendation (HTML End Tag Labels), the [**Highlight Matching Tag**](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) extension highlights both closing and opening tags of elements/components. (See Figure 4).

![Figure 4. Highlight Matching Tag extension screenshot. Source: VSCode Marketplace.](https://images2.imgbox.com/71/2a/zIA1XCzK_o.gif)
Figure 4. Highlight Matching Tag extension screenshot. Source: VSCode Marketplace.

#### 4. IntelliSense for CSS class names in HTML

When developing in **HTML** or similar languages like **JSX** (such as ReactJS), it's common to use classes and CSS frameworks with numerous classes. To help with this, the [**IntelliSense for CSS class names in HTML**](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion) extension offers auto-completion for classes in your HTML code. (See Figure 5).

![Figure 5. IntelliSense for CSS class names in HTML extension screenshot. Source: VSCode Marketplace.](https://i.imgur.com/5crMfTj.gif)
Figure 5. IntelliSense for CSS class names in HTML extension screenshot. Source: VSCode Marketplace.

### Essential Extensions


#### 5. HTML End Tag Labels

When working with **HTML** or **JSX** (HTML in JS, common in ReactJS), it's often challenging to determine where an element tag ends. The [**HTML End Tag Labels**](https://marketplace.visualstudio.com/items?itemName=anteprimorac.html-end-tag-labels) extension displays the class of each element's end tag. (See Figure 6).

![Figure 6. HTML End Tag Labels extension screenshot. Source: VSCode Marketplace.](https://github.com/anteprimorac/vscode-html-end-tag-labels/raw/HEAD/images/screenshot-1.png)
Figure 6. HTML End Tag Labels extension screenshot. Source: VSCode Marketplace.

It's recommended to change the extension color to **#555** or another color that complements your theme.

#### 6. Indent-rainbow

Another extension you should consider using is [**Indent-rainbow**](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow). This extension colorizes code indentation for any language. (See Figure 7).

![Figure 7. Indent-rainbow extension screenshot. Source: VSCode Marketplace.](https://raw.githubusercontent.com/oderwat/vscode-indent-rainbow/master/assets/example.png)
Figure 7. Indent-rainbow extension screenshot. Source: VSCode Marketplace.

#### 7. Color Highlight

A useful extension for **colors** in **HTML**, **CSS**, and other languages is [**Color Highlight**](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight). With this extension, all colors, whether in plain text (such as blue, red), hexadecimal (such as #ccc), or RGB/RGBA (such as RGB(200, 100, 80)), will appear colored with the corresponding color. (See Figure 8).

![Figure 8. Color Highlight extension screenshot.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0evh52s3je60rm9tg6kz.png)
Figure 8. Color Highlight extension screenshot.

#### 8. Web Accessibility

**Web Accessibility** ensures that websites are usable by people with disabilities. Despite being essential, beginners might overlook it. This [**Web Accessibility**](https://marketplace.visualstudio.com/items?itemName=MaxvanderSchee.web-accessibility) extension helps you develop accessible websites and understand the WCAG guidelines. (See Figure 9).

![Figure 9. Web Accessibility extension screenshot. Source: VSCode Marketplace.](https://github.com/mvdschee/web-accessibility/raw/master/web-accessibility.gif)
Figure 9. Web Accessibility extension screenshot. Source: VSCode Marketplace.

### Non-essential Extensions

#### 9. Error Lens

The [**Error Lens**](https://marketplace.visualstudio.com/items?itemName=usernamehw.vscode-error-lens) extension presents code errors with colors and inlines them next to the incorrect code, aiding developers with better visibility. (See Figure 10).

![Figure 10. Error Lens extension screenshot. Source: VSCode Marketplace.](https://raw.githubusercontent.com/usernamehw/vscode-error-lens/master/img/demo.png)
Figure 10. Error Lens extension screenshot. Source: VSCode Marketplace.

#### 10. Active File In Status Bar

For projects with many files having the same name but in different directories, the [**Active File In Status Bar**](https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar) extension shows the currently edited file's full path in the status bar. (See Figure 11).

![Figure 11. Active File In Status Bar extension screenshot. Source: VSCode Marketplace.](https://github.com/RoscoP/ActiveFileInStatusBar/raw/master/media/ActiveFileInStatusBar.gif)
Figure 11. Active File In Status Bar extension screenshot. Source: VSCode Marketplace.

#### 11. Project Manager

The [**Project Manager**](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) extension allows you to manage your projects directly within VSCode's interface. (See Figure 12).

![Figure 12. My projects in Project Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ed8rav045drmm71kb6jq.png)
Figure 12. My projects in Project Manager.

#### 12. VSCode Highlight Matching Tag

The [**VSCode Highlight Matching Tag**](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) extension highlights matching opening and closing tags, making it easier to identify tag pairs. (See Figure 13).

![Figure 13. VSCode Highlight Matching Tag extension screenshot. Source: VSCode Marketplace.](https://images2.imgbox.com/71/2a/zIA1XCzK_o.gif)
Figure 13. VSCode Highlight Matching Tag extension screenshot. Source: VSCode Marketplace.

#### 13. Auto Import - ES6, TS, JSX, TSX (VSCode Extension)

The [**Auto Import - ES6, TS, JSX, TSX**](https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import) extension finds, parses, and provides code actions and code completion for imports in JavaScript and TypeScript files. (See Figure 14).

![Figure 14. Auto Import - ES6, TS, JSX, TSX (VSCode Extension) screenshot. Source: VSCode Marketplace.](https://media.giphy.com/media/l1J9FmoFwrcqr538Y/giphy.gif)
Figure 14. Auto Import - ES6, TS, JSX, TSX (VSCode Extension) screenshot. Source: VSCode Marketplace.

#### 14. Case Change

The [**Case Change**](https://marketplace.visualstudio.com/items?itemName=AkankshaSingh872.case-change) extension helps you easily change the case of variables within your code. (See Figure 15).

![Figure 15. Case Change screenshot. Source: VSCode Marketplace.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa5qnqtcj4c6f6r0i13u.png)
Figure 15. Case Change screenshot. Source: VSCode Marketplace.

#### 15. ESLint

If you want to become a Front-end developer, it's very important to know what is ESLint, it is a static code analiser to maintain your code with inside a pattern. This extension integrates [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and VSCode.

#### 16. Prettier

Prettier is a code formatter for all languages and it's interesting use in your projects. For integrate it to VSCode use the [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension.

#### 17. Stylelint

There is a static code analiser for CSS and your name is [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint). If you need to integrate Stylelint and VSCode install this extension.

#### 18. JavaScript and TypeScript Nightly

This microsoft extension called [JavaScript and TypeScript Nightly](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next) allows to use the latest version of JS and TS.

#### 19. Template String Converter

The [**Template String Converter**](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter) extension assists in converting JavaScript strings to template literals, a feature introduced in ECMAScript 2015 (ES6).

#### 20. TypeScript Importer

The [**TypeScript Importer**](https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter) extension provides auto-complete for imports in TypeScript files. (See Figure 17).

![Figure 16. TypeScript Importer screenshot. Source: VSCode Marketplace.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5z475eo7mf3z2mby0j6e.png)
Figure 16. TypeScript Importer screenshot. Source: VSCode Marketplace.

#### 21. Package Json Upgrade

The [**Package Json Upgrade**](https://marketplace.visualstudio.com/items?itemName=codeandstuff.package-json-upgrade) extension helps you identify package updates in your **package.json** file. (See Figure 17).

![Figure 17. Package Json Upgrade screenshot. Source: VSCode Marketplace.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2959o0xvo96kbf34h0jd.png)
Figure 17. Package Json Upgrade screenshot. Source: VSCode Marketplace.

## Let's Go Beyond

In upcoming articles, you will dive into the world of **HTML**. See you later!