If you are a front end developer, you probably use either Sublime Text or Visual Studio Code as your primary text editor. Both editors have excellent support for JavaScript, HTML and CSS but they go about it differently.
When I first started using VSCode, I found that installing extensions was difficult. Now there is a more streamlined method. Here you will find my list of favorite VS Code extensions – including the best out-of-the-box features – for front end web development!
Embold
Embold – Fixing bugs before deployment saves a lot of time and energy in the long run. Embold is a software analytics platform that analyses source code and uncovers issues that impact stability, robustness, security, and maintainability.
Advantages:
- With the Embold plugins, you can pick up code smells and vulnerabilities as you code, before making commits.
- Unique anti-pattern detection prevents the compounding of unmaintainable code.
- Integrate seamlessly with Github, Bitbucket, Azure, and Git and plugins available for Eclipse and IntelliJ IDEA.
- Get deeper and faster checks than standard code editors, for over 10 languages.
GeneXus
Tagline: Software that makes software
GeneXus offers an intelligent platform for developing applications and systems that enable the automatic creation, development, and maintenance of programs, databases, and mission-critical applications in multiple languages and on different platforms.
All applications modeled with GeneXus can be easily adapted to changes in businesses, as well as generated in the newest programming languages and automatically deployed to any major platform in the market.
The vision behind GeneXus is based on over three decades of experience in the creation of automatic generation and development tools for applications.
Key Features:
- AI-based automatic software generation.
- Multi-Experience apps. Model once, generate for multiple platforms (responsive and progressive web apps, mobile native and hybrid apps, Apple Tv, chatbots & virtual assistants)
- Highest flexibility. Largest number of databases supported in the market. Interoperability capabilities for system integrations.
- Future-proof: Evolve systems over long periods of time and change between technologies and platforms automatically.
- Business Process Management Support. Digital Process Automation through integrated BPM modeling.
- Deployment flexibility. Deploy apps on-premises, in the cloud or in hybrid scenarios.
- Application security module included.
- No runtime for generated applications or price by developer seat.
Verdict: With over 30 years of success in the market, Generius provides a unique platform that captures the needs of users and generates applications for present and future technologies, without the need of learning each new technology. It allows pragmatic developers to evolve quickly, responding to market and technological changes in an agile way.=> Visit GeneXus Website
Zoho Creator
Tagline: Build powerful enterprise software applications 10x faster.
GitLens
The best tool to know when the block of code was changed and by whom. It also helps to check what was the older code.
Code Runner
Want to run specific code without setting up anything? It can be achieved if you have this extension.
TypeScript Hero
Helps to improve your TypeScript Code.
Bracket Pair Colorizer
This extension allows matching brackets to be identified by colors.
When we are into a debugging session and working on a huge codebase this extension comes helps to identify open and close brackets easily.
Live server
It’s irritating to save changes in the editor and then refresh the browser to see changes, right? thanks to live server , it enforces auto-reload and ensures that your changes are rendered immediately you save your work. It creates a local development server right in Visual Studio Code to serve your static and dynamic sites.
Visual Studio IntelliCode
This extension provides AI assistance for different languages such as Python, JavaScript, and Java.
It supports different JavaScript frameworks like Angular, React, and Next.js.
It autocompletes the method or code if it is supported by the language you are writing on.
Visual Studio IntelliCode — Visual Studio MarketplaceExtension for Visual Studio Code — AI-assisted
Intellisense for CSS
This extension helps to give different suggestions and auto completions of CSS class which we used in our workspace.
Better Comments
When it comes to maintenance of project comments play a vital role. If the comments are written properly it is easier for the next developer to understand the code.
This extension helps to make interactive comments which will be really helpful. Hopefully, the next developer who is reading my code will be happy now. Ha Ha !!
developmentmarketplace.visualstudio.com
ESLint
Linting is one of the best tools for developers to figure out some of the coding issues upfronts. This extension does not only work for detecting issues but also auto-fix some of them.
JavaScript (ES6) code snippets
This extension helps to auto-complete ES6 related code.
Prettier — Code formatter
Formatting is one of the keys which helps when you are working in a group as it is harder to read code if it is not formatted properly.
This extension helps to format any kind of code. We can also configure if we needed.
CSS Peek
CSS Peek helps to quickly find and check styles applied for selected class or id. It’s beneficial for developers who don’t like to switch between different files or split the screen or like to jump between HTML and CSS Back-and-forth.
JavaScript ES6 Code snippets
It provides Code Snippets for your JavaScript code and uses ES6 syntax.
Snippets are handy and can help to prevent lots of spelling bugs and can make coding much faster. To speed up your Javascript coding, use Javascript code snippets. It also supports TypeScript and JSX files.
Auto Rename Tag
Sometimes we are thinking to change the tag name in order to do so if we change the first tag we need to go all the way down to search for the same tag to make changes.
This extension helps to rename the tag open/close tag automatically.
REST Client
We do deal with different service integrations and it might be REST or GraphQL services.
In order to check the response before implementing code in UI, we mostly use Postman, SOAP UI, or REST client.
This extension is handy to check responses in VSCode itself.
Code Spell Checker
One of the worst nightmares is in code review you get a comment to correct spelling.
These extensions help to correct spelling while coding. My best companion LOL.
Project Manager
There are times when we work on multiple projects at a time and we need to open different projects in different folders.
This extension comes to the rescue as it supports multiple projects in the sidebar. It makes remote working easier with the option of Remote Projects.
Beautify
Beautify uses the popular js-beautify to keep your JavaScript looking nice and tidy. Don’t worry about broken lines and weird spacing and indents. Just click a button, and all your code will be ready for its close-up (maybe with Polacode from above).
HTML CSS Support
HTML CSS Support (and the next extension listed) provides intellisense in your HTML files based on the CSS that is included in your project or referenced remotely. Here’s a full list of features.
- Class attribute completion
- Id attribute completion
- Supports Zen Coding completion for class and id attributes
- Scans workspace folder for css and scss files
- Supports remote css files
One thing that really stands out about this one is that you can specify remote CSS files to cache as well. You can do this by adding the following setting. This example is refering the Bootstrap 4 CSS file.
"css.remoteStyleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]Conclusion
There is a lot of functionality that Visual Studio provides that VSCode cannot provide out of the box, but almost all of those extensions are available on the VS Code marketplace. This post will give you an idea of what I use as my everyday setup as a front end developer.