Ask HN: What extensions/packs of VS Code are must for web/developers to install? | Hacker News Reader

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

119 pointsphilonoist116 comments

They may increase productivity tremendously

They may only be common among experienced developers

They may be used at innovative startups

They may even be used at FAANGs

They need not cater to web developers only

They may help amazingly to learn coding

They may useful for a new programmer

The criteria is anything that has helped you from all diverse sectors of the industry.

View on HN

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!

I just tried enabling that this week, but I found that I often press Ctrl-S out of habit, even when I have syntactically invalid code and then the autoformatter messes things up royally and I get lost. For now, I just memorized the shortcut for autoformatting and I'm running it manually when I feel the need to "tidy up" the code.

I’m curious what language you’re working on and what formatter it uses? In my experience many formatters will not run if the AST is invalid.

I'm using Python and PyCharm. It happily underlines the invalid syntax and then reformats things more or less randomly.

Mine won't do any auto-formatting when the syntax is invalid, so when I hit CMD + S and it _doesn't_ format it's a cue to start looking for errors.

The only issue I have with this is that I wish it would chirp more loudly when there's a syntax error.

Every so often I don't notice red underline and I begin wondering why my autoformatter and autocomplete aren't working anymore.

Maybe a red border or something any time a file's syntax is invalid.

I’m a big fan of Error Lens.

There is a package called „black“ (pip install black) that formats code according to PEP8 (most of the time). You might take a look if you’re interested. I’m using it occasionally and it didn’t do anything royally stupid until now. If the code isn’t syntactically correct it won’t run.

Prettier has a VSCode extension to autoformat on save.

https://prettier.io/docs/en/install.html

Yes, very true. For TypeScript I do use Prettier so yeah, there _is_ an extension involved. For others, this is basically what it takes (plus making the conscious decision to enforce formatting on your repo, which I think you should!):

Install the plugin and add this config:

  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }

What is the benefit of using prettier as opposed to the built in typescript formatter?

I believe it is something to do with style formatting than the syntax formatting. I use VSCodium for HTML/CSS and I use Prettier to "style" it in a particular way. Some will style it into a long code and other will style it in chucks.

Are you using the default built in beautifier in vscode? Does it allow you to set your preferred styles?

Python: Black

TypeScript, JavaScript, JSON: Prettier

HTML: Built-in

Rust: rust-analyzer + whatever the formatter is built in to Rust's toolchain.

XML: XML Tools

They all operate using the same API, I think, so setting up `formatOnSave: true` is all I have to do for most of them.

Does this work well for SQL?

Are you asking about pure SQL files (with .sql extension) or SQL embedded in expressions in other file types? The answer is a simple yes for the former with the right extension/configuration. Searching for adpyke.vscode-sql-formatter should give you a good one. Unfortunately, in the latter (and for me, more common) case, I can't find a good solution.

I like to reformat frequently with Alt+Shift+F, but only save when my code will actually run, so as not to break the running program.

I agree 100%. So much so, that I think every professional language should have it. Every tab, newline and space one has to do manually is lost effort.

It still amazes me that C# doesn't have good opinionated formatter. It has lot of non-opinionated formatters, but I found one: Csharpier [1], check it out. It's slow, but at least the author is trying.

[1]: https://github.com/belav/csharpier

I am curious what you mean by slow.

CSharpier started as a prettier plugin, and it was definitely slow then. ~30 minutes for a project with around 10k files if I remember correctly and the formatting was just barely implemented. At this point it is ~40s without --fast, or ~27s with it. CSharpier is stable enough that I should make --fast the default option.

Individual file formatting is a bit slow which is the overhead of starting up a new .Net console app every time. NativeAOT is a potential solution, but probably not until .net7. Building plugins that keep csharpier running in the background and piping files to it is the other option. That is one of the next things on my list.

I just hooked up auto save I was hitting ctrl-s obsessively. I put it at 1000ms but I never see the dirty flag anymore on a tab.

How do you make this work with a project you don't control?

I'm not doing this because I enjoy hand formatting and I find my formatting magnitudes prettier than prettier, only run prettier before commit so I don't have to witness them make my code less readable

Your boss must love that you’re essentially doing work just to throw it away.

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...

I came here to add Prettier as well.

I think this is probably the only piece of software that I can think of that we pretty much lived our entire lives without, then almost immediately after it was launched not a single person who knew about it could ever fathom not having it.

It even changed my personal coding style. Things I chose to do before now look ugly to me.

I stopped caring about any coding style, as long as we agreed on a prettier configuration.

Not caring about this saves me so much mental capacity, I would recommend it

I couldn't disagree more. The whole debacle around break before else caused me to avoid using them for any projects going forward: https://github.com/prettier/prettier/issues/840

For JS formatting, I either use Rome or ESLint.

I didn’t read all of the comments, but it seems to me that the interaction at the beginning of the thread is pretty close to how polite, respectful online conversations should be carried out. I don’t use Prettier, but this is my own choice, and if someone else likes them I certainly don’t think this thread is cause for denigrating the team or their work. Am I missing something?

- The Prettier team has decided that they will not be adding new options. Since they explicitly bill themselves as an opinionated formatter, that seems reasonable to me.

- There is a fork of Prettier that supports breakBeforeElse, and this fork was suggested by a member of the Prettier team as a way for the requester to get this option

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.

+1 for gitlens. I often use jetbrains for development work but fire up vs code with gitlens for tricky merge conflicts or a deep dive with blame.

I've found JetBrains IDEs have pretty good Git tooling, and can show you history for selection and viewing complex commit histories. What do you use in GitLens that you find better than IDEA? I'm curious if it is worth making the jump.

I'm not sure why but a lot of people using idea to write the actual code then switch to vscode to resolve a merge conflict or some other git mess that needs cleaning..

I think it's more about comfort levels. So if you're already comfortable doing this in IDEA, you don't stand to gain anything. Also, for Jvm languages, idea is still a better choice than vscode

How does gitlens help with merge conflicts?

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.

Awesome, thanks for the suggestion!

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

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

Yep, although I mostly do Remote WSL these days.

I'm considering contains for frontend development (Vue) at work. What are the biggest benefits in your experience?

1. Team onboarding is almost zero effort. I spent upwards of a week onboarding in the past (install this library, install this server, install is broken, try again, etc.). That becomes clone, click, and forget with dev-containers.

2. If you CI you dev-container and publish to a private registry, only one computer is spending the time installing and setting up dependencies. Everyone else simply bases their local image off of that one (and saving productive working time).

3. If you mess up the dev environment with some failed experiment, simply recreate the container and carry on.

4. The dockerfile is a form of documentation: what is needed for this thing to run.

5. If you use Github, you can run your environment in a browser if you are in a pinch. I've only done this once, but it was hella useful.

probably not running into issues with node modules symlink like you would with plain wsl

Yea when you have tons of python packages to install, VS code containers become real nice. I was new to VS code containers and had a issue trying to debug python inside of it. I wrote an article for anyone who might be having the same issue. https://python.plainenglish.io/python-debugging-within-visua...

Remote SSH

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

That one literally changed my life. It probably doubled my productivity without exaggerating and maybe more.

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...

Find myself doing that often too (not specifically from Excel, but generally formatting lines to SQL list with regex). Will definitely give your extension a try!

Thanks for trying it out!

Also try NimbleText (windows) which is really useful for translating csv data into sql or whatever other format you require

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

Dendron looks awesome - thanks for linking to it!

I really prefer Markdown, but have been using OneNote simply because of the mobile accessibility. Do you have a mobile app that you like using with Markdown? I’m on iOS, if that matters.

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...

Another good Markdown extension (e.g. live preview):

https://marketplace.visualstudio.com/items?itemName=yzhang.m...

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)

Would you care to share reasons of using both IDEA and VS Code?

I had a similar setup at a previous job. Basically, the journey went like:

1. I already used VSCode as my daily driver. 2. Backend team all used IDEA for their Java codebase/had some workflows designed with it in mind. 3. I familiarized myself with IDEA for working on the backend, but used VSCode for the rest of the codebase.

Not OP, but I'm doing the same thing. I spend 95% of my time in IDEA, though. VSC is for Ansible playbooks (because it has a relatively decent extension), and when I need a quick and dirty fix in some other projects (so you don't have to wait five times as long for IDEA to warm up).

It’s pretty common to have two different IDEs open on the same project. For example QT developers will often have the QT creator as well as VS code open. Developers on Apple‘s platforms almost always keep Xcode open, while they may also have another IDE open alongside it that allows them to work in the project with greater productivity, but still build and profile and do other things that are only available in Xcode.

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.

I’m just curious, why are you going through that effort just to make it look like a different IDE? What are you gaining exactly from that?

Presumably they prefer the look of one IDE and the features of another?

For no good reason whatsoever.

Because I am the kind of nerd that has on old copy of the Apple Human Interface Guidelines on their bookshelf and VS Code is leagues above any well designed editor for TS.

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

Have you tried the built-in `"editor.guides.bracketPairs": true`? It will colour the indent guides.

For those not following the release notes `"editor.bracketPairColorization.enabled": true` is a new option in VSCode (since September's release) after the team saw how common extensions like Indent Rainbow and Bracket Pair Colorizer 2 were and how many complaints were out there about how slow they were, so they decided to add it as a built in feature that can reuse the same processes as the core indent guides. Also a lot of interesting work went into optimizing the algorithms at work: https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-...

An interesting case of the team watching the extensions ecosystem for ideas to make the core product better.

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).

>(vscodevim)

Is it good enough without any quirks or are there several VIM extensions?

It's not perfect, but it's mostly there. The biggest gaps I notice are related to visual things that VS Code basically replaces (e.g. nerdtree) and global functions.

It's a huge improvement compared to using VS Code without it.

+1 for Live Share. It can be a source of frustration on initial connection but overall it has provided a huge boost to team collaboration during remote work. It is now a staple on my team for pair/mob programming.

“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

In my experience Tabnine isn’t even near to Copilot. Tabnine is glorified autocomplete, where as copilot somehow takes the entire file into context including comments and I could many times just hit tab several times to almost build what I need. I had very good results in Java, Scala and python.

I find myself use "Live Server" extension alot.

It's no longer maintained, Five Server replaced it

https://marketplace.visualstudio.com/items?itemName=yandeu.f...

Project Manager. For quickly switching between projects.

>> They may even be used at FAANGs

Why would this matter?

Also isn't it MAANGs now? Or possibly MAANA, but in that case I'd rather rewrite it as MAAAN...

MAGMA <3

NAGMA (Bollywood edition)

I second this.

Shouldn't Microsoft be included these days as well?

Working for the MMAAAN...

...you gotta use these fancy VS Code extensions

Shouldn't Tesla be included? Largest companies by market cap: Apple, Microsoft, Alphabet, Amazon, Tesla, Meta = TAMAMA

But Nvidia and Netflix too, right?

TA MMAANN?

Working at FAANGs is not cool anymore. Go and build your thing at web3. Stakeholder capitalism is the new cool kid in town.

licensing I presume

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.

You mean do regex-based searches on the code? I couldn't think of a bigger mental overhead than that.

So do you also visit threads about Tesla to promote Ford?

VSCode has a VIM plugin. This would be more like saying you use CarPlay in your Tesla instead of the built in Tesla software for navigating the radio.

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.

Their remote development is still lacking compared to VS Code however I've found.

What kind of work do you do? I use have about a dozen plugins, and I hate installing them, so that's only things that are absolutely necessary (like prettier).

Is there a way to script IntelliJ?

I find myself in a job with 30ish coupled microservices, because they are coupled flipping between them is not unusual... But trying to set up a project that has all of them as parallel sub-projects, (a) gives me no way to impose a folder hierarchy and (b) it seems like I have to set up Cloud Code and each individual subproject separately.

So I am using VS Code for java dev despite its shortcomings (in particular in the same setup it does not work well with a monorepo hosting those other repos as git submodules, so you want to just load up a plain folder with the microservices in subfolders, but then the Java plugins do not recognize that you have loaded a Java project...) and like it's ok but I did prefer the testing of IntelliJ and some other features... But is there anyway to take these things that take 5 minutes or less to configure on a single microservice/subproject, and apply them to everything with 10 minutes of effort, rather than hours of doing it by hand?

Well, database result exporters (into CSV/TSV/whatever) and JPA entity generators are built as IDE scripts, so there is at least some level of support. I could never find any decent documentation though.

Look into

Alt+1 → Scratches and consoles → Extensions

And here's a random "blog post" with some additional examples:

https://gist.github.com/gregsh/b7ef2e4ebbc4c4c11ee9

> Is there a way to script IntelliJ?

There is in NetBeans so I guess there is one for IntelliJ as well.

That's not true though. IntelliJ has its own plugin system for this reason.

Reply on news.ycombinator.com