Help Setting Up VSCode Formatting

So I feel like I should not be having to ask for help on this, but I feel like I have grown very annoyed with formatters fighting over each other that it has actually gotten old to write TypeScript/JavaScript code in VSCode with Vue (or really any other frontend framework).

Issue

So here is my issue: Currently I have my .vue files formatting correctly and it is giving me good eslint warnings and errors. Though now the issue is in my .ts or .js files. These files never want to format properly now and I can't get it to format on save. Then if I do end up getting it to format on save, it seems it will fight against the .vue files.

Example: Currently my .vue files format properly and use my preferred 2 spaces for tabbing. While my .ts or .js files will just go straight to using the 4 spaces for tabs, and won't even correct itself no matter what I do.

What I'm looking for

What I'm looking for a great environment and project setup that will do the following:

• Listen to the projects eslint settings
• Listen to the projects prettier settings for formatting
• Be able to auto format on save all my files and not have them conflict with each other
• Best way to update and modify settings

Current Environment/Project Setup

Currently the environment/project setup is the following:

• VSCode
• Vetur Extension
• ESLint Extension
• VueJS
• eslint and prettier on project

For Vetur I have all my formatters turned on. I also have the format on save turned on. For the Vue project I am using the following packages/rules for eslint

extends: ["prettier", "prettier/standard", "plugin:@typescript-eslint/recommended", "plugin:vue/recommended"],
  plugins: ["vue", "prettier"],
  parser: "vue-eslint-parser",

And for prettier, I have the following setup:

{
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "ignore",
  "tabWidth": 2
}

I will take any suggestions on best practices to take. I understand a lot of this will be opinionated as everyone has different takes on how formatting should be done, but I am looking for the best practices to make sure your environment and project is setup properly so you are not fighting these issues for every new project that you start or work with, with other people.

Any help/suggestions is greatly appreciated. Thanks!

Comments

[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"
  },
}

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 😀

[Chad Smith]

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.

[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!

[Chad Smith]

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.

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

[Chad Smith]

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.

[Michael R.]

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.

[Tyler V. (he/him)]

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.

[Michael R.]

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.