Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

VS Code extensions for web development in 2022

creativedesignsguru.com

Post reply on HN
Print view View original

21–30 of 30 posts

Re: VS Code extensions for web development in 2022

#23

Post by SahAssar »

dmak wrote: post #22
SahAssar wrote: post #21

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

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

> Prettier is prettier

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

Re: VS Code extensions for web development in 2022

#24

Post by wruza »

machiaweliczny wrote: post #18
wruza wrote: post #16

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.

Prettier?

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

Re: VS Code extensions for web development in 2022

#25

Post by wruza »

SahAssar wrote: post #20
wruza wrote: post #16

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.

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

Thanks, I'll look into that!

Re: VS Code extensions for web development in 2022

#26

Post by eating555 »

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

Re: VS Code extensions for web development in 2022

#27

Post by toastal »

onion2k wrote: post #8

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.

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.

Re: VS Code extensions for web development in 2022

#28

Post by toastal »

wruza wrote: post #24
machiaweliczny wrote: post #18

Earlier quoted context omitted.

Prettier?

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 reinden…

I've not heard Hyperscript in a while. While I detest JSX, with Hyperscript's bad ergonomics and indentation issues you have, why use JavaScript? There's a plethora of better options that compile to the JS target if you want markup as function that improves the ergonomics and likely a better experience. Heck even CoffeeScript does a better job at this.

Re: VS Code extensions for web development in 2022

#29

Post by wruza »

toastal wrote: post #28
wruza wrote: post #24

Earlier quoted context omitted.

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 reinden…

I've not heard Hyperscript in a while. While I detest JSX, with Hyperscript's bad ergonomics and indentation issues you have, why use JavaScript? There's a plethora of better options that compile to the JS target if you want markup as function that improves the ergonomics and likely a better experience. Heck even CoffeeScript does a better job at this.

It doesn't feel right to me to switch languages because of a wrong editor behavior. Also, I'm already using typescript. Hyperscript is just an example, e.g. long lists also have this issue:

  foo(bar, baz, ........
  quux)
I'd agree if you told that it probably begs for a refactoring into named arguments, but it isn't an excuse to mess with indentation. Virtually every other editor out there would indent quux line, if it at all has indentation concept built in. Even neovim vscode plugin "knows" that.
Post reply on HN