prettier-eslint support

[seldenr]

What would the process be to add support for prettier-eslint? https://github.com/prettier/prettier-eslint This is very helpful in other versions of prettier plugins: https://atom.io/packages/prettier-atom Idk how much work this would be, happy to help! let me know

[alexanderweiss]

This requires quite a change because right now prettier runs within Nova's extension sandbox. I'm looking at changing that because it's also helpful with plugins. Once that's changed this should become a lot easier.

[seldenr]

@alexanderweiss hmm, would prettier-eslint not be able to run the same way? would the issue be reading the eslint config file from within the sandbox? this would be huge, let me know if there's some way I can help

[alexanderweiss]

The main problem is that within the Nova sandbox you can’t use normal imports/requires. So for example require('prettier') doesn’t work, you need to do require('./node_modules/prettier/prettier.js'). That breaks most packages. So the extension will need to have actual Prettier run in a separate node process that’s not limited in this way for plugins and such to work.

[blakewatson]

I tried ticking on the separate process preference, but Prettier still doesn’t seem to work. The project I’m working on has a convoluted setup I don’t fully understand though so I can’t make an educated guess as to why it’s not working in Nova. Looks like it's using eslint, eslint-config-prettier and eslint-plugin-prettier, and eslint-plugin-vue.

[alexanderweiss]

What kind of file are you trying to format? Is it formatting no files at all, or just not specific types? The new 'separate process' option does not (yet) use prettier-eslint. It does support Prettier plugins, so these: https://prettier.io/docs/en/plugins.html

[jefflewis]

Is there any update here of what would need to be done? Having this and the Nova eslint both fix on save moves my cursor to the bottom of the page and causes re-rendering and seems much slower than each one by itself.

[alexanderweiss]

@jefflewis I'll look into this very soon. I think it's mostly about config resolution (considering it can come from a few places). You might also want to create an issue about the cursor for the ESlint extension (by Cameron Little, right?). I tried it and it didn't seem to properly retain cursor positions. Combining Prettier + ESLint fix in one extension would still offer a speed improvement though, so I'm going to get this going.

[alexanderweiss]

Actually, @jefflewis & @seldenr, I've been looking at prettier-eslint and I'm don't fully understand why you'd want this. You'd still need the have the ESLint plugin running as well to get errors/warnings about anything it can't automatically fix. So why not just have that extension also apply any fixes?

[jefflewis]

For me, it's because prettier is my go to formatter, so I want to have it do the formatting. Some projects I have set up for eslint to be the formatter, but always via prettier.

Sometimes there are interferences between the two, which the eslint prettier plugin resolves.

See: https://prettier.io/docs/en/integrating-with-linters.html#disable-formatting-rules

[alexanderweiss]

So should prettier-eslint infer all Prettier configuration from the ESLint configuration, with the extension preferences as fallback? Or should the extension/.prettierc preferences always be used?

[seldenr]

Yeah agreed @jefflewis - it is very useful for certain projects which use a mesh of both styles. prettier-eslint should infer from the project, unless it doesn't have a config then fall back to the extension preferences. Would that work? Thanks @alexanderweiss!

[jefflewis]

Agreed! I think a common case for this is to have both eslint and prettier RC files. Neither handles the exact same set of formatting rules.

I hope that helps!

[alexanderweiss]

It's taken a really long time 😬, but I just released v2.3.0, which should work with prettier-eslint. If you use the new Prettier module setting and point it to a prettier-eslint module folder it should automatically figure out it's prettier-eslint and change its behaviour. You can set this in your project settings, and you can set a default in the extension settings. Let me know how it works for you! I don't normally use prettier-eslint so I'm not 100% sure this works as you'd like.