Prepack: Switch to using Prettier for automated source code formatting and linting

Created on 24 May 2017  路  8Comments  路  Source: facebook/prepack

Switch off es-lint rules for formatting, and plug in Prettier, similar to here: https://github.com/facebook/react/pull/9101

Also plug in a formatting check to our CI, and update documentation, similar to here: https://github.com/facebook/react/pull/9187/files

help wanted

Most helpful comment

Happy to help with this one! I just moved over a large codebase at my job to Prettier.

All 8 comments

Happy to help with this one! I just moved over a large codebase at my job to Prettier.

@NTillmann do you have a preference on max line length? Doesn't look like there's one specified for the project.

120 works for me.

| Prettier option | ESLint equivalent in the existing eslint settings
| ------------- | ------------- |
| --print-width 120 | | | `--tab-width 2` | |
| --use-tabs false | "no-tabs": 2 |
| --semi true | "semi": 2 |
| --single-quote false (Quotes in JSX will always be double) | `| |--trailing-comma none|"comma-dangle": 0| |--bracket-spacing true(spaces between brackets in object literals) |"object-curly-spacing": [2, "always"]` |

As a result:

options = {
  "print-width": 120,
  "tab-width": 2,
  "use-tabs": false,
  "semi": true,
  "single-quote": false,
  "trailing-comma": "none",
  "bracket-spacing": true
};

If that looks good I can update Prettier options in this branch.

About the master branch, I used eslint-config-prettier-check to find rules that are unnecessary or might conflict with prettier:

- array-bracket-spacing
- brace-style
- comma-spacing
- comma-style
- computed-property-spacing
- eol-last
- flowtype/generic-spacing
- flowtype/space-after-type-colon
- flowtype/space-before-generic-bracket
- flowtype/space-before-type-colon
- flowtype/union-intersection-spacing
- func-call-spacing
- jsx-quotes
- key-spacing
- keyword-spacing
- new-parens
- no-extra-semi
- no-mixed-spaces-and-tabs
- no-spaced-func
- no-trailing-spaces
- object-curly-spacing
- semi
- semi-spacing
- space-in-parens
- space-infix-ops
- space-unary-ops

I am not sure that we can switch off ESLint rules because we will lose rules about headers. React team didn't switch off ESLint rules as well when added Prettier rules. Any ideas?

@archiekh In my PR (#729) I followed what the React team did and didn't turn off ESLint rules unless they directly conflicted with the prettier formatting. I think that's the right way to go.

I also think that in your options, you could leave out most of the values because they correspond to the prettier defaults:

options = {
  "print-width": 120,
  "tab-width": 2,
  "use-tabs": false,
  "semi": true,
  "single-quote": false,
  "trailing-comma": "none",
  "bracket-spacing": true
};

could just be:

options = {
  "print-width": 120
};

@wdhorton good to see your PR! It's a luck that most of Prettier options consistent with the Prepack ESLint settings but I decided to keep all options just in case if default value of some Prettier option will change in the future.

Implemented by #759 and #787 (building on 聽#760). Many thanks to @wdhorton for driving this!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MichaelBlume picture MichaelBlume  路  6Comments

cblappert picture cblappert  路  7Comments

simon-yxl picture simon-yxl  路  3Comments

skyne98 picture skyne98  路  7Comments

jtenner picture jtenner  路  5Comments