DEV Community

Cover image for Introduction to VSCode and extensions for Front-end students
Arthur Nascimento Assunção
Arthur Nascimento Assunção

Posted on

Introduction to VSCode and extensions for Front-end students

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)

Like it? See more in IntelliSense in VSCode Docs.

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
Figure 1. Google Chrome's joke. Source: Tecmundo

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. Alternatively, you can use the web version at vscode.dev. The startup screen of VSCode is shown in Figure 2.

Startup screen of VSCode
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 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
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. 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
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 extension highlights both closing and opening tags of elements/components. (See Figure 4).

Figure 4. Highlight Matching Tag extension screenshot. Source: VSCode Marketplace.
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 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.
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 extension displays the class of each element's end tag. (See Figure 6).

Figure 6. HTML End Tag Labels extension screenshot. Source: VSCode Marketplace.
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. This extension colorizes code indentation for any language. (See Figure 7).

Figure 7. Indent-rainbow extension screenshot. Source: VSCode Marketplace.
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. 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.
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 extension helps you develop accessible websites and understand the WCAG guidelines. (See Figure 9).

Figure 9. Web Accessibility extension screenshot. Source: VSCode Marketplace.
Figure 9. Web Accessibility extension screenshot. Source: VSCode Marketplace.

Non-essential Extensions

9. Error Lens

The 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.
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 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.
Figure 11. Active File In Status Bar extension screenshot. Source: VSCode Marketplace.

11. Project Manager

The Project Manager extension allows you to manage your projects directly within VSCode's interface. (See Figure 12).

Figure 12. My projects in Project Manager
Figure 12. My projects in Project Manager.

12. VSCode Highlight Matching Tag

The VSCode 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.
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 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.
Figure 14. Auto Import - ES6, TS, JSX, TSX (VSCode Extension) screenshot. Source: VSCode Marketplace.

14. Case Change

The 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.
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 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 extension.

17. Stylelint

There is a static code analiser for CSS and your name is 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 allows to use the latest version of JS and TS.

19. Template String Converter

The 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 extension provides auto-complete for imports in TypeScript files. (See Figure 17).

Figure 16. TypeScript Importer screenshot. Source: VSCode Marketplace.
Figure 16. TypeScript Importer screenshot. Source: VSCode Marketplace.

21. Package Json Upgrade

The 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.
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!

Top comments (0)