What extensions/packs of VS Code are must for web/developers to install?

Not exactly an extension, but a practice that I'm shocked many people don't seem to use is to set up autoformatting on save.

I will hit ctrl+s after every few lines of code or so, allowing my "coding wingman" to tidy things up as I go. It releases me from caring, in the slightest, about formatting, so I'm focused entirely on writing syntactically valid code, and letting the formatter worry about the deterministic minutiae that is formatting.

The reason I like doing this in real-time rather than some `run formatting before committing` workflow is that I benefit instantly from tidy code as I'm writing it.

If you are _ever_ thinking about formatting and you spend time manipulating proper spacing and layout, semicolons, or other language-specific quirks yourself, you may be wasting time that could be spent on the non-trivial parts of writing code. Consider trying it!

Could not imagine living without Prettier. It's a code formatter. The team agrees on how we want to do formatting, and we check in our Prettier preferences, so everyone's code on the team is formatted the same automatically.

Helps keep the entire code base formatted consistently.

Prettier - Code formatter https://marketplace.visualstudio.com/items?itemName=esbenp.p...

Over the years, gitlens is an extension I've installed everytime I installed vscode on a new machine.

Other than that, the kubernetes extension is something that I use often enough although others say the Lens IDE is better for this purpose.

Peacock is pretty important for me. When I have multiple VSCode windows open, the extension lets me have different colors for these windows and helps me quickly identify what project is on what window.

VS Code Remote - Containers [1] is a game changer.

https://code.visualstudio.com/docs/remote/containers

Remote SSH

https://code.visualstudio.com/docs/remote/ssh

Two lesser known extensions I always install are:

- "Bookmarks", to persistently mark some lines and easily find them later (there's even an explorer pane with the bookmarks by file). It's must have when navigating a big code base

- "Todo Tree", to list all the TODOs and FIXMEs from the codebase in a panel

Pretty subjective, but I'm a fan of code-folding, so I rely heavily on the Auto Fold extension.

https://marketplace.visualstudio.com/items?itemName=bobmagic...

Probably the best thread to ask this on:

Being paranoid, I want to install some extensions (and their updates, etc.), but I am afraid of originally malicious extensions, and of malicious-takeovers (as was very common, and still happens, for Chrome and Firefox extensions).

Developers and their machines are, in general, more lucrative targets for bad actors than your average Web person.

How do you protect your setup with minimal cost to usefulness and productivity?

Excel Viewer[1] and Rainbow CSV[2] are very useful for anyone regularly working with CSV files in Code.

[1]: https://marketplace.visualstudio.com/items?itemName=GrapeCit...

[2]: https://marketplace.visualstudio.com/items?itemName=mechatro...

(Note) self-promotion

I needed cells in Excel to be translated into a list that SQL would like. I copied rows from Excel into VSCode, and would run a series of regex commands to format it into a valid SQL list. I got tired of running this manually, and turned it into an extension.

https://marketplace.visualstudio.com/items?itemName=reZach.l...

The MSFT team themselves have some of the best extensions. The remote pack - containers, SSH, docker - is fantastic.

I find that the biggest aspect for development is keeping track of information (eg. documentation, tasks, playbooks, etc) Dendron (https://marketplace.visualstudio.com/items?itemName=dendron....) is a note taking tool for developers - its open source, built on plaintext markdown, and integrated with VSCode. You can use it to manage your own personal knowledge base and to document your code base.

Disclaimer: I'm the creator of Dendron. We recently did a Launch HN post where you can find more details on what we're building: https://news.ycombinator.com/item?id=29176158

Github's copilot

1. Starter Bundle https://marketplace.visualstudio.com/items?itemName=JasonAMa...

2. And occasionally skimming through https://marketplace.visualstudio.com/search?target=VSCode&ca...

I write markdown everyday. Tables are slow to format by hand in GFM. This extension lets you write your tables nearly at the speed of plaintext. Excellent extension

https://marketplace.visualstudio.com/items?itemName=RomanPes...

This is the set of VSCode plugins I install:

https://github.com/jwalton/environment/blob/master/vscode-ex...

If you're after some snippets, this is my modest collection:

https://github.com/jwalton/environment/tree/master/vscode/pr...

Mostly I add snippets like `rrrfn` to create a new react function component (it starts with `rrr` so it won't show up in suggestions unless I explicitly want it), or "jestfile" to scaffold out a test case.

If using CloudFormation: https://marketplace.visualstudio.com/items?itemName=kddejong...

Related: anyone figured out how we are supposed to have install an extension in only one workspace instead of installing it once and then do "disable in this workspace" in the other 6 workspaces?

1. Auto Rename Tag (for xml tag renaming)

2. Conventional Commits

3. Git Graph

4. IntelliJ IDEA Keybindings (as someone who uses both it's a blessing)

5. Path Intellisense

6. Peacock (changes color of vscode instance when it's in the background, usefull when multiple are open)

In theory, I prefer to keep extensions to a minimum to keep UX and performance light. In practice I am using 3 different extensions and a bunch of custom CSS to make vscode look like Xcode. It‘s all superfluous though.

I think "project specific" stuff is all I actually need and would recommend to someone else, including a language appropriate auto formatter. For me currently that‘s Prettier, ESLint and Apollo GraphQL.

SQLTools and SQLTools PostgreSQL Driver

You can use VSCode to edit your SQL queries, and run them without pasting into PGAdmin or whatever.

Here are ones I use: https://wiki.nikitavoloboev.xyz/text-editors/vs-code/vs-code...

For web dev I like: Error Lens, Version Lens, Tailwind CSS IntelliSense & Highlight Matching Tag

I think it's helpful to take a weekend to learn to write extensions, it's very helpful to be able to make your own little tools for your own workflow. However it's also easy to fall into the void of endless tweaking and no real code especially if you're on vim or emacs.

Indent rainbow for staying sane while editing YAML files: https://open-vsx.org/extension/oderwat/indent-rainbow

String manipulation, Random generator (supports strings and UUIDs), Remote Containers ( must have for Docker), Rainbow brackets, Settings Sync, Markdown Preview, Editorconfig Support, Intellij Keybindings?, A lot of themes!

Tabnine extension. Improves my productivity with auto code completion

If you have the godforsaken Touch Bar, I've found Nasc VSCode Touchbar extension helpful. Now I can finally use the Touch Bar for various text manipulation shortcuts.

If I could only have two VS Code plugins, they'd be Live Share (Microsoft) and Vim (vscodevim).

“Live Server” is great for launching a local web server when you’re editing web files

github copilot is something I don't think I could do without now that I've tried it... just don't use it exclusively, use the code suggestions sure, but be sure it does what you want it to do. Know your code!

Tomorrow and Tomorrow night color scheme

"ES7 React/Redux/GraphQL/React-Native snippets"

Vim

tabnine - ai in the same vein as GitHub copilot. Speeds coding up quite a lot

I find myself use "Live Server" extension alot.

Project Manager. For quickly switching between projects.

>> They may even be used at FAANGs

Why would this matter?

VIM. I don't know how people program without being able to quickly move the cursor around, quickly regex code, or any of the million of things VIM does.

I use these productive extensions

https://marketplace.visualstudio.com/items?itemName=Gruntfug...

https://marketplace.visualstudio.com/items?itemName=alefragn...

https://marketplace.visualstudio.com/items?itemName=EdgardMe...

https://marketplace.visualstudio.com/items?itemName=fabiospa...

https://marketplace.visualstudio.com/items?itemName=geeebe.d...

https://marketplace.visualstudio.com/items?itemName=letrieu....

https://marketplace.visualstudio.com/items?itemName=plrenaud...

https://marketplace.visualstudio.com/items?itemName=vincaslt...

https://marketplace.visualstudio.com/items?itemName=gazugafa...

https://marketplace.visualstudio.com/items?itemName=ms-vscod...

https://marketplace.visualstudio.com/items?itemName=yatki.vs...

https://marketplace.visualstudio.com/items?itemName=fabiospa...

https://marketplace.visualstudio.com/items?itemName=formulah...

https://marketplace.visualstudio.com/items?itemName=eamodio....

https://marketplace.visualstudio.com/items?itemName=mklouber...

https://marketplace.visualstudio.com/items?itemName=xyz.loca...

https://marketplace.visualstudio.com/items?itemName=kruemelk...

https://marketplace.visualstudio.com/items?itemName=Gruntfug...

Bookmarks

a.k.a. the reason of why I use IntelliJ, everything built in.