Add Prettier formatting script (#18048)

* Add Prettier NPM dependency to packages/scripts and top-level

* Scripts: export the fromProjectRoot function from scripts/utils module

* Scripts: Add Prettier formatting script

* ESLint config: use default (linebreak before ternary op) config for operator-linebreak rule

* ESLint: disable formatting rules in the recommended config

Adds `eslint-config-prettier` to the recommended config and creates an alternative
`recommended-with-formatting` config for project that want to keep ESLint formatting
rules and opt-out of Prettier.

* Scripts: the format-js script checks if Prettier is present and has top-level config

Prettier presence in a `wp-scripts`-powered project is optional, and the `format-js` script
checks if it's there and if it's indeed the fork (`wp-prettier`). Will report error otherwise.

Also, require a top-level Prettier config to be present. We can't default to the one inside
`wp-scripts`, because IDE and editor integrations won't find it there and will use the Prettier
defaults.

* Bump the minimum required version of npm to 6.9.0

* Add ESLint config changes notice to changelog

* Update package-lock.json

* Regenerate package-lock.json

Co-authored-by: Grzegorz (Greg) Ziółkowski <[email protected]>

.prettierrc.js

@@ -0,0 +1,3 @@
+// Import the default config file and expose it in the project root.
+// Useful for editor integrations.
+module.exports = require( '@wordpress/scripts/config/.prettierrc.js' );

package.json

@@ -146,6 +146,7 @@
 		"node-watch": "0.6.0",
 		"postcss": "7.0.13",
 		"postcss-loader": "3.0.0",
+		"prettier": "npm:[email protected]",
 		"progress": "2.0.3",
 		"react": "16.9.0",
 		"react-dom": "16.9.0",
@@ -186,6 +187,7 @@
 		"fixtures:server-registered": "packages/env/bin/wp-env run wordpress ./wp-content/plugins/gutenberg/bin/get-server-blocks.php > test/integration/full-content/server-registered.json",
 		"fixtures:generate": "npm run fixtures:server-registered && cross-env GENERATE_MISSING_FIXTURES=y npm run test-unit",
 		"fixtures:regenerate": "npm run fixtures:clean && npm run fixtures:generate",
+		"format-js": "wp-scripts format-js",
 		"lint": "concurrently \"npm run lint-js\" \"npm run lint-pkg-json\" \"npm run lint-css\" \"npm run lint-types\"",
 		"lint-js": "wp-scripts lint-js",
 		"lint-js:fix": "npm run lint-js -- --fix",

packages/eslint-plugin/CHANGELOG.md

@@ -1,3 +1,10 @@
+## Master
+
+### New Features
+
+- The `recommended` config no longer enables rules that check code formatting (whitespace, indenting, etc.) and that could conflict with Prettier.
+- There is a new `recommended-with-formatting` config that has the code formatting rules still enabled, for projects that want to opt out from Prettier and continue checking code formatting with ESLint.
+
 ## 3.3.0 (2019-12-19)
 
 ### Bug Fixes

packages/eslint-plugin/configs/es5.js

@@ -57,7 +57,7 @@ module.exports = {
 		'no-with': 'error',
 		'object-curly-spacing': [ 'error', 'always' ],
 		'one-var-declaration-per-line': [ 'error', 'initializations' ],
-		'operator-linebreak': [ 'error', 'after' ],
+		'operator-linebreak': 'error',
 		'padded-blocks': [ 'error', 'never' ],
 		'quote-props': [ 'error', 'as-needed' ],
 		quotes: [ 'error', 'single', { avoidEscape: true } ],

packages/eslint-plugin/configs/recommended-with-formatting.js

@@ -0,0 +1,39 @@
+module.exports = {
+	parser: 'babel-eslint',
+	extends: [
+		require.resolve( './jsx-a11y.js' ),
+		require.resolve( './custom.js' ),
+		require.resolve( './react.js' ),
+		require.resolve( './esnext.js' ),
+	],
+	env: {
+		node: true,
+	},
+	globals: {
+		window: true,
+		document: true,
+		wp: 'readonly',
+	},
+	overrides: [
+		{
+			// Unit test files and their helpers only.
+			files: [
+				'**/@(test|__tests__)/**/*.js',
+				'**/?(*.)test.js',
+			],
+			extends: [
+				require.resolve( './test-unit.js' ),
+			],
+		},
+		{
+			// End-to-end test files and their helpers only.
+			files: [
+				'**/specs/**/*.js',
+				'**/?(*.)spec.js',
+			],
+			extends: [
+				require.resolve( './test-e2e.js' ),
+			],
+		},
+	],
+};

packages/eslint-plugin/configs/recommended.js

@@ -1,39 +1,3 @@
 module.exports = {
-	parser: 'babel-eslint',
-	extends: [
-		require.resolve( './jsx-a11y.js' ),
-		require.resolve( './custom.js' ),
-		require.resolve( './react.js' ),
-		require.resolve( './esnext.js' ),
-	],
-	env: {
-		node: true,
-	},
-	globals: {
-		window: true,
-		document: true,
-		wp: 'readonly',
-	},
-	overrides: [
-		{
-			// Unit test files and their helpers only.
-			files: [
-				'**/@(test|__tests__)/**/*.js',
-				'**/?(*.)test.js',
-			],
-			extends: [
-				require.resolve( './test-unit.js' ),
-			],
-		},
-		{
-			// End-to-end test files and their helpers only.
-			files: [
-				'**/specs/**/*.js',
-				'**/?(*.)spec.js',
-			],
-			extends: [
-				require.resolve( './test-e2e.js' ),
-			],
-		},
-	],
+	extends: [ require.resolve( './recommended-with-formatting.js' ), 'eslint-config-prettier' ],
 };

packages/eslint-plugin/package.json

@@ -25,6 +25,7 @@
 	"main": "index.js",
 	"dependencies": {
 		"babel-eslint": "^10.0.3",
+		"eslint-config-prettier": "^6.10.0",
 		"eslint-plugin-jest": "^22.15.1",
 		"eslint-plugin-jsdoc": "^15.8.0",
 		"eslint-plugin-jsx-a11y": "^6.2.3",

packages/scripts/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## Master
 
+### Breaking Changes
+
+- This package requires now `node` v10.0.0 or later, and `npm` v6.9.0 or later ([#18048](https://github.com/WordPress/gutenberg/pull/18048)).
+- The minimum version required for `npm` in `check-engines` script was increased to `6.9.0+` ([#18048](https://github.com/WordPress/gutenberg/pull/18048)).
+
 ### New Features
 
 - Add SVGR support to compile SVG files to React components using the `@svgr/webpack` plugin ([#18243](https://github.com/WordPress/gutenberg/pull/18243)).
@@ -10,7 +15,7 @@
 
 ### Bug Fixes
 
-- Update `jest-preset-default` dependency to fix preset file extension for inclusion in NPM deployments. ([#19306](https://github.com/WordPress/gutenberg/pull/19306)).
+- Update `jest-preset-default` dependency to fix preset file extension for inclusion in NPM deployments ([#19306](https://github.com/WordPress/gutenberg/pull/19306)).
 
 ## 6.1.0 (2019-12-20)
 

packages/scripts/README.md

@@ -16,6 +16,8 @@ You only need to install one npm module:
 npm install @wordpress/scripts --save-dev
 ```
 
+**Note**: This package requires `npm` 6.9.0 or later, and is not compatible with older versions.
+
 ## Setup
 
 This package offers a command-line interface and exposes a binary called `wp-scripts` so you can call it directly with `npx` – an npm package runner. However, this module is designed to be configured using the `scripts` section in the `package.json` file of your project. This comprehensive example demonstrates the most of the capabilities included.