Create-react-app: Investigate style enforcement tools

[gaearon]

I don't think style enforcement should be part of our linting process. It's too annoying to see formatting messages in console and browser warnings as you write code.

Nevertheless I think it's a good idea to enforce style automatically. For example, before pushing your changes.

We don't want to enforce any _particular_ style in CRA projects but I want to either document or integrate with popular automatic code formatting tools.

I don't plan to look into this personally but I'd love somebody to help us out and investigate what's out there in the ecosystem, and how we could use that in CRA.

Constraints:

• Should offer different styles (at least semi / no-semi)
• Fixing violations should be automatic and as easy as npm run format which could be like react-scripts format semi
• The tool should understand all of the syntax we use (ES6, JSX, class properties, async await)

Desired outcomes:

• We know which style enforcement tools exist and how they differ from each other
• If there is one fitting our workflow, we have documentation on integrating it into CRA project
• If it's really good we might even include it into CRA

If you'd like to help, please write in this issue! I think it's fine if several people look into this at the same time so this task is open to everyone.

[robertknight]

I've used a combination of typescript-formatter for basic formatting of JavaScript source files followed by eslint --fix to deal with easily fixable style violations such as missing/extra semi-colons, missing/extra commas at the end of lines in object/array literals etc. typescript-formatter supports ES6 and JSX, but AFAIK it doesn't yet support rest/spread object properties or the full range of Flow syntax (since there are some differences between TS and Flow syntax).

I think ESLint is a good fit for basic style fixups since you're already using it. For the initial code formatting part you probably want something based on the Babel toolchain however.

[danharper]

Sounds like ESLint's --fix does everything you'd need. For extended syntax which ESLint doesn't support natively, there's usually additional plugins which provide linting rules & autofixing, e.g. eslint-plugin-babel, eslint-plugin-flowtype.

[bojand]

https://github.com/sindresorhus/xo some config might work.

[mxstbr]

@okonet might be interested in this. His lint-staged project can be implemented to have the exact behavior you want, for example with ESlint!

[okonet]

Thanks @mxstbr for bringing this up. I'm definitely interested in this. I'm using lint-staged for all my projects and I can't recommend it enough especially along with eslint --fix combination. What steps are required from my side to make it happen?

[suchipi]

Since there are already tons of eslint rules and plugins that _do_ enforce style, it seems like leveraging eslint --fix (with an eslint config that is different from the builtin one) would be a good approach

[gaearon]

This is more or less what I wanted (from @jlongster).
I’d like to investigate integrating it by default.

http://jlongster.com/A-Prettier-Formatter

[Graham42]

Can we consider this issue a duplicate of #451 ?

[gaearon]

Yep.