Configure prettier for Adonis 5

[Pacheco95]

I created a project with npm init adonis-ts-app and selected the option Setup eslint? (y/N) · true. This setup gives me the following .eslintrc.json

{
  "extends": [
    "plugin:adonis/typescriptApp"
  ]
}

I also have configured my .vscode/settings.json to this

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": true
  }
}

But when I save the .ts files, prettier seems to ignore eslint settings.

What should I do to make eslint correctly format my .ts files on save?

[prashanth1k]

Does Prettier ignore eslint but still format the file? There are many flags to play around and run amok, unfortunately. Did you try this post?

[Pacheco95]

Yes, it does. And yes, I tried "prettier.eslintIntegration": true but VsCode shows the message Unknown Configuration Setting on hovering this line. Seems this command is no longer supported.
I discovered these settings in this video first comment https://www.youtube.com/watch?v=TI4v4Y8yRjw (it is in portuguese)

[fnoquiq]

Try it (Brazilian portuguese):

.eslintrc.json

{
  "extends": [
    "plugin:adonis/typescriptApp",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "no-console": "error"
  }
}

prettier.config.js

module.exports = {
  trailingComma: "es5",
  semi: false,
  singleQuote: true,
  quoteProps: "consistent",
  bracketSpacing: true,
  arrowParens: "always",
  printWidth: 100,
  tabWidth: 2,
}

[Pacheco95]

Worked like a charm!!! Thank you very much 🚀