DEV Community

loading...

Discussion on: Help Setting Up VSCode Formatting

Collapse
terabytetiger profile image
Tyler V. (he/him)

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:

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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 😀

Collapse
twigman08 profile image
Chad Smith Author

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

Collapse
terabytetiger profile image
Tyler V. (he/him)

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!

Collapse
twigman08 profile image
Chad Smith Author

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.

Collapse
mdarrik profile image
Darrik Moberg

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.

Thread Thread
twigman08 profile image
Chad Smith Author

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.