VS Code Tips

VS Code Shortcuts

Select all Words

Highlight a word and press Command D and it will select all the other instances of that word meaning you can edit that word and it will edit all of the other instances of that word at the same time. To select the next word

Command D

To select all words

Command shift D

Multiple cursers

Press option and click to have multiple cursers. If for example you want to edit or add text in various places you can do it all at once by pressing option and clicking in the various places and then typing.

Option Click

Create a File and Folder

To create a file and folder at the same time just create a new file and add the folder name followed by a slash and then the file name.

components/button.tsx

VS Code Settings

Monospaced fonts

To use coll fonts that turn your symbols into real looking symbols you can use Fira Code which is free. You can enable on VS-code by selecting the font in the settings editor under "Commonly Used" or you can add a '.vscode/settings.json` file.

{  "editor.fontFamily": "Fira Code",  "editor.fontLigatures": true}

VS Code Extensions

Here is a collection of some of my favorite VS Code extensions.

Add a Spell checker

Install the spell checker Extension for VS Code and then add a .vscode/cSpell.json file with an array of words for that project that you want the spell checker to ignore. Or you can go to settings, command , search for spell add add the word to the "C Spell: Dictionaries" so it will be excluded from spellchecking for all projects.

{  "words": ["Fira", "Monospaced"]}

Error Lens

If you really want to highlight your errors then the Error Lens extension will be of great help. It will add the error to the end of the line so it is really easy to see and understand what the error is.

Add folder icons

The Material Icon Theme extension will add icons to your folder structure which is just nice and makes finding folders easy to see.

Bracket Pair Colorizer

The Bracket Pair Colorizer makes it so much easier to see where your brackets start and end by showing them in different colors so much easier to see when things are going wrong.

Formatting Toggle

Sometimes you just don't want to format your code or prettier is doing things that you don't want it to so being easily able to turn it on and off is really useful. Formatting Toggle is a great extension.

This has to be one of the best extensions out there. This gives you the ability to send a link to someone so they can jump into your VS Code editor and type away meaning they can help you debug your code. VS Code Live Share is a great way to pair program and you have have numerous people join the session.

Search Node Modules

This is one I have only recently started to use and it has been a life saver for when you have to debug anything inside node modules folder. Search Node Modules allows you to easily navigate the file inside your project's node_modules directory.

Tailwind Intellisense

Of course if you are a TailwindCSS fan like me then this is a must. Tailwind CSS Intellisense gives you advanced features such as autocomplete, syntax highlighting, and linting.

Conclusion

Of course there are many other extensions that I have in use some of them are installed and probably never used but for sure the above are some of my favorite and ones I use all the time. Feel free to share yours with me on twitter. Maybe there is a cool extension out there that I am missing.