From d13ad4868c2210667eb48dd1a72c60c3ea7b7cd8 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Wed, 29 Jan 2020 12:20:11 +0100 Subject: [PATCH 1/3] Docs: Add details for format-js to @wordpress/scripts package --- packages/eslint-plugin/CHANGELOG.md | 4 ++-- packages/eslint-plugin/README.md | 5 +++-- packages/scripts/CHANGELOG.md | 1 + packages/scripts/README.md | 30 ++++++++++++++++++++++++++--- 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index daf6d49ac0e5a..013f83f0d12bb 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -2,8 +2,8 @@ ### 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. +- The `recommended` rulest no longer enables rules that check code formatting (whitespace, indenting, etc.) and that could conflict with Prettier. +- There is a new `recommended-with-formatting` ruleset 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) diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md index 63034c7efe800..86136e4340226 100644 --- a/packages/eslint-plugin/README.md +++ b/packages/eslint-plugin/README.md @@ -22,7 +22,9 @@ 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) and [`eslint-plugin-react`](https://github.com/yannickcr/eslint-plugin-react) projects. +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-config-prettier`](https://github.com/prettier/eslint-config-prettier) projects. + +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. ### Rulesets @@ -32,7 +34,6 @@ Alternatively, you can opt-in to only the more granular rulesets offered by the - `es5` - `esnext` - `jsdoc` -- `jshint` (legacy) - `jsx-a11y` - `react` - `test-e2e` diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 0644bc133e81b..2e66f345ebc59 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -8,6 +8,7 @@ ### 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)). +- Add `format-js` script to format JavaScript source code, it uses the [`wp-prettier`](https://github.com/Automattic/wp-prettier) – Prettier fork adjusted to WordPress coding style guidelines ([#18048](https://github.com/WordPress/gutenberg/pull/18048)). - Add `lint-md` script to lint JavaScript source code in markdown files, uses the `eslint-plugin-markdown` plugin ([#19518](https://github.com/WordPress/gutenberg/pull/19518)). - Add `packages-update` script to update WordPress packages to the latest version automatically ([#19448](https://github.com/WordPress/gutenberg/pull/19448)). diff --git a/packages/scripts/README.md b/packages/scripts/README.md index 560bef7330f45..e83d329ba18b1 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -16,7 +16,7 @@ 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. +**Note**: This package requires `node` 10.0.0 or later, and `npm` 6.9.0 or later. It is not compatible with older versions. ## Setup @@ -30,6 +30,7 @@ _Example:_ "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", + "format:js": "wp-scripts format-js", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:md": "wp-scripts lint-md", @@ -48,7 +49,7 @@ It might also be a good idea to get familiar with the [JavaScript Build Setup tu To update an existing project to a new version of `@wordpress/scripts`, open the [changelog](https://github.com/WordPress/gutenberg/blob/master/packages/scripts/CHANGELOG.md), find the version you’re currently on (check `package.json` in the top-level directory of your project), and apply the migration instructions for the newer versions. -In most cases bumping the `@wordpress/scripts` version in `package.json` and running `npm install` in the root folder of your project should be enough, but it’s good to check the [changelog](https://github.com/WordPress/gutenberg/blob/master/packages/scripts/CHANGELOG.md) for potential breaking changes. +In most cases bumping the `@wordpress/scripts` version in `package.json` and running `npm install` in the root folder of your project should be enough, but it’s good to check the [changelog](https://github.com/WordPress/gutenberg/blob/master/packages/scripts/CHANGELOG.md) for potential breaking changes. There is also `update-packages` script included in this package that aims to automate the process of updating WordPress dependencies in your projects. We commit to keeping the breaking changes minimal so you can upgrade `@wordpress/scripts` as seamless as possible. @@ -98,7 +99,7 @@ This is how you execute the script with presented setup: #### Advanced information -It uses [check-node-version](https://www.npmjs.com/package/check-node-version) behind the scenes with the recommended configuration provided. You can specify your own ranges as described in [check-node-version docs](https://www.npmjs.com/package/check-node-version). Learn more in the [Advanced Usage](#advanced-usage) section. +It uses [check-node-version](https://www.npmjs.com/package/check-node-version) behind the scenes with the recommended configuration provided. Similarly to this package, the default requirements are `node` 10.0.0 or later, and `npm` 6.9.0 or later. You can specify your own ranges as described in [check-node-version docs](https://www.npmjs.com/package/check-node-version). Learn more in the [Advanced Usage](#advanced-usage) section. ### `check-licenses` @@ -170,6 +171,29 @@ In the `wp-env` config block, each entry can be configured like so: - `test-php`: Runs your plugin's PHPUnit tests. You will need to have an appropriately configured `phpunit.xml.dist` file. - `docker-run`: For more advanced debugging, contributors may sometimes need to run commands in the Docker containers. This is the equivalent of running `docker-compose run` within the WordPress directory. +### `format-js` + +It helps to enforce coding style guidelines for your JavaScript files by formatting source code in a consistent way. + +_Example:_ + +```json +{ + "scripts": { + "format:js": "wp-scripts lint-js", + "format:js:src": "wp-scripts lint-js ./src" + } +} +``` + +This is how you execute the script with presented setup: + +* `npm run format:js` - formats JavaScript files in the entire project’s directories. +* `npm run format:js:src` - formats JavaScript files in the project’s `src` subfolder’s directories. + +When you run commands similar to the `npm run format:js:src` example above, you can provide a file, a directory, or `glob` syntax or any combination of them. + +By default, files located in `build` and `node_modules` folders are ignored. ### `lint-js` From e348506ac55bbdd795c031b1f79194f0485ed573 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Wed, 29 Jan 2020 12:30:07 +0100 Subject: [PATCH 2/3] Update README.md --- packages/scripts/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/scripts/README.md b/packages/scripts/README.md index e83d329ba18b1..66bfa89c8de69 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -180,8 +180,8 @@ _Example:_ ```json { "scripts": { - "format:js": "wp-scripts lint-js", - "format:js:src": "wp-scripts lint-js ./src" + "format:js": "wp-scripts format-js", + "format:js:src": "wp-scripts format-js ./src" } } ``` From fff6d240f80d301b52a170209b804c6c07fd3409 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Wed, 29 Jan 2020 16:16:07 +0100 Subject: [PATCH 3/3] Update packages/eslint-plugin/CHANGELOG.md Co-Authored-By: Marcus Kazmierczak --- packages/eslint-plugin/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index 013f83f0d12bb..496a551e30686 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -2,7 +2,7 @@ ### New Features -- The `recommended` rulest no longer enables rules that check code formatting (whitespace, indenting, etc.) and that could conflict with Prettier. +- The `recommended` ruleset no longer enables rules that check code formatting (whitespace, indenting, etc.) and that could conflict with Prettier. - There is a new `recommended-with-formatting` ruleset 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)