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.
| Extensions | Scale of usage (1-5) | Description |
|---|---|---|
| Better Comments (opens in a new tab) | 4 | Gives different color highlight for different comment type |
| Advanced New File (opens in a new tab) | 5 | Create a new file on a specific folder just by keystroke, I mapped ⌘ + N to this extension |
| Bracketeer (opens in a new tab) | 4 | Useful to change bracket, or remove the bracket, select text inside a quote, change quote (", ', `) |
| Dracula Theme (opens in a new tab) | Default Theme | Best dark theme for me. I even use it on my website |
| File Utils (opens in a new tab) | 5 | A convenient way of creating, duplicating, moving, renaming and deleting files and directories |
| GitLens (opens in a new tab) | 2 | A git extension that show git status on the line |
| Indent Rainbow (opens in a new tab) | 4 | Makes indentation easier to read. You can only use bracket color, but I prefer this one |
| Material Icon Theme (opens in a new tab) | Default Icons | Great icons, it has a lot of icons for folders too |
| Case Preserve (opens in a new tab) | 3 | This 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) | 5 | This extension is for formatting code, it will format the code when you save it |
| Tab Out (opens in a new tab) | 3 | Escape bracket using tabs, similar to eclipse editor |
| VS Sequential Number (opens in a new tab) | 3 | Input sequential number in the across multiple cursors. This is unexpectedly useful |
HTML, CSS, JS
| Extensions | Scale of usage (1-5) | Description |
|---|---|---|
| Auto Rename Tag (opens in a new tab) | 4 | Auto 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) | 4 | Highlight web colors (hex, HSL, RGB, etc) |
| CSS Peek (opens in a new tab) | 3 | Peek CSS id and class definition |
| HTML CSS Support (opens in a new tab) | 3 | CSS intellisense for HTML |
| Turbo Console Log (opens in a new tab) | 5 | Use this all the time, will add console log with a keystroke |
React, Next.js, Tailwind CSS
Extensions for my current go-to workflow
| Extensions | Scale of usage (1-5) | Description |
|---|---|---|
| Tailwind CSS IntelliSense (opens in a new tab) | 5 | Auto complete for Tailwind CSS classes |
| Quokka.js (opens in a new tab) | 3 | JS and TS playground, very useful for testing map function, etc |
| Github Copilot (opens in a new tab) | 3 | Very useful, but my 2013 Macbook Air sometimes can't handle the computation |
Last updated on February 12, 2023