Codecov Report

Merging #3713 (2c1fc57) into master (af25d51) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #3713   +/-   ##
=======================================
  Coverage   93.34%   93.34%           
=======================================
  Files         178      178           
  Lines        1849     1849           
  Branches      332      332           
=======================================
  Hits         1726     1726           
  Misses        105      105           
  Partials       18       18           

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update af25d51...2c1fc57. Read the comment docs.

(Correction to printWidth, 100 is the Airbnb recommendation but 80 is the Prettier default.)

The Prettier config file doesn't actually read in .editorconfig, which I found out today:

This is not obvious from their API*, but the effect is that a valid Prettier config file basically makes .editorconfig irrelevant (the only .editorconfig exclusive option is the UTF-8 option, which is the default for VS Code).

Additionally, line endings are most appropriately handled by .gitattributes as per PR #3760, though there is nothing wrong with enforcing them in the Prettier config file.

I don't see a strong reason to delete the .editorconfig file, however.

But as discussed in this PR #3713, the current expectation for developers is that they have their VS Code or other IDE settings for Prettier configured per the Airbnb defaults used by this tailwindlabs/tailwindcss project.

The majority of Tailwind projects have Prettier config files, except the main one. Cheers!

*Reference: https://prettier.io/docs/en/api.html#prettierresolveconfigfilepath--options

So I don't know a ton about how all of this stuff is configured but this causes all of the options to be duplicated in .eslintrc.json as well as in prettier.config.js. Surely there's a way to just have this stuff in one place?

Hey @adamwathan! I tried to organize this to make it easy to read:

1. Why prettier.config.js is necessary
2. The new behavior vs. the old behavior
3. Comparing the 3 configuration files
4. Aren't these files just duplicates?
5. Thanks for reading & considering my PR!

1. Why prettier.config.js is necessary

Yeah, unfortunately .eslintrc.json and prettier.config.js need to have duplicate settings if you want to enforce both.

I feel you -- it seems like every project has 15 configuration files, even if there's only 1 source file.

From what I've seen prettier.config.js would be everything formatting related, .eslintrc.json typically doesn't mention formatting unless you want to enforce Prettier for linting, like you want to do, and .editorconfig is the slightly-redundant file.

@Facebook/React has all 3 for example:

1. https://github.com/facebook/react/blob/master/.prettierrc.js
2. https://github.com/facebook/react/blob/master/.eslintrc.js
3. https://github.com/facebook/react/blob/master/.editorconfig

Basically you will end up with a "Prettier-formatted" repository with only eslintrc.json and .editorconfig -- but the developer experience will be ESLint errors on every misformatted line.

These will get cleaned up with the npm run style -- --fix recommended in https://github.com/tailwindlabs/tailwindcss/blob/master/.github/CONTRIBUTING.md ... but again, it's a "at the end" thing.

For a developer like me who uses a different Prettier configuration file in VSCode (for projects without a Prettier config file), my changes on tailwindlabs/tailwindcss get incorrectly formatted on save, and then they get force-fixed by ESLint.

This behavior will happen to anyone who hasn't manually set up VSCode defaults to match this project (i.e. the Airbnb Prettier settings). I'd assume that's what your team uses, which I can totally relate to.

I didn't make .prettierrc files for a long time, because I'd simply configured Prettier in VSCode, but ESLint errors add a new wrinkle, as you'll see in the following screenshots.

2. The new behavior vs. the old behavior

It's easiest to see in a screenshot. First, here's tailwindlabs:master if I open & save a file:

Second, here's the PR#3713 branch if I open & save a file:

Without a prettier.config.js file, then Prettier will run using the default settings (per the VS Code extension), so my only way to fix it is to run npm run style -- --fix in the terminal:

Should I do that before committing? Yeah, sure -- it says so in CONTRIBUTING.md. But I basically don't get to use Prettier like I would in any other project, because this project's Prettier configuration differs from the Prettier defaults, yet Prettier is being linted so I get tons of red squiggly lines.

Having a prettier.config.js file duplicating eslintrc.json means I just get to format-on-save like I normally do with Prettier on any other project. That's what this PR #3713 does 😄

3. Comparing the 3 configuration files ​###

So for this PR #3713 here's what would come out in @tailwindlabs/tailwindcss:
.prettier.config.js (new file)

module.exports = {
  // These settings are duplicated in .editorconfig:
  tabWidth: 2, // indent_size = 2
  useTabs: false, // indent_style = space
  endOfLine: 'lf', // end_of_line = lf
  semi: false, // default: true
  singleQuote: true, // default: false
  printWidth: 100, // default: 80
  trailingComma: 'es5',
  bracketSpacing: true,
  overrides: [
    {
      files: '*.js',
      options: {
        parser: 'flow',
      },
    },
  ],
}

.eslintrc.json (no change)

{
  "env": {
    "jest": true
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "camelcase": ["error", { "allow": ["^unstable_"] }],
    "no-unused-vars": [2, { "args": "all", "argsIgnorePattern": "^_" }],
    "no-warning-comments": 0,
    "prettier/prettier": [
      "error",
      {
        "semi": false,
        "singleQuote": true,
        "printWidth": 100,
        "tabWidth": 2,
        "useTabs": false,
        "trailingComma": "es5",
        "bracketSpacing": true,
        "parser": "flow"
      }
    ]
  }
}

.editorconfig (no change)

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

4. Aren't these files just duplicates?

I tested the effects of the 3 files repeatedly on multiple projects before submitting this PR to you, and here's what I found.

Basically .editorconfig ends up being the "odd-one out" -- its only effect for me is that when I save files manually in VSCode they will have forced LF endings (even if I had the file open as CRLF). Prettier won't actually have that effect for me on Windows, despite the endOfLine setting.

Why do I have CRLF endings? Well, a .gitattributes file (as we discussed in #3760) is needed for me to actually pull down the files (on Windows) with LF line endings. That's no big deal, though, since it's a Windows-specific thing -- so I understand why you didn't accept that PR.

However, the missing prettier.config.js file affects all developers, and some @tailwindlabs projects have this file already e.g.:

• https://github.com/tailwindlabs/blog.tailwindcss.com/blob/master/prettier.config.js
• https://github.com/tailwindlabs/heroicons/blob/master/prettier.config.js

Unfortunately, there's no way I've found to pull prettier.config.js settings from .editorconfig or .eslintrc.json -- which is why you'll commonly see all 3 files present in projects like React.

5. Thanks for reading & considering my PR!

If you'd find it helpful, I'd be happy to go through and submit PRs to make all .eslintrc.json, prettier.config.js and .editorconfig files consistent throughout the @tailwindlabs projects.

The good news is it's a one-and-done thing -- you shouldn't need to update these files again.

References

Source 1

Note: While it is possible to pass options to Prettier via your ESLint configuration file, it is not recommended because editor extensions such as prettier-atom and prettier-vscode will read .prettierrc, but won't read settings from ESLint, which can lead to an inconsistent experience.

from https://www.npmjs.com/package/eslint-plugin-prettier

Source 2
Tutorial showing the need for both a Prettier config and ESLint config file
https://dev.to/s2engineers/how-to-make-eslint-work-with-prettier-avoiding-conflicts-and-problems-57pi

Source 3
Another tutorial showing the need for both a Prettier config and ESLint config file
https://www.robinwieruch.de/prettier-eslint

Thanks makes sense now!