Code syntax formatting in IDE

[chrismayer]

Since we switched to eslint in version 9 an external code formatter has to be used. In Wegue this seems to be stylistic. Assuming using VS Code for development how could the formatting rules be applied automatically while developing?

I am using prettier a lot and therefore I have an integration with VS Code, but I could not succeed doing similar for Wegue, which is quite inconvenient.

@fschmenger & @sronveaux do you use VS Code? Could you share your settings to ensure proper formatting for Wegue?

Should we commit some .vscode/ config files? Or better just document how to achieve this?

[sronveaux]

Hi @chrismayer,

Hmm this is very strange and not logical at all... I also do use VS Code on my side and also often use Prettier to format JavaScript code so we're approximately in the same situation... I must admit I didn't use latest Wegue version in a separate project yet and so didn't try to configure this completely...
Moreover, the code style we use in my team doesn't comply with Wegue current formatting so I personally disable Prettier while working on Wegue codebase and re-enable it in my custom projects. Do you mean Prettier formats the code on save but produces code that includes linting errors? I know for sure that configuring Prettier and ESLint together can be a real pain as some rules can conflict in both softwares... all depend what you want to achieve...
In my custom apps, I always edit the ESLint rules and add 'space-before-function-paren': 'off' (or now '@stylistic/space-before-function-paren': 'off') as it is impossible to configure Prettier for it to produce code that respects this ESLint rule.
If this is the problem you talk about, to fix it, we should define a prettier configuration file with the formatting rules we'd like the codebase to follow, add it to the root directory of Wegue, reformat the whole codebase (Wegue codebase is not Prettier-styled for now) and eventually adapt potential conflicting ESLint rules.

I'm not sure to understand what you mean with stylistic code formatter. The idea is that ESLint removed all stylistic rules by default in V9 and that the stylistic project was created to maintain and reintroduce those rules. This is included in Wegue so the same linting rules apply as before. As the configuration skeleton that is included doesn't specify any formatter, it should then fallback to your user-defined formatter. In my case, it takes Prettier for this, which I once again disable while working on Wegue codebase.

Concerning Wegue codebase, there was nothing linked to VS Code configuration before #449. As you can see in the commentaries, a very basic configuration was added to align with latest vue template and I just tuned it so that ESLint would report errors if the extension is installed but would not fix the errors on save with the line "source.fixAll.eslint": "never". However, this shouldn't disable or impact Prettier ! Perhaps you can give a simple try by removing the .vscode directory completely, your IDE will then behave exactly as it did before this partial configuration was added.

Configuring VS Code can also be tedious to discuss, as it has two different configuration files, one user file and one workspace file, with the latter potentially overriding what is defined in the first one.

Just to give it a try, can you please replace the .vscode/settings.json file in Wegue workspace with this content:

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "tsconfig.json": "tsconfig.*.json, env.d.ts",
    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "never"
  },
  "eslint.nodePath": "./node_modules",
  "eslint.workingDirectories": [
    { "mode": "auto" }
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

This should re-enable Prettier correctly if it wasn't working .
I just tried it and Prettier + ESLint both works with Prettier doing the formatting and ESLint returning potential errors but not fixing them automatically, which is what I personally expected.

Depending on how Prettier is installed, perhaps you have to define the "prettier.prettierPath": key but if you're using one of the latest versions of the extension, it should work using an embedded one.

Eventually I just came across a problem where ESLint extension was failing to run because of eslint-plugin-vuetify. This is certainly due to my tests and the modification of the VS Code settings file. Closing VS Code and opening it once again solved this issue...

I'm open to discuss this more depending on the error you encounter on your side. Could you please explain exactly which problem you encounter or what you want to achieve so we can try to solve it? If you prefer, you can send me a PM first with your VS Code settings files so we can better isolate the problem before discussing it all together here...

Cheers,
Sébastien