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

Add Prettier formatting script #18048

Merged
merged 10 commits into from
Jan 29, 2020
Merged

Add Prettier formatting script #18048

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d20fa45
Add Prettier NPM dependency to packages/scripts and top-level
jsnajdr Nov 14, 2019
89d8cc6
Scripts: export the fromProjectRoot function from scripts/utils module
jsnajdr Oct 21, 2019
6832a2c
Scripts: Add Prettier formatting script
jsnajdr Nov 14, 2019
3551dbe
ESLint config: use default (linebreak before ternary op) config for o…
jsnajdr Nov 22, 2019
910fb35
ESLint: disable formatting rules in the recommended config
jsnajdr Nov 22, 2019
39dc240
Scripts: the format-js script checks if Prettier is present and has t…
jsnajdr Dec 16, 2019
3fb9d33
Bump the minimum required version of npm to 6.9.0
gziolo Jan 15, 2020
017456a
Add ESLint config changes notice to changelog
jsnajdr Jan 17, 2020
e5f09cf
Update package-lock.json
jsnajdr Jan 28, 2020
d19a844
Regenerate package-lock.json
gziolo Jan 28, 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
3 changes: 3 additions & 0 deletions .prettierrc.js
View file
Open in desktop
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
View file
Open in desktop

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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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 •
edited
Loading

Choose a reason for hiding this comment

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

Should this also mention Node.js v10 also?

It is noted as required in the changelog here https://github.com/WordPress/gutenberg/pull/18048/files#diff-748355c268adfa7ea2255a3045d81ed9R5 and required in package.json https://github.com/WordPress/gutenberg/pull/18048/files#diff-5df17b2fcf4daf47db49a1c6bb007220R23

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