Integrate Prettier

[gregrickaby]

Based on WebDevStudios/js-coding-standards#2, the goal is to let Prettier deal with formatting.

While ESLint can also be a formatter, the scope is limited to JavaScript. Prettier on the other hand, can format just about everything, except PHP.

Also, in my opinion, WDS should revaluate how we're doing JS, Sass, and CSS coding standards and use Gutenberg and their sharable configs as the baseline.

Table of contents

• Description
  • @wordpress/scripts based projects
  • Non-@wordpress/scripts Projects
• Configure Code Editor
  • Inform the Code Editor
• Verify ESLint and Prettier Rules
• Disable Prettier

Description

@wordpress/scripts based projects

As of two weeks ago, both Gutenberg and @wordpress/scripts support Prettier. There's also a sharable config.

If WDS has a project using @wordpress/scripts, we can create a .prettierrc.js file in the project root with the following:

module.exports = require("@wordpress/prettier-config");

Adding this file to a project, will override our own coding standards.

Non-@wordpress/scripts Projects

For non-@wordpress/scripts based on projects, we can rely on this PR.

Based on Prettier's documentation as well as the eslint-config-prettier docs, this PR adds support for Prettier by:

1. Adding eslint-config-prettier dependency
2. Extending Prettier configs
3. Removing any conflicting ESLint formatting rules

Learn more about configuration: https://github.com/prettier/eslint-config-prettier#example-configuration

Configure Code Editor

In your favorite code editor, make sure you have an ESLint, Prettier, and EditorConfig extensions installed and turned on. For example, here are the settings for VS Code:

  "editor.formatOnSave": true,  // Enables all formatting. Prettier depends on this.
  "editor.codeActionsOnSave": {
    "source.fixAll": true,  // A new VS Code setting to enable fixing.
    "source.fixAll.eslint": true. // Give ESLint permission to auto fix code quality issues.
  },
  "eslint.format.enable": false,  // A stop-gap, to prevent ESLint from trying to format on save.
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode". // Set a default formatter for JavaScript/React to Prettier.
  },

Inform the Code Editor

Every WDS project should have an .editorconfig. This is the most basic way to ensure all our code editors are on the same page. Prettier looks for .editorconfig as a possible config file.

Here are the config files Prettier looks for, in order:

1. .prettierrc or .prettierrc.js
2. .editorconfig
3. Code editor defaults
4. Bundled defaults

This is the recommended .editorconfig configuration directly from WordPress.

# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org

# WordPress Coding Standards
# https://make.wordpress.org/core/handbook/coding-standards/

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = tab
indent_size = 4

[*.yml]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

Verify ESLint and Prettier Rules

The eslint-config-prettier package comes with CLI utility to verify that both ESLint and Prettier are playing together nicely.

Run npx eslint --print-config path/to/main.js | npx eslint-config-prettier-check

If everything is OK, you should see: No rules that are unnecessary or conflict with Prettier were found.

Disable Prettier

Don't want to use Prettier on a project? Don't want to mess with your code editor settings to disable Prettier? Prettier can ignore files and directories at the project level. Add a .prettierignore file to the root of your project. Note: .prettierignore follows the.gitignore syntax. Learn more

.prettierignore example:

node_modules
**/.next/**
**/dist/**