From a30ceed683e29e573c2b8efd423fb8ea084f117a Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 7 Mar 2022 08:00:09 +0100 Subject: [PATCH] ESLint Plugin: Make Prettier integration optional --- package-lock.json | 1 - packages/eslint-plugin/CHANGELOG.md | 8 ++++++- packages/eslint-plugin/README.md | 16 +++++++++++-- packages/eslint-plugin/configs/recommended.js | 23 ++++++++++--------- packages/eslint-plugin/package.json | 5 +++- 5 files changed, 37 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6b285790a4f80..b0ef631dc016a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16577,7 +16577,6 @@ "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" } }, diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index 5e9be64f543c1..70a7cb433855c 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/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) diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md index 7cb6f433eb376..2eb8d225f45a6 100644 --- a/packages/eslint-plugin/README.md +++ b/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 diff --git a/packages/eslint-plugin/configs/recommended.js b/packages/eslint-plugin/configs/recommended.js index f24fadf9b1d17..0f87865c79ffc 100644 --- a/packages/eslint-plugin/configs/recommended.js +++ b/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': { diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index 17638f612ce4c..0074a6bf6087b 100644 --- a/packages/eslint-plugin/package.json +++ b/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 }