ESLint Plugin: Make Prettier integration optional (#39244)

packages/eslint-plugin/CHANGELOG.md

@@ -2,7 +2,13 @@
 
 ## Unreleased
 
-–   Replaced no-shadow eslint rule with @typescript-eslint/no-shadow ([#38665](https://github.com/WordPress/gutenberg/pull/38665)).
+### Breaking Changes
+
+-   The integration with [Prettier](https://prettier.io) is now optional and gets activated when the `prettier` package is installed in the project ([#39244](https://github.com/WordPress/gutenberg/pull/39244)).
+
+### Bug Fix
+
+-   Replaced no-shadow eslint rule with @typescript-eslint/no-shadow ([#38665](https://github.com/WordPress/gutenberg/pull/38665)).
 
 ## 10.0.0 (2022-01-27)
 

packages/eslint-plugin/README.md

@@ -24,9 +24,21 @@ To opt-in to the default configuration, extend your own project's `.eslintrc` fi
 
 Refer to the [ESLint documentation on Shareable Configs](http://eslint.org/docs/developer-guide/shareable-configs) for more information.
 
-The `recommended` preset will include rules governing an ES2015+ environment, and includes rules from the [`eslint-plugin-jsx-a11y`](https://github.com/evcohen/eslint-plugin-jsx-a11y), [`eslint-plugin-react`](https://github.com/yannickcr/eslint-plugin-react), and [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) projects. It also includes an optional integration with [`@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint) that gets activated when the [`typescript`](https://www.npmjs.com/package/typescript) package is installed in the project.
+The `recommended` preset will include rules governing an ES2015+ environment, and includes rules from the [`eslint-plugin-jsdoc`](https://github.com/gajus/eslint-plugin-jsdoc), [`eslint-plugin-jsx-a11y`](https://github.com/evcohen/eslint-plugin-jsx-a11y), [`eslint-plugin-react`](https://github.com/yannickcr/eslint-plugin-react), and other similar plugins.
 
-There is also `recommended-with-formatting` ruleset for projects that want to opt out from [Prettier](https://prettier.io). It has the native ESLint code formatting rules enabled instead.
+This preset offers an optional integration with the [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) package that runs [Prettier](https://prettier.io) code formatter and reports differences as individual ESLint issues. You can activate it by installing the [`prettier`](https://www.npmjs.com/package/prettier) package separately with:
+
+```bash
+npm install prettier --save-dev
+```
+
+Finally, this ruleset also includes an optional integration with the [`@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint) package that enables ESLint to support [TypeScript](https://www.typescriptlang.org) language. You can activate it by installing the [`typescript`](https://www.npmjs.com/package/typescript) package separately with:
+
+```bash
+npm install typescript --save-dev
+```
+
+There is also `recommended-with-formatting` ruleset for projects that want to ensure that [Prettier](https://prettier.io) and [TypeScript](https://www.typescriptlang.org) integration is never activated. This preset has the native ESLint code formatting rules enabled instead.
 
 ### Rulesets
 

packages/eslint-plugin/configs/recommended.js

@@ -13,20 +13,21 @@ const defaultPrettierConfig = require( '@wordpress/prettier-config' );
  */
 const { isPackageInstalled } = require( '../utils' );
 
-const { config: localPrettierConfig } =
-	cosmiconfigSync( 'prettier' ).search() || {};
-const prettierConfig = { ...defaultPrettierConfig, ...localPrettierConfig };
-
 const config = {
-	extends: [
-		require.resolve( './recommended-with-formatting.js' ),
-		'plugin:prettier/recommended',
-	],
-	rules: {
-		'prettier/prettier': [ 'error', prettierConfig ],
-	},
+	extends: [ require.resolve( './recommended-with-formatting.js' ) ],
 };
 
+if ( isPackageInstalled( 'prettier' ) ) {
+	config.extends.push( 'plugin:prettier/recommended' );
+
+	const { config: localPrettierConfig } =
+		cosmiconfigSync( 'prettier' ).search() || {};
+	const prettierConfig = { ...defaultPrettierConfig, ...localPrettierConfig };
+	config.rules = {
+		'prettier/prettier': [ 'error', prettierConfig ],
+	};
+}
+
 if ( isPackageInstalled( 'typescript' ) ) {
 	config.settings = {
 		'import/resolver': {

packages/eslint-plugin/package.json

@@ -46,15 +46,18 @@
 		"eslint-plugin-react": "^7.27.0",
 		"eslint-plugin-react-hooks": "^4.3.0",
 		"globals": "^13.12.0",
-		"prettier": "npm:wp-prettier@2.2.1-beta-1",
 		"requireindex": "^1.2.0"
 	},
 	"peerDependencies": {
 		"@babel/core": ">=7",
 		"eslint": ">=8",
+		"prettier": ">=2",
 		"typescript": ">=4"
 	},
 	"peerDependenciesMeta": {
+		"prettier": {
+			"optional": true
+		},
 		"typescript": {
 			"optional": true
 		}