Prettier compatibility

[pi0]

We can choose to slightly change prettier defaults as docs and config in templates or adjust the eslint config to work with defaults out of the box.

The biggest changes are to remove configuration:

• Added semicolon ;
• Changing '' to ""
• Trailing comma

Comparing to other popular repos: https://github.com/nuxt/eslint-config/issues/224#issuecomment-1185385810 (It seems most choose to customize formatting)

[pi0]

Note: There are some discussions that prettier might change to use tabs in the next major version (I cannot find an official response how decided it is):

https://github.com/prettier/prettier/issues/7475

[danielroe]

FYI: eslint maintainers recommend using prettier for code formatting rather than eslint, and using eslint-config-prettier to disable formatting related rules within eslint.

I'd advocate this approach as well, possibly also enabling eslint-plugin-prettier at the same time.

[pi0]

eslint maintainers recommend using prettier for code formatting rather than eslint

Is it mentioned in main docs too? https://eslint.org/

Generally prettier has a wide community of users and I would advocate using it just wondering if eslint officially mentioned this in docs?

In main README:

Does Prettier replace ESLint? No, ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use ESLint for everything, or you can combine both using Prettier to format your code and ESLint to catch possible errors.

[pi0]

Ref: Example .prettierrc for some popular projects:

Vue: https://github.com/vuejs/vue/blob/main/.prettierrc

semi: false
singleQuote: true
printWidth: 80
trailingComma: 'none'
arrowParens: 'avoid'

Vite: https://github.com/vitejs/vite/blob/main/.prettierrc.json

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "none",
  "overrides": [
    {
      "files": ["*.json5"],
      "options": {
        "singleQuote": false,
        "quoteProps": "preserve"
      }
    },
    {
      "files": ["*.yml"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

React: https://github.com/facebook/react/blob/main/.prettierrc.js

{
  bracketSpacing: false,
  singleQuote: true,
  jsxBracketSameLine: true,
  trailingComma: 'es5',
  printWidth: 80,
  parser: 'babel',

  overrides: [
    {
      files: esNextPaths,
      options: {
        trailingComma: 'all',
      },
    },
  ],
}

[danielroe]

Nope, I can't find anything in the docs. But 🔈this is worth a listen.

[JoshuaKGoldberg]

Hi! @typescript-eslint maintainer here: yup, summarizing my words on 🔈the podcast, our recommendation is to use eslint-config-prettier. That's the config that disables all formatting rules from ESLint that would conflict with Prettier.

We haven't added the recommendation to typescript-eslint.io yet, but here's a work-in-progress PR with more written explanation: https://github.com/JoshuaKGoldberg/typescript-eslint/pull/141

Edit (July 2023): https://typescript-eslint.io/linting/troubleshooting/formatting

eslint-plugin-prettier at the same time

I would personally recommend against using eslint-plugin-prettier. While it's nice to simplify the number of extensions users need, it slows Prettier formatting down to the however fast ESLint is able to run -- which can be quite slow if you have compute-intensive rules. Which happens a lot for TypeScript users.

[bf]

Is there an update on this issue? I see the official nuxt recommendation is still to use Visual Studio on-save trigger to run prettier/eslint, but I'd really like to have it called as part of nuxi dev.

see https://nuxt.com/docs/community/contribution#use-eslint

[Lehoczky]

In my experience most people want to use ESLint and prettier together. They have similar amount of downloads (more than angular, react and vue combined), so we're talking about huge communities.

Using them together also gives the best DX: developers only see lint errors for things that really matter, while formatting is automatically taken care of by prettier.

Even though there isn't a post in the official ESLint docs recommending prettier, they are clearly not prioritizing stylistic rules:

Stylistic rules are frozen - we won't be adding any more options to stylistic rules. We've learned that there's no way to satisfy everyone's personal preferences, and most of the rules already have a lot of difficult-to-understand options. Stylistic rules are those related to spacing, conventions, and generally anything that does not highlight an error or a better way to do something.

ESLint rule policies

Stylelint maintainers went further and deprecated all of their stylistic rules recently:

We've deprecated 76 of the rules that enforce stylistic conventions, e.g. indentation. When we created these rules, pretty printers (like Prettier) didn't exist. They now offer a better way to consistently format code, especially whitespace. Linters and pretty printers are complementary tools that work together to help you write consistent and error-free code.

But a single config won't be enough if https://github.com/nuxt/cli/issues/53 is implemented (witch would be great for developers), in this case there could be separate configs for those projects that choses to use ESLint but not prettier during the scaffolding process. Create Svelte handles this pretty well by having different templates for different scenarios:

[SayakMukhopadhyay]

Just wanted to let people know that ESLint is actively trying to not support code formatting going forward. See https://eslint.org/blog/2023/10/deprecating-formatting-rules/. As such, I think it becomes more important to have tooling which works with ESLint and Prettier together.

I don't know if a particular config project will be needed for prettier or not. Still, I am attempting to only install prettier and some config dependencies and things seems to work for now. The below is my devDependencies to note

  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/eslint-config": "^0.1.1",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@nuxtjs/stylelint-module": "^5.1.0",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^5.0.0",
    "nuxt": "^3.8.2",
    "prettier": "^3.0.0",
    "stylelint": "^15.10.1",
    "stylelint-config-standard-vue": "^1.0.0",
    "vue": "^3.3.10",
    "vue-router": "^4.2.5"
  }

[pi0]

Indeed we need to find a proper standard formatted for nuxt repos. However, I'm not sure there are enough merits/interest from the nuxt team, in general, to have prettier as the preferred tool so closing this.

[aeadedoyin]

Hi @pi0 since this is closed. Will this "No Prettier" need to be reworded?

[pi0]

I use Prettier with no issues :) Feel free to open a PR to remove links to this issue.

[danielroe]

@aeadedoyin Just to clarify, the documentation link is talking about contribution to nuxt/nuxt, which we would very much discourage using prettier on.

We should remove the link, as @pi0 says.