Visual Studio Code combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging.
First and foremost, it is an editor that gets out of your way. The delightfully frictionless edit-build-debug cycle means less time fiddling with your environment, and more time executing your ideas.
There are thousands of extensions in the visual studio Marketplace, I am coming with some extensions which are really helpful in my frontend development journey.
1. Visual Studio IntelliCode
The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript, and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
IntelliCode saves you time by putting what you’re most likely to use at the top of your completion list. IntelliCode recommendations are based on thousands of open source projects on GitHub each with over 100 stars. When combined with the context of your code, the completion list is tailored to promote common practices.
IntelliCode will assist you across different JavaScript libraries, whether you’re writing client-side code with frameworks like React, Angular, or Vue or doing server-side development with Node.js.
Visual Studio IntelliCode - Visual Studio MarketplaceExtension for Visual Studio Code - AI-assisted developmentmarketplace.visualstudio.com
2. ESLint
ESLint is the officially recommended Cypress plugin that will run linting via ESLint on your spec files and display linting errors in your cypress source code.
When you are working with visual studio code if your cypress code has any format, style, spelling related errors, these errors can be get fixed using the extension ESLint.
This Plugin supports on
- Improved TypeScript detection
- Glob working directory support
- Formatter support: ESLint can now be used for formating.
- Improved Auto Fix on Save
ESLint - Visual Studio MarketplaceIntegrates ESLint into VS Code. If you are new to ESLint check the documentation. The extension uses the ESLint library…marketplace.visualstudio.com
3. JavaScript (ES6) code snippets
This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).
JavaScript (ES6) code snippets - Visual Studio MarketplaceExtension for Visual Studio Code - Code snippets for JavaScript in ES6 syntaxmarketplace.visualstudio.com
4. Prettier — Code formatter
Consistent code formatting is the key if you working in multiple groups. It happens that sometimes it is getting tougher to read properly formatted code and it will get worst when you are comparing previous versions.
Prettier enforces a consistent style by parsing our code and re-prints it.
It can be configured to implement certain rules based on the requirements.
Prettier - Code formatter - Visual Studio MarketplaceExtension for Visual Studio Code - Code formatter using prettiermarketplace.visualstudio.com
5. Live Share
Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time, regardless of what programming languages you’re using or app types you’re building.
It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!
Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.
Live Share Extension Pack - Visual Studio MarketplaceIf you're not already familiar with Visual Studio Live Share, refer here for more information. This extension pack…marketplace.visualstudio.com
Top comments (1)
Hi there, we encourage authors to share their entire posts here on DEV, rather than mostly pointing to an external link. Doing so helps ensure that readers don’t have to jump around to too many different pages, and it helps focus the conversation right here in the comments section.
If you choose to do so, you also have the option to add a canonical URL directly to your post.