Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Add details for format-js to @wordpress/scripts package #19946

Merged
merged 3 commits into from
Jan 29, 2020
Merged

Docs: Add details for format-js to @wordpress/scripts package #19946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d13ad48
Docs: Add details for format-js to @wordpress/scripts package
gziolo Jan 29, 2020
e348506
Update README.md
gziolo Jan 29, 2020
fff6d24
Update packages/eslint-plugin/CHANGELOG.md
gziolo Jan 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/eslint-plugin/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` 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)

Expand Down
5 changes: 3 additions & 2 deletions packages/eslint-plugin/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -32,7 +34,6 @@ Alternatively, you can opt-in to only the more granular rulesets offered by the
- `es5`
- `esnext`
- `jsdoc`
- `jshint` (legacy)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's covered separately at the end of the file. It should be less exposed.

- `jsx-a11y`
- `react`
- `test-e2e`
Expand Down
1 change: 1 addition & 0 deletions packages/scripts/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)).

Expand Down
30 changes: 27 additions & 3 deletions packages/scripts/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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",
Expand All @@ -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.

Expand Down Expand Up @@ -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`

Expand Down Expand Up @@ -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 format-js",
"format:js:src": "wp-scripts format-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`

Expand Down