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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Let's Go Beyond
In upcoming articles, you will dive into the world of HTML. See you later!
Top comments (0)