An Interest In:
Web News this Week
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
My VS Code Setup
VS Code is one of the best editors out there in the market. And not just for the sake that is launched by Microsoft, it has some really amazing features, the primary one being, allowing developers to install extensions and use as per their requirement.
Why do we need extensions ?
As a developer, you tend to achieve your goals in the minimum time possible. Coding the same 5 lines can be really tiring. That is where extension come in handy. Just 4 words and voil! the entire syntax is laid out. While some of them autofill the syntax, there are some that provide a variety of themes. As a dark theme lover, I have plenty of them installed in my editor and I shall be sharing them with you!!
Extension I use
Just like you, I have scrolled through various articles and Instagram posts, talking about the top 20 VS Code extensions that every developer must have. Every developer ranks these extensions in the way they like. I did use them and some of them didn't suit me. And that's perfectly alright! Extensions are only a helping hand in making your lives easier. Coding the application and deploying it, is something that only a developer can do and not any extension.
Here are the extensions that you'll find in my VS Code:
Themes and Appearance:
- Atom One Dark Theme - Mahmoud Ali
- Ayu - teabyii
- Community Material Theme - Mattia Astorino
- Dracula Official - Dracula Theme
- Helium Icon Theme - Helgard Richard Ferreira
- Material Icon Theme - Philipp Kief
- Material Theme Icons - Mattia Astorino
- One Dark Pro - binaryify
- One Monokai Theme - Joshua Azemoh
- Palenight Theme - Olaolu Olawuyi
- Panda Theme - Panda Theme (one of my favourites!)
A sneek peek in one of my projects with Panda Theme
- Synthwave'84 - Robb Owen
- vscode-icons - VSCode Icons Team
Tools and Productivity:
Auto Close Tag - Jun Han
- This extension automatically adds the closing tag while writing HTML or XML syntax
Auto Import - steoates
- Probably the most helpful one, this extension automatically generates the
import
statement, in case you forget to import a snippet and have called it in your code - Comes in handy while making TypeScript or React Applications
Auto Rename Tag - Jun Han
- This extension automatically renames the closing tag when you rename the opening tag.
Auto Open Markdown Preview - hnw
- While editing README files in your editor, this extension allows you to look at your changes directly in your editor. You can also open the preview in another pane and the changes you make are automatically reflected.
Better Align - wwm
- This extension allows you to perfectly indent your code without any hassle
Better Comments - Aaron Bond
- This extension allows you to have beautiful comments in your code. It allows you to add highlights, notes, alerts and much more
Bracket Pair Colorizer - CoenraadS
- One of the best in the market, this extension highlights matching brackets so that as a developer, you are not confused while closing the wrong type of bracket
Code Time - Software
- I tend to keep a record of the time I have coded on a particular day and this extension helps me with it. Not only that, but it also provides a detailed analytics of the time spent on a particular file, the total no. of lines coded etc.
ES7 React/Redux/GraphQL/React-Native snippets - dsznajder
- Being a React developer, this extension helps me whenever I need to write a React Syntax in a file. It automatically generates the
function
and theimport
statements, and does much more than that.
Live Server - Ritwick Dey
- Probably the most talked about, this is a must-have extension since it automatically creates a server for you to view your files. Any changes in your files are automatically reflected in the server.
Path Intellisense - Christian Kohler
- This extension automatically completes the filenames as you import/export a file.
Prettier - Code Formatter - Prettier
- Neatly formats your code. It includes support for JavaScript, JSX, Vue, Angular, etc.
React PropTypes Intellisense - Of Human Bondage
- Finds the type of
props
in React and automatically generates a snippet to be added in the React Component
Those are all the VS Code extensions that I use. Hope you enjoy my article and have a great time using these helpful extensions :)
Original Link: https://dev.to/anshdhinhgra47/my-vs-code-setup-4997
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To