I'm not 100% sure when/why I added these, but it might help with the issue.
I will also note that I have this in my .eslintrc.js file (only the vue plugins you listed): extends: ["plugin:vue/essential", "@vue/prettier"],
and this:
parserOptions: {
parser: "babel-eslint"
}
I very much poked at these files until I got them where I liked them, and am by no means an expert on these set ups, but maybe some of these differences will either help or set you on the path to victory 😀
I went ahead and installed the prettier extension for VSCode so I could set the default formatters to what you listed to see what happens. Though pretty much what that ended up doing was causing more conflicts.
Now my typescript files are being formatted (not a very good format that I like I might add), but my vue files get formatted completely different now, and you can tell that it has two formatters fighting with each other. When I save a .vue file now, it attempts to format the way it was, but then it goes and reformats a completely different way which ends up causing linting issues. So now it seems to be fully conflicting with the linting rules that are setup.
So I think I am sadly back what I am trying to solve and understand better: What is the way to setup these formatters so it listens to the project settings, and to keep from from conflicting? Every extension, plus VSCode, seems to have their own formatting and it's really confusing to know which setting you should be using properly. Sadly this seems to be the issue I fight with javascript development all too often and I haven't found the right article or tutorial that really describes everything that works. I think that is why I am really just trying to enlist the help from community members to hopefully figure this out, and maybe even then I could just write the article that someone could always use.
When I save a .vue file now, it attempts to format the way it was, but then it goes and reformats a completely different way which ends up causing linting issues. So now it seems to be fully conflicting with the linting rules that are setup.
I wish I could be more helpful - because I definitely remember having this exact issue, but I sadly don't remember how I corrected it 😢
Pulling together an article to walk through setting this up would be very helpful! Wish I could help more!
What are your default formatter settings for vetur? I'm wondering if it's vetur defaults fighting with your setup, and that's why it worked until you changed your defaults above.
The Vetur default formatter settings are set to everything being prettier, except for Sass, and Stylus, which are set to sass-formatter and stylys-formatter respectively.
Then I also have vetur.format.enable set to true.
What now has me confused is that I did try the formatter settings mentioned earlier, saw it was causing conflicts so I uninstalled the extensions and removed those settings, and it is still causing conflicts. So I ended up getting really confused as to what could be happening now even after changing the settings back to what I had.
I'm a little late to the convo but just came across this and it popped into my head... what is the value of editor.defaultFormatter in your VS Code settings.json by itself, assuming it is defined?
Because according to the docs, whatever formatter is thus defined will override all other directives in the event of a conflict, assuming no language specific constraints.
Editor: Default Formatter
Defines a default formatter which takes precedence over all other formatter settings. Must be the identifier of an extension contributing a formatter.
I may be wrong, but I've always understood that to mean if defined, that configuration will have the last word no matter what.
Well this is a really good thing to be aware of - mine is set to none (and working).
I'll also note that recently I had an issue where when copying my prettierrc and eslintrc.js files from one VS Code window to a new project's window required a restart (Code & Yarn) before it picked up with changes properly.
I definitely relate to this - the biggest problem I had with Vue was getting it to play nicely with Prettier/ESLint 😅
Something I have in my settings.json file is:
I'm not 100% sure when/why I added these, but it might help with the issue.
I will also note that I have this in my .eslintrc.js file (only the vue plugins you listed):
extends: ["plugin:vue/essential", "@vue/prettier"],and this:
I very much poked at these files until I got them where I liked them, and am by no means an expert on these set ups, but maybe some of these differences will either help or set you on the path to victory 😀
Thanks for trying to help as much as you could!
I went ahead and installed the prettier extension for VSCode so I could set the default formatters to what you listed to see what happens. Though pretty much what that ended up doing was causing more conflicts.
Now my typescript files are being formatted (not a very good format that I like I might add), but my vue files get formatted completely different now, and you can tell that it has two formatters fighting with each other. When I save a
.vuefile now, it attempts to format the way it was, but then it goes and reformats a completely different way which ends up causing linting issues. So now it seems to be fully conflicting with the linting rules that are setup.So I think I am sadly back what I am trying to solve and understand better: What is the way to setup these formatters so it listens to the project settings, and to keep from from conflicting? Every extension, plus VSCode, seems to have their own formatting and it's really confusing to know which setting you should be using properly. Sadly this seems to be the issue I fight with javascript development all too often and I haven't found the right article or tutorial that really describes everything that works. I think that is why I am really just trying to enlist the help from community members to hopefully figure this out, and maybe even then I could just write the article that someone could always use.
I wish I could be more helpful - because I definitely remember having this exact issue, but I sadly don't remember how I corrected it 😢
Pulling together an article to walk through setting this up would be very helpful! Wish I could help more!
If it is needed I will even gladly jump on a screen share with someone so it can even be walked through for the correct settings.
What are your default formatter settings for vetur? I'm wondering if it's vetur defaults fighting with your setup, and that's why it worked until you changed your defaults above.
The Vetur default formatter settings are set to everything being prettier, except for Sass, and Stylus, which are set to
sass-formatterandstylys-formatterrespectively.Then I also have
vetur.format.enableset totrue.What now has me confused is that I did try the formatter settings mentioned earlier, saw it was causing conflicts so I uninstalled the extensions and removed those settings, and it is still causing conflicts. So I ended up getting really confused as to what could be happening now even after changing the settings back to what I had.
I'm a little late to the convo but just came across this and it popped into my head... what is the value of
editor.defaultFormatterin your VS Codesettings.jsonby itself, assuming it is defined?Because according to the docs, whatever formatter is thus defined will override all other directives in the event of a conflict, assuming no language specific constraints.
I may be wrong, but I've always understood that to mean if defined, that configuration will have the last word no matter what.
Well this is a really good thing to be aware of - mine is set to
none(and working).I'll also note that recently I had an issue where when copying my prettierrc and eslintrc.js files from one VS Code window to a new project's window required a restart (Code & Yarn) before it picked up with changes properly.
Well that's good at least you got it working. I've had similar issues in the past, especially with mono-repos and also trying to integrate Yarn v2/v3.