VS Code extensions for web development in 2022 (opens in new tab)

(creativedesignsguru.com)

56 pointsscottc4y ago29 comments

29 comments

27 comments · 12 top-level

wruza4y ago· 4 in thread

VSCode thread, a great opportunity to ask, how does one deal with seemingly one of the worst "(" ")" indentation rules in a history of editors? E.g.

  h = React.createElement
  h("div",
    h("label",
      h("input",
    )
  )

Reindents into:

  h = React.createElement
  h("div",
  h("label",
  h("input",
  )
  )

It only happens with (), but {} [] work fine. Couldn't find any extension, neither wrap my head around indentationRules.

SahAssar4y ago

I think eslint --fix does the right thing by default

wruza4y ago

Thanks, I'll look into that!

machiaweliczny4y ago

Prettier?

wruza4y ago

If you mean "install prettier, set it as a default formatter", then it doesn't. I tried all shallow methods, then all deep ones I was able to comprehend. Indentation rules are different from formatting, and default prettier settings mess it up completely into argument-per-line if it's a big hierarchy (which it usually is). Hyperscript readability highly depends on how you format it.

Fun part is, neovim plugin reindents it correctly with =.

1 more reply

scottcOP4y ago· 3 in thread

In addition to this list, for those doing node monorepos in 2022, the extensions that I think you must use are:

  - Github copilot - like autocomplete on steroids.
  - peacock - change the workspace color - helps reduce mental load when working on different projects.
  - tag autorename - this should be built into vscode, saves a bunch of keystrokes
  - snippets - this is a category of extension. Find whichever snippet lib is out there for your stack.

syradar4y ago

Tag Auto Rename is built in, enable it with: "editor.linkedEditing": true https://www.roboleary.net/vscode/2020/08/05/dont-need-extens...

caitlinface4y ago

> peacock - change the workspace color

I was looking for this exact thing the other day. Thanks for the tip!

adamredwoods4y ago

Although that plugin seems trivial, for me, when working with multiple code repos, it really does help to organize thoughts quickly. I get multiple interruptions daily and being able to quickly bounce between repos, using visual cues, helps alleviate context interruptions.

hn_throwaway_994y ago· 3 in thread

This is a great list, thanks for this. Many of these I use, but glad to see REST client, which I didn't know about. Have been looking for a replacement for Postman since they went off the "enterprise" deep end. I mean, I basically want a slightly better UI for curl, not 60 levels of "project management" features to make an HTTP call.

Jemaclus4y ago

If you want a Postman replacement, I recommend Insomnia. There's a free app! And it can import Postman collections, so you aren't totally starting from scratch.

https://insomnia.rest/

thunderbong4y ago

For REST calls, I find Thunder Client way better.

I find that I can almost replace Postman completely with this.

https://marketplace.visualstudio.com/items?itemName=rangav.v...

dotancohen4y ago

We're in a VS Code thread, but the Jetbrains REST client (Part of e.g. Webstorm) is absolutely terrific. You can easily cut and paste from requests or responses just as in a text editor - because that is what it is.

As a VIM user (IdeaVIM in the Jetbrains editors), this is even easier, because text editing (as opposed to writing) is where VIM shines.

deanc4y ago· 2 in thread

One of these at least is a native feature of vscode now (rainbow brackets) so I’d consider this post to be of low quality. If you ran even half of these last it’d really slow vscode down too.

cbovis4y ago

TIL.

For anyone that might be curious: https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-...

ewuhic4y ago

I do consider this post low quality too, but it's rainbow indent, not brackets, which seems rather neat.

SahAssar4y ago· 2 in thread

Why do people use both prettier and eslint when eslint has auto-formatting built in?

dmak4y ago

Prettier is prettier. Usually, they use it as an extension to eslint.

SahAssar4y ago

> Prettier is prettier

What do you mean? Are you saying that eslint cannot be configured to format the same way?

onion2k4y ago· 1 in thread

One of my most used VSCode extensions at the moment is "Fix JSON". It fixes problems in JSON by running the broken JSON through jsonic. If you ever need to take a JS object dump (from an error stack trace, or a Redux state dump, etc) and turn it in to well formatted JSON it's very useful.

toastal4y ago

Because of issues like this, I find it absurd people use out-of-the-box JSON for human readable/writeable configuration. Issues with straight quotation marks, commas, brackets, and other stuff, and to top it off, there's no types so you often get terrible feedback on the configuration and every application needs to do similar marshaling to deal with it.

krono4y ago

An increasing amount of extensions phone home parts of your code, many of which do not disclose it anywhere, some performing tasks so mundane you wouldn't ever have considered a remote server would be taking care of it.

Installing something like Copilot could have massive legal consequences if you're working under an NDA, with protected customer data, any proprietary code that isn't yours, etc. Something to keep in mind.

qwertox4y ago

VS Code is pretty cool, and when I use it -- I have it open right now --, I mostly enjoy it.

But I'm very concerned about the security of the extensions. They are so great, they are what makes VS Code the great tool that it is, but I fear that it will soon have the same problems npm has.

Are there any kind of protections in place which prevent an extension developer to sell his extension or he/she itself go rouge and siphon out the code being edited, or the entire project being worked on, or even install malware on the machine?

wruza4y ago

This list is shorter than I thought. Some of mine:

- Bookmarks - cycle through anywhere in a file or a project, or see/navigate a complete list

- TODO Highlight - highlight any regex (e.g. TODO.*, NOTE, DONE)

- Highlight - more enhanced highlighting (e.g. me highlighting full //---… lines with bg and border, like a very visible section)

- Markdown Preview Enhanced

- Subtle Match Brackets - much better pair highlighter (may be too colorful by default, just tune it accordingly)

- VsCode NDJson - file type for ndjson/jsonl files

- TabOut - tab your way out of auto-inserted brackets and quotes

dSebastien4y ago

I've created a set of VS Code extension packs a while ago to make installing those useful extensions easier: https://dsebastien.net/blog/2019-11-24-vs-code-extension-pac...

majkinetor4y ago

    - Filter lines
    - Align by RegEx
    - Excel to Markdown table
    - Gistpad
    - Markdown all in one
    - Markdown PDF
    - Project Manager
    - Sort
    - Spell Right
    - Thunderbolt client
    - Todo Tree

eating5554y ago

How about atom? I can share some:

  - atom-easy-jsdoc
  - atom-live-server
  - atom-typescript
  - atom-ide-deno
  - atom-ide-javascript

For full IDE-like experience, I recommend these as well:

  - linter
  - linter-ui-default
  - atom-ide-base
  - atom-ide-code-format 
  - atom-ide-datatip 
  - atom-ide-base
  - atom-ide-debugger-node
  - atom-ide-definitions
  - atom-ide-deno
  - atom-ide-hyperclick # Or hyperclick by facebook-atom
  - atom-ide-javascript
  - atom-ide-outline
  - atom-ide-ui # don't forget to turn off diagnose in setting. It conflict with linter

j / k navigate · click thread line to collapse

29 comments

27 comments · 12 top-level

wruza4y ago· 4 in thread

VSCode thread, a great opportunity to ask, how does one deal with seemingly one of the worst "(" ")" indentation rules in a history of editors? E.g.

  h = React.createElement
  h("div",
    h("label",
      h("input",
    )
  )

Reindents into:

  h = React.createElement
  h("div",
  h("label",
  h("input",
  )
  )

It only happens with (), but {} [] work fine. Couldn't find any extension, neither wrap my head around indentationRules.

SahAssar4y ago

I think eslint --fix does the right thing by default

wruza4y ago

Thanks, I'll look into that!

machiaweliczny4y ago

Prettier?

wruza4y ago

Fun part is, neovim plugin reindents it correctly with =.

1 more reply

scottcOP4y ago· 3 in thread

In addition to this list, for those doing node monorepos in 2022, the extensions that I think you must use are:

  - Github copilot - like autocomplete on steroids.
  - peacock - change the workspace color - helps reduce mental load when working on different projects.
  - tag autorename - this should be built into vscode, saves a bunch of keystrokes
  - snippets - this is a category of extension. Find whichever snippet lib is out there for your stack.

syradar4y ago

Tag Auto Rename is built in, enable it with: "editor.linkedEditing": true https://www.roboleary.net/vscode/2020/08/05/dont-need-extens...

caitlinface4y ago

> peacock - change the workspace color

I was looking for this exact thing the other day. Thanks for the tip!

adamredwoods4y ago

hn_throwaway_994y ago· 3 in thread

Jemaclus4y ago

If you want a Postman replacement, I recommend Insomnia. There's a free app! And it can import Postman collections, so you aren't totally starting from scratch.

https://insomnia.rest/

thunderbong4y ago

For REST calls, I find Thunder Client way better.

I find that I can almost replace Postman completely with this.

https://marketplace.visualstudio.com/items?itemName=rangav.v...

dotancohen4y ago

As a VIM user (IdeaVIM in the Jetbrains editors), this is even easier, because text editing (as opposed to writing) is where VIM shines.

deanc4y ago· 2 in thread

One of these at least is a native feature of vscode now (rainbow brackets) so I’d consider this post to be of low quality. If you ran even half of these last it’d really slow vscode down too.

cbovis4y ago

TIL.

For anyone that might be curious: https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-...

ewuhic4y ago

I do consider this post low quality too, but it's rainbow indent, not brackets, which seems rather neat.

SahAssar4y ago· 2 in thread

Why do people use both prettier and eslint when eslint has auto-formatting built in?

dmak4y ago

Prettier is prettier. Usually, they use it as an extension to eslint.

SahAssar4y ago

> Prettier is prettier

What do you mean? Are you saying that eslint cannot be configured to format the same way?

onion2k4y ago· 1 in thread

toastal4y ago

krono4y ago

qwertox4y ago

VS Code is pretty cool, and when I use it -- I have it open right now --, I mostly enjoy it.

But I'm very concerned about the security of the extensions. They are so great, they are what makes VS Code the great tool that it is, but I fear that it will soon have the same problems npm has.

wruza4y ago

This list is shorter than I thought. Some of mine:

- Bookmarks - cycle through anywhere in a file or a project, or see/navigate a complete list

- TODO Highlight - highlight any regex (e.g. TODO.*, NOTE, DONE)

- Highlight - more enhanced highlighting (e.g. me highlighting full //---… lines with bg and border, like a very visible section)

- Markdown Preview Enhanced

- Subtle Match Brackets - much better pair highlighter (may be too colorful by default, just tune it accordingly)

- VsCode NDJson - file type for ndjson/jsonl files

- TabOut - tab your way out of auto-inserted brackets and quotes

dSebastien4y ago

I've created a set of VS Code extension packs a while ago to make installing those useful extensions easier: https://dsebastien.net/blog/2019-11-24-vs-code-extension-pac...

majkinetor4y ago

    - Filter lines
    - Align by RegEx
    - Excel to Markdown table
    - Gistpad
    - Markdown all in one
    - Markdown PDF
    - Project Manager
    - Sort
    - Spell Right
    - Thunderbolt client
    - Todo Tree

eating5554y ago

How about atom? I can share some:

  - atom-easy-jsdoc
  - atom-live-server
  - atom-typescript
  - atom-ide-deno
  - atom-ide-javascript

For full IDE-like experience, I recommend these as well:

  - linter
  - linter-ui-default
  - atom-ide-base
  - atom-ide-code-format 
  - atom-ide-datatip 
  - atom-ide-base
  - atom-ide-debugger-node
  - atom-ide-definitions
  - atom-ide-deno
  - atom-ide-hyperclick # Or hyperclick by facebook-atom
  - atom-ide-javascript
  - atom-ide-outline
  - atom-ide-ui # don't forget to turn off diagnose in setting. It conflict with linter

j / k navigate · click thread line to collapse