Formatting in Vue files is broken about prettier-plugin-organize-imports HOT 18 CLOSED

I've got a working solution now, just need to finish updating the readme and clean it up a little. Will publish later today.

Basically what I had to do was adding a vue parser preprocess hook, which manually parses the script block out of the SFC (using aforementioned packages), then run organizeImports only on the script part, and put the script back into the whole .vue file. Then skip if options.parentParser === 'vue' so that the script doesn't get preprocessed again (which is where the breaking was happening).

from prettier-plugin-organize-imports.

I'll have a look today, was away over the weekend.

from prettier-plugin-organize-imports.

Just got an update notification for 2.2.0 so I decided to test out the upgrade from 2.0.0 -> 2.2.0. I am getting the same behavior, comments are getting all sorts of messed up, leaving plaintext in the files which then fails to compile:

error: Parsing error: ';' expected at src/components/cards/controltable/ControlRowDetails.vue:67:8:
  65 | import {context} from 'inspecjs';
  66 | import _ from 'lodash';
> 67 | DO: add line numbers
     |        ^
  68 | imp
  69 | import 'prismjs';
  70 | import 'prismjs/components/prism-makefile.js';

for example on

https://github.com/mitre/heimdall2/blob/c8c9305700484a9cff4f2b5a738dd7f90076d197/apps/frontend/src/components/cards/controltable/ControlRowDetails.vue#L63-L78

from prettier-plugin-organize-imports.

Sorry, I didn't have much time for this lately... I've done some investigation now. Prettier invokes the vue parser for the whole .vue SFC file, and then invokes the typescript parser only for the script contents, and has parentParser: 'vue' in the options.

One solution I've experimented with would be to use vue-template-compiler and @vue/component-compiler-utils to manually parse the typescript part out of the whole .vue file, then preprocess it. However Prettier already does that anyway, so that shouldn't be necessary.

I've looked into my preprocessing step and it returns the correctly organized file and leaves newlines and comments intact. This leaves me to suspect that Prettier's plugin API has a bug. My suspicion is that Prettier generates the AST before it runs the preprocess steps of plugins in the "sub-parser". I'll raise a ticket in the Prettier repo.

from prettier-plugin-organize-imports.

Prettier gives error with all type of files... with this change (tested with json, js, ts and vue), nothing work.

from prettier-plugin-organize-imports.

2.3.1 is out which should have the missing files, and 2.3.0 has been deprecated.

@Shinigami92 regarding your question about vue-template-compiler: I'm not sure what exactly the differences are between Vue 2.x and 3.x, but from reading the breaking changes it doesn't look like anything changed about SFCs specifically, so I assume that the package can parse Vue SFCs of both versions? Let me know if not.

I saw @vue/compiler-sfc before but wasn't aware that it also has a parse function. I'll try whether that works as well, and if so, I guess I could make it so that it tries either of the two.

from prettier-plugin-organize-imports.

It's working 🎉

from prettier-plugin-organize-imports.

I cannot add TODO comments or documentation in my Vue files with this plugin 😖

from prettier-plugin-organize-imports.

Yeah you can see the changelog in the releases, there was only one change to improve performance. I've got some local changes to work on this but haven't found much time and while I could probably find a workaround, I'm trying to find the proper solution regarding the language service host because otherwise it'll just be a matter of time until it breaks again.

I wonder whether I need to conditionally import some parser from vue and then only process the typescript part of the file with the language service.

from prettier-plugin-organize-imports.

@simonhaenisch Have you made any progress yet?

from prettier-plugin-organize-imports.

Let me know the issue number, so I can subscribe to it 🙂

from prettier-plugin-organize-imports.

Will you provide a beta release or could you push your changes to GitHub so I can manually use it?

from prettier-plugin-organize-imports.

Just released 2.3.0 with the fix. Sorry for the delay, wasn't on my computer over the weekend.

from prettier-plugin-organize-imports.

Please see the updated readme about two required packages for Vue support. You need to ensure that they are present; either check with npm ls whether they are already a dependency of another package, or install them manually if not.

from prettier-plugin-organize-imports.

Okay, just started to test it and just to let you know what I see if I not install the 2 deps

 ~/OpenSource/vizscript   main ±  yarn format                                    
yarn run v1.22.10
$ prettier --write .
node:internal/modules/cjs/loader:943
  throw err;
  ^

Error: Cannot find module './lib/organize'
Require stack:
- /Users/christopher/OpenSource/vizscript/node_modules/prettier-plugin-organize-imports/index.js
- /Users/christopher/OpenSource/vizscript/node_modules/prettier/index.js
- /Users/christopher/OpenSource/vizscript/node_modules/prettier/bin-prettier.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:940:15)
    at Function.Module._load (node:internal/modules/cjs/loader:773:27)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/Users/christopher/OpenSource/vizscript/node_modules/prettier-plugin-organize-imports/index.js:6:22)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Function.Module._load (node:internal/modules/cjs/loader:828:14)
    at Module.require (node:internal/modules/cjs/loader:1012:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/christopher/OpenSource/vizscript/node_modules/prettier-plugin-organize-imports/index.js',
    '/Users/christopher/OpenSource/vizscript/node_modules/prettier/index.js',
    '/Users/christopher/OpenSource/vizscript/node_modules/prettier/bin-prettier.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Maybe you can improve the stacktrace message somehow and write a better informative message 🤔

... But vue-template-compiler is for Vue 2.x, and I have a Vue 3.x project

I also have @vue/compiler-sfc (3.2.2) installed if this is somehow needed.

... After installing both deps I still get the error and it says Error: Cannot find module './lib/organize'
I think you build is not packaging correctly 🤔

from prettier-plugin-organize-imports.

Thanks for letting me know. I forgot to add the lib folder to the files list in package.json 🙈 Will publish a fix now.

from prettier-plugin-organize-imports.

Will test it tomorrow

As far as I know Vue 3.x has v-for and v-if swapped.
But that should not affect your plugin 🤔
but if the Vue 3.x version works you should use that, cause it's longer supported

from prettier-plugin-organize-imports.

Ok I got it working with @vue/compiler-sfc as well, just published 2.3.2. It tries to use @vue/compiler-sfc first if that package is available, then tries the other approach with the two packages. If neither of the packages is available or something else goes wrong (runtime exception), the plugin will just silently skip to preprocess the file. So if nothing happens and you want to see logs, you can try export DEBUG=true before running prettier, and hopefully it won't swallow the logs.

from prettier-plugin-organize-imports.