VSCode HTML and CSS support add extention
1. REST Client
If you are developing Web applications, then you have to deal with REST or GraphQL. I usually used tools like Postman, SOAP UI as a REST client until I found this VS Code extension. With this simple yet powerful extension, it is very easy to REST request or GraphQL query. It also supports sending cURL commands. In this way, this extension helped me to focus on using only the VS Code and reduced switching to other tools like Postman.
Link:
2. JavaScript (ES6) code snippets
How many times did it happen to you that you have to type the same Code again and again? Fortunately, VS Code comes with a solution in the form of Code snippets. Code snippets help dramatically reduce typing the same Code and instead give time to focus on the real Code.
JavaScript (ES6) code snippets offer code snippets for ES6 syntax.
Link:
3. ESLint
ESLint is a Static Code Analyzer that Analyzes and quickly find problems in your Code. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues. As a bonus, ESLint can also fix the problems. This extension seamlessly integrates with the VS Code.
Link:
4. Bracket Pair Colorizer
Handling brackets is a painful experience. Especially if you have legacy JavaScript code with many nested callbacks (Pyramid of Doom), then managing brackets can be a daunting task. Many times it happens that I just deleted a line with a bracket and invested some time to fix the bracket issue. Fortunately, this little extension can help you immensely to manage brackets by colorizing matching brackets.
Link:
5. Auto Close Tag
This extension is handy, especially to write HTML code. Once you write the HTML/XML Tag, this extension takes away the tedious task and closes the Tag automatically.
Link:
6. Auto Rename Tag
“Auto Rename Tag” is another must-have extension for Web Development. How many times does it happen that you have renamed one Tag and wished that the other Tag is automatically renamed? Thanks to this extension, whenever you rename an Open/Close Tag, the other Tag is automatically renamed.
Link:
7. Code Spell Checker
“Code Spell Checker” is a convenient extension both for Native and non-Native English speakers. Have you ever faced the embarrassing situation when your colleagues pointed out or renamed your Code only because of silly spelling mistakes? Fortunately, with this extension, you will get a warning when there is a Spelling mistake.
Link:
8. vscode-icons
Web Projects usually have a wide type of files: HTML, CSS, JavaScript, JSON many other types. Did you know that you can have beautiful Icons for different file types? If you Install this vscode-icons, then you can have a nice visual representation of different file types as per their file Extension. With 5.3 million downloads, it is one of the most downloaded VS Code extension.
Link:
9. Paste JSON as Code
In Web development, you usually have to deal with API. Whether you develop a Client or Server, you often will get a JSON data structure and need to develop the Class from that JSON data. With “Paste JSON as Code”, you can easily generate JavaScript, TypeScript class from the JSON data Structure. Thus you can spare the manual and tedious generation of Code from the JSON data. This extension offers Code Generation for TypeScript, JavaScript, and almost in all popular programming languages.
Link:
10. Docker
Docker is the disruptive containerization Technology which has completely changed the software delivery/software deployment landscape. As a Web developer, you also may need to deliver your Code in a Docker Container. Another handy feature of Docker is that you can use a Dockerized version of almost all software (e.g., Databases, Kafka) without directly installing them and thus keeping your working machine lean and clean.
Docker offers a CLI to perform all the operations e.g., installing a container, deliver software in containers, and many other functionalities. Alternatively, you can use the Docker Extension to have a 360-degree overview of your Docker landscape and can perform all the Docker operations via UI. Once I came to know about this extension, I hardly use CLI for Docker operations.
Link:
11. Project Manager
As a Developer, you usually need to work on multiple projects at a time. Did you know that instead of opening different projects from a folder, you can manage your projects in a better way by this extension? It adds an extra sidebar for your projects. You can auto-detect project from Git/Folder, switch between projects with this extension. It also makes remote working easier with the option of Remote Projects.
Link:
12. Visual Studio IntelliCode
Probably you have noticed that when you compose an Email in Gmail, you got AI-assisted mail auto-completion. Do you know that there is also an AI-assisted Code autocompletion extension in VS Code? With the Visual Studio IntelliCode extension, you can have AI-assisted development features for TypeScript/JavaScript, Python, Java. Although there are some other AI-assisted development extensions, I find this one the best.
Link:
13. Quokka.js
When I needed to test a small Code snippet in JavaScript, I used to do it in Chrome/Firefox Console. But once I tried with Quokka, I felt in love with this extension and abandoned the Console. It is a very modern and slick Sracthpad for TypeScript and JavaScript code. This extension is compelling yet lightweight and provides the Zen mode development by providing Scrathpad functionality in your favorite browser.
Link:
14. Live Server
Another very boring and tedious task during Web development is that when you change your code, you need to refresh your browser to see the effect of your changes. The “Live Server” extension can help you immensely by automatically refresh your browser when something is changed. Thus it can both give you fun in development and boost productivity. Live Server is another gem of Extensions and must-have for Web Developers.
Link:
15. GitLens
Over the years, Git has emerged as the “Numero Uno” VCS system. No matter whether you are developing for your company or working on your private project, you must use Git. Although Git offers a vast set of commands to perform the tasks, I always preferred some UI for Git. Now, Git Lens has taken the Git UI functionality to the next level. This extension gives a 360-degree view of your Git workflow and provides all the Git functionality in a small View. Also, this tool reduces your Context, switching between VSCode and other UI tool or CLI and make you more productive.
Link:
16. Code Runner
During your development, you need to run your code or code snippet. Also, you may have a preference for a specific Shell. Code Runner offers the possibility to run Code or Code snippet for virtually all major programming languages in all kinds of shell. With over 4 million downloads, it is also one of the most popular VS Code extensions and loved by the developers.
Link:
17. Prettier
If you work in a team, it is crucial that you have a consistent Code formatting. It is very frustrating when you have inconsistent code formatting, which may lead to low readability and harder version controlling. Fortunately, there is an excellent VS code extension that can take care of code formatting: Prettier. It enforces a consistent style by parsing your Code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. Also, it supports all types of files for Web Development.
Link:
18. Path Intellisence
If you work on backend development, then you have to deal with the file. Usually, another context switching task during file operation is to visit the actual file path, copy it, and paste it in VSCode. The extension “Path intesllisence” can help you by autocompleting file paths when you type. This is another handy Extension loved by the developers (3 million downloads).
Link:
19. Color Picker
If you work on frontend development, you have to work with Colors. Unfortunately, the colors are hexadecimal encoded and hard to remember (at least for me). So, instead of using my brain power to remember those hexadecimal numbers for colors, I use this sweet VS Code extension to deal with colors in CSS/SCSS.
Link:
20. Live Sass Compiler
SASS/SCSS has many advantages over CSS, as they are more modular. In modern frontend development (e.g., React, Angular, Vue), SASS/SCSS are preferred over CSS. Unfortunately, your browser only understands CSS, and your SASS/SCSS codes are transpiled to CSS. How does your SASS/SCSS look like when they are transpiled to CSS? Fortunately, this VS Code extension can make your life easier by transpiling your SASS/SCSS files into CSS files on the fly and automatically gives you a live preview of the app or the compiled styles in your browser.
0 Comments
CAN FEEDBACK
Emoji