VSCode Extensions

Visual Studio Code Extensions

Here is my extension list, also a scale of usage (1-5) meaning how often I use it.

Editor

These extensions are generally for text editing that increases editing workflow and are not language specific.

ExtensionsScale of usage (1-5)Description
Better Comments (opens in a new tab)4Gives different color highlight for different comment type
Advanced New File (opens in a new tab)5Create a new file on a specific folder just by keystroke, I mapped ⌘ + N to this extension
Bracketeer (opens in a new tab)4Useful to change bracket, or remove the bracket, select text inside a quote, change quote (", ', `)
Dracula Theme (opens in a new tab)Default ThemeBest dark theme for me. I even use it on my website
File Utils (opens in a new tab)5A convenient way of creating, duplicating, moving, renaming and deleting files and directories
GitLens (opens in a new tab)2A git extension that show git status on the line
Indent Rainbow (opens in a new tab)4Makes indentation easier to read. You can only use bracket color, but I prefer this one
Material Icon Theme (opens in a new tab)Default IconsGreat icons, it has a lot of icons for folders too
Case Preserve (opens in a new tab)3This one is super useful, when you select occurrences (⌘ + D) and they have different cases, it will preserve the case when you change the text
Prettier (opens in a new tab)5This extension is for formatting code, it will format the code when you save it
Tab Out (opens in a new tab)3Escape bracket using tabs, similar to eclipse editor
VS Sequential Number (opens in a new tab)3Input sequential number in the across multiple cursors. This is unexpectedly useful

HTML, CSS, JS

ExtensionsScale of usage (1-5)Description
Auto Rename Tag (opens in a new tab)4Auto rename paired HTML tag, you can also use the VSCode built-in, but it is kinda buggy in React
Color Highlight (opens in a new tab)4Highlight web colors (hex, HSL, RGB, etc)
CSS Peek (opens in a new tab)3Peek CSS id and class definition
HTML CSS Support (opens in a new tab)3CSS intellisense for HTML
Turbo Console Log (opens in a new tab)5Use this all the time, will add console log with a keystroke

React, Next.js, Tailwind CSS

Extensions for my current go-to workflow

ExtensionsScale of usage (1-5)Description
Tailwind CSS IntelliSense (opens in a new tab)5Auto complete for Tailwind CSS classes
Quokka.js (opens in a new tab)3JS and TS playground, very useful for testing map function, etc
Github Copilot (opens in a new tab)3Very useful, but my 2013 Macbook Air sometimes can't handle the computation
Last updated on November 14, 2023