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 is generally for text editing that increase editing workflow, and not language specific.
| Extensions | Scale of usage (1-5) | Description |
|---|---|---|
| Better Comments | 4 | Gives different color highlight for different comment type |
| Advanced New File | 5 | Create new file on a specific folder just by keystroke, I mapped ⌘ + N to this extension |
| Bracketeer | 4 | Useful to change bracket, or remove bracket, select text inside a quote, change quote (", ', `) |
| Dracula Theme | Default Theme | Best dark theme for me. I even use it on my website |
| File Utils | 5 | A convenient way of creating, duplicating, moving, renaming and deleting files and directories |
| GitLens | 2 | A git extension that show git status on the line |
| Indent Rainbow | 4 | Makes indentation easier to read. You can only use bracket color, but I prefer this one |
| Material Icon Theme | Default Icons | Great icons, it has a lot of icons for folders too |
| Case Preserve | 3 | This one is super useful, when you select occurences (⌘ + D) and they have different cases, it will preserve the case when you change the text |
| Prettier | 5 | This extension is for formatting code, it will format the code when you save it |
| Tab Out | 3 | Escape bracket using tabs, similar to eclipse editor |
| VS Sequential Number | 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 | 4 | Auto rename paired HTML tag, you can also use the VSCode built-in, but it is kinda buggy in React |
| Color Highlight | 4 | Highlight web colors (hex, hsl, rgb, etc) |
| CSS Peek | 3 | Peek CSS id and class definition |
| HTML CSS Support | 3 | CSS intellisense for HTML |
| Turbo Console Log | 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 |
|---|---|---|
| Next.js React Snippets by iJS | 1 | Usually only using the gsp, gssp, probably might just create a custom snippets tbh |
| Headwind | 5 | Sort Tailwind CSS classes |
| Tailwind CSS IntelliSense | 5 | Auto complete for Tailwind CSS classes |
| Quokka.js | 3 | JS and TS playground, very useful for testing map function, etc |
| Github Copilot | 3 | Very useful, but my 2013 Macbook Air sometimes can't handle the computation |