My Top VS Code Extensions for Web Development

Visual Studio Code is the most popular text editor out there and for good reason to. I enjoy editing on VS Code because of how customizable it is, when first installed it is a very barebones environment but with some modifications to the theme, settings.json and the addition of extensions users can turn a simple text editor into their perfect IDE for their needs. So here are my top extensions:

  1. GitLens – This extension supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

2. Bracket Pair Colorizer – This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use. Users are also able to modify the settings.json with “bracket-pair-colorizer-2.colors” to change the bracket colours to their own custom ones rather than the default.

3. emojisense: – This extension lets users insert emoji’s into their code with a simple short cut of CTRL-i. No need to google for emoji’s or find hex codes online to put into your strings you have all the emoj’s at your finger tips.

4. ErrorLens – This highlights any errors or warnings users have with a short detailed message. It even combines with other extensions to provide a consistent look to your editor, for example combined with CodeSpellChecker it highlights any spelling errors in your code so they’re easily noticeable rather than a dull little warning in your status bar.

5. PowerLevel10k (Terminal Theme): A Zsh theme (github.com) – This is not so much of an extension but it is a terminal theme that uses ZSH. However this theme is not just aesthetically pleasing to look at, it is very practical too. Again it is a theme that is fully customizable by users with segments. For example, within the segments, you can add the status of your battery, your OS, time, public IP, azure account name and even the status of your VPN.

Problem when cloning vs code project from GitHub

Problem: After cloning VS Code project I ran into the following error:

Error: No version of chokidar is available. Tried chokidar@2 and chokidar@3. chokidar@2: Error: Cannot find module ‘watchpack-chokidar2

The error would occur when trying to run ‘npm start’, it will compile the code successfully but fail to load the webpage.

Solution: In order to fix this error, I had to delete node_modules folder and the package-lock.json file. Then clear my cache and update my npm globally. Finally running ‘npm install‘ reinstalled the necessary files in order to compile the code correctly. Following these steps eradicated the error.

https://stackoverflow.com/questions/66734503/react-npm-start-not-working-no-version-of-chokidar-available