🔬 ESLint + (optionally) Prettier Integration with WordPress Standards

[ahmadawais]

ESLint helps linting the ECMAScript and Prettier is the best Opinionated Code Formatter as in it uses AST and rewrites everything from scratch addressing all the consistencies.

• ESLint configuration
• ESLint config for WordPress
• Prettier integration with ESLint + Spacing issue that is not compatible

[ahmadawais]

I have just pushed a basic ESLint integration for the WPGulp2.0. If anyone is interested in reviewing the history of changes take a look at this commit 252ca86

[ahmadawais]

@dingo-d
Ok, so I've been reading about Prettier, and I talked with my colleagues from work what they think about it. So I have a few questions about the usage of Prettier.It's a code formatting tool. When you are writing a project from zero, what benefits do you have over just defining formatting rules in ESLint?You can set up the rules that will say to put certain function calls on separate lines, specify max width of a line etc. If you have linters set up in your editor or IDE the linter will notify you of this.Would Prettier be used just for JS or JS and PHP? What about WPCS? From the discussion that is going on there, I think there is an incentive to put together official WordPress handbook with them. And PHPCS can check, and beautify (through the usage of phpcbf) your JS, CSS and PHP code.Or should Prettier be used when you want to 'WPGulpify' your existing WP project?The feedback I got from my colleagues (who are experts at JS) is that it makes no sense to add Prettier to the project that is starting from zero (because you need to follow the set guidelines that exist, plus use existing linting rules). And when you want to add it to the existing project it can be pretty hard to configure to work well with linters (one colleague said that it messed his code quite a bit so he had to undo the changes done by the Prettier).So I'd like some really good examples where Prettier excels and where we can have a good use case for it (other than riding the hype train :D).

If you read the description above you'll get to know that there's just one spacing rule that Prettier doesn't support and that's a blocker for WordPress. Anywho, I have made the first pass on the ESLint integration as per the official WordPress ESLint configuration and with VSCode they are working quite well.

Since there is already a WPCS ESLint config, and I've tried it successfully alongside the VS Code ESLint extension.

I think the missing piece to the puzzle at this point is a Prettier config file that matches WPCS. That way Prettier can handle the formatting while ESLint handles the code quality rules.

For those curious why you would use Prettier and ESLint, here's a good explanation. https://prettier.io/docs/en/comparison.html

You should also read the progress related to ESLint + Prettier with WordPress at this Gutenberg issue.

So, far, I am happy with ESLint only and can do without Prettier. Can you check the current ESLint integration and see if there's anything that could be improved before we add ESNext support?

I have just pushed a basic ESLint integration for the WPGulp2.0 take a look → 252ca86

[dingo-d]

I've left some comments :)

[ahmadawais]

@dingo-d Where?

[dingo-d]

In the PR, but you've answered them :D