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.

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

Add Prettier formatting script #18048

Merged
merged 10 commits into from
Jan 29, 2020
3 changes: 3 additions & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// Import the default config file and expose it in the project root.
gziolo marked this conversation as resolved.
Show resolved Hide resolved
// Useful for editor integrations.
module.exports = require( '@wordpress/scripts/config/.prettierrc.js' );
Copy link
Member

Choose a reason for hiding this comment

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

We should document it and ensure that this file is always usable outside. I guess it will become the blessed way to integrated with IDEs. Unless we expose a function that proxies the default configs provided.

const { getDefaultConfig } from '@wordpress/scripts';

module.exports = getDefaultConfig( 'prettier' );

It's probably unnecessary indirection though :)

164 changes: 107 additions & 57 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Copy link
Member

Choose a reason for hiding this comment

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

Should it get integrated with pre-commit hooks as well? What would be the best workflow?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, it would be nice to add a formatting pre-commit step with lint-staged. I didn't add that to the original PR, but can add it now if we agree about the desired workflow.

"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",
Expand Down
7 changes: 7 additions & 0 deletions packages/eslint-plugin/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/eslint-plugin/configs/es5.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 } ],
Expand Down
39 changes: 39 additions & 0 deletions packages/eslint-plugin/configs/recommended-with-formatting.js
Original file line number Diff line number Diff line change
@@ -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' ),
],
},
],
};
38 changes: 1 addition & 37 deletions packages/eslint-plugin/configs/recommended.js
Original file line number Diff line number Diff line change
@@ -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' ],
ntwb marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

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

We need to run prettier on lint if we are not going to enforce the formatting rules through eslint anymore.

};
1 change: 1 addition & 0 deletions packages/eslint-plugin/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 6 additions & 1 deletion packages/scripts/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)).
Expand All @@ -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)

Expand Down
2 changes: 2 additions & 0 deletions packages/scripts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

@ntwb ntwb Jan 20, 2020

Choose a reason for hiding this comment

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

Copy link
Member

Choose a reason for hiding this comment

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

Yes, we can extend it.


## 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.
Expand Down
Loading