Frontend VS Code environment setup
In this tutorial you’ll learn how to setup environment for front-end development. We have 3 sections:
In the first, you will learn about the basic setup of the VS-code IDE.
In the second, you will check which extensions you need to optimize your day-to-day work.
In the last one, you can decide if you will use a specific framework.
Section 1 — Basic configuration
When we install our VSCode you would like to customize it, for this reason I would like to list the following themes and icons:
Themes
- One Dark Pro.
- Monokai Pro.
- Dracula Official.
File Icon theme
- Material Icon theme.
- Vscode-icons.
Product Icon them
- Cabon Icons
Before we continue with second section it’s a good idea if you set some properties from settings.json.
To edit it you need to press command + shift + P and search Preferences: Open User Settings (JSON) and press enter.
The settings you need to add are:
Section 2 — Extensions
One of the most important things when we want to optimize our development environment is to add the correct extensions.
For this reason, you can see most of the import extensions no matter what JS frameworks you’re using:
Auto close Tag
Auto Rename Tag
Auto Import
Better Comments
CSS Peek
Error Lens
ESLint
Git Graph
Git History
GitLens
Image preview
Import Cost
Inline fold
Path Intellisense
Prettier
RapidAPI Client
Section 3 — Extensions depending on the framework
Every framework needs different extensions, for this reason you can see different sub-sections depending on the frameworks:
Angular
- Angular Essentials (version 13)
- Angular Jasmine Unit Testing snippets
- Angular Snippets (version 13)
- TypeScript Hero
Conclusion
This was a basic tutorial to set up your frontend environment. If you have a more useful extension, please continue with the configuration and share it with us.
