Note
I always recommend to first install an Extension Pack for whichever language you are coding in. The listed extensions are to be installed in addition to the extensions provided in popular Extension packs. I do not own any of the extensions listed, nor is this an AD.
Both extensions combined lets you chat directly with ChatGPT via Github's Copilot. You get autocomplete suggestions and the ability to generate code with the Copilot understanding the complete context of your project.
This saves a bunch of time and I find it way more convient versus feeding all the different files I have to ChatGPT and then asking for help. Troubleshooting and finding errors becomes a breeze.
| Name | ID | VS Marketplace Link |
|---|---|---|
| GitHub Copilot | GitHub.copilot |
Link |
| GitHub Copilot Chat | GitHub.copilot-chat |
Link |
Important
These extensions require GitHub Copilot access which is Paid. However, if you are a student, you can gain free access by signing up for GitHub Student Developer Pack.
Error Lens changes the way you interact with Errors on VS Code. Instead of having to stare at the "Problems" Pane in VS Code to identify the line where the error is, now you can see the culprits directly in your code in real time by distinctive coloring for Errors and Warnings. The extension also comments the reason for the Error/Warning on the same line.
This extension is highly configurable and allows you to change its behavior to suit your every need. This extension be a built in feature to be honest.
| Name | Extension ID | Link |
|---|---|---|
| Error Lens | usernamehw.errorlens |
Link |
Allows you to add colors to comments by using tags, and brings color to TODOs, commented code and other stuff. In short, makes the code a lot more lively.
| Name | Extension ID | Link |
|---|---|---|
| Better Comments | aaron-bond.better-comments |
Link |
| Name | Description | Extension ID | Link |
|---|---|---|---|
| Prettier - Code Formatter | A really useful code formatter that works for almost every language (not for Python though). | esbenp.prettier-vscode |
Link |
| Path Intellisense | Adds file path suggestions to Intellisense (the autocomplete thing). | christian-kohler.path-intellisense |
Link |
| TODO Highlight | Highlights TODO's & FIXME's | wayou.vscode-todo-highlight |
Link |
| Code Runner | Instead of seeing your code run in your default terminal, you get a fancy Output Log. It's a preference. | formulahendry.code-runner |
Link |
I'm no web developer but with the small experience I have using HTML, Node.js, JavaScript, I came across these extensions which I found super essenstial.
| Name | Description | Extension ID | Link |
|---|---|---|---|
| Live Preview | Lets you view the website you are working on Live inside of VS Code. The page updates in real time so you don't have to worry about refreshing the page each time like you would if you were using something like Live Server. | ms-vscode.live-server |
Link |
| Auto Close Tag | Everytime you create a HTML tag, it instantly creates the closing tag. Eg: Typing <body> gives you <body></body> instead. |
formulahendry.auto-close-tag |
Link |
| Auto Rename Tag | Made by the same developer, when changing the name of a HTML tag, it automatically updates the name of the respective closing tag (and vice versa) like a cute pair. | formulahendry.auto-rename-tag |
Link |
| HTML CSS Support | Lets you use IntelliSense (autocomplete) in a HTML file for attributes of IDs and classes from linked CSS files | ecmel.vscode-html-css |
Link |
| Name | Description | Extension ID | Link |
|---|---|---|---|
| Node.js Exec | Lets you directly run the selected node.js file using the run button in VS Code instead of being forced to run it through console each time. | miramac.vscode-exec-node |
Link |
| NPM Intellisense | Adds intellisense to NPM import statements | christian-kohler.npm-intellisense |
Link |
| Name | Description | Extension ID | Link |
|---|---|---|---|
| Black Formatter | Allows you to format your python code. | ms-python.black-formatter |
Link |
| Pylance | Quality of life improvement for python and IntelliSense's compatability with Python | ms-python.vscode-pylance |
Link |
| Python Extended | Adds even more IntelliSense code snippet's | tushortz.python-extended-snippets |
Link |
| isort | Sorts your python imports and arranges them according to conventions | ms-python.isort |
Link |