My VSCODE Setup — Top 10 Visual Studio Code Extensions
Welcome back to the My VScode Setup Series, as earlier we see Top 10 Theme for Visual Studio Code, now it’s time to explore Top 10 useful extensions which help you to write better, debug gable & structured code.
Let’s Start…
Git Lens — Git Supercharges ( 8M + Downloads)
GitLens superchages is a built-in vscode tool which helps you to visualize private and public git repo at a glance. GitLens integrates with the Source Control feature through which git features are accessed through Vs Code Itself.
GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.
Installation Link: GitLens — Git supercharged — Visual Studio Marketplace
Intellisense for CSS class names ( 3M+ Downloads)
A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.
This extension comes very handy when there is a lot of class in your workspace, and this extension provides you with intellisense and autocompletes your class name.
Installation Link: IntelliSense for CSS class names in HTML — Visual Studio Marketplace
Bookmarks (1.3M + Downloads)
Bookmarks Extension helps you to navigate in your code, moving between important positions easily and quickly. Through Bookmarks, you can add multiple marks/checkpoints so that you don’t have to navigate all the time in bulky code files
- Mark/unmark positions in your code
- Mark positions in your code and give it name
- Jump forward and backward between bookmarks
- See a list of all Bookmarks in one file and project
Installation Link: Bookmarks — Visual Studio Marketplace
Auto Import (1.3M + Downloads)
Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
Also, if you change/move your file from one folder to another, it automatically makes all the changes in your Imports file.
Installation Link: Auto Import — Visual Studio Marketplace
Import Cost (1M+ Downloads )
As a Developer, we need to keep in mind the package size of our imported plugins and library which might build in larger size. To Audit that, Import cost Plugin helps to show you the size of an imported 3rd party library the moment you import it (or several moments thereafter).
This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
Installation Link: Import Cost — Visual Studio Marketplace
Prettier — Code formatter ( 11M+ Downloads )
One of my favourite extensions which allows you to format the code in structure, so that it is more readable and understandable.
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and reprinting it with its own rules that take the maximum line length into account, wrapping code when necessary.
Prettier Supports 4 Types of languages
- JavaScript: TypeScript · Flow · JSX · JSON
- CSS: SCSS · Less
- HTML: Vue · Angular
- GraphQL: Markdown · YAML
Installation Link: Prettier — Code formatter — Visual Studio Marketplace
Polacode ( 414K Downloads)
This Extension helps you to export your selected code in an image file in a more elegant and structured way.
The extension allows to export the code into png in various color themes (dark 0r Light)
Installation Link: Polacode — Visual Studio Marketplace
Live Server (10.5M+ Downloads)
Live server allows you to create a local development server ( e.g. localhost) with a live reload feature for both static and dynamic Pages. We can serve any Webpage to display the files on the browser. It Provides an One Click feature to launch URL in browser.
Installation Link: Live Server — Visual Studio Marketplace
CSS Peek (1.6M+ Downloads )
CSS Peek allows you to visualize the CSS class property & definition within the HTML page where it defines, It Supports CSS/SCSS/LESS (classes & ID’s) found in strings within the source code.
Installation Link: CSS Peek — Visual Studio Marketplace
Settings Sync (2.3M+ Downloads)
Settings sync allow your VScode setting configuration into a gist which further connects to GitHub account, so if you want same configuration in other platform you simple install all the extensions, settings in one click
Settings sync becomes very handy to share VScode configurations and packages to install, so you don’t have to manually install all of the themes.
Installation Link: Settings Sync — Visual Studio Marketplace
So far you read, here is one bonus Extension for you…
Auto Rename Tag (4.9M+ Downloads)
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
Installation Link: Auto Rename Tag — Visual Studio Marketplace
These are the Top 10 Extensions of VScode which i used, comment below which are you favourite,
Check Out : Top 10 Visual Studio Code Themes
Thanks for Reading My Blog, visit My Website https://iparagsaxena.in
