Skip to content

Commit

Permalink
Scripts: Include YAML files in prettification (#30240)
Browse files Browse the repository at this point in the history
`prettier` has been able to [format YAML files since version 1.14](https://prettier.io/blog/2018/07/29/1.14.0.html) (released in July of 2018). We're starting to size up on YAML files (mostly GitHub Actions workflows), so it'd be nice to have them auto-formatted. This PR adds YAML files to the list of extensions formatted by `prettier`. Existing YAML files have already been updated to the new format by #30409.

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>
  • Loading branch information
ockham and gziolo committed Apr 14, 2021
1 parent dd4cc1b commit 06fd22e
Show file tree
Hide file tree
Showing 21 changed files with 178 additions and 138 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/bundle-size.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ jobs:
- name: Use Node.js 14.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: 14.x
node-version: 14.x

- uses: preactjs/compressed-size-action@7d87f60a6b0c7d193b8183ce859ed00b356ea92f # v2.1.0
with:
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/create-block.yml
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ jobs:
- name: Use Node.js ${{ matrix.node }}.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: ${{ matrix.node }}
node-version: ${{ matrix.node }}

- name: Cache node modules
uses: actions/cache@26968a09c0ea4f3e233fdddbafd1166051a095f6 # v2.1.4
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/end2end-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ jobs:
- name: Use Node.js 14.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: 14.x
node-version: 14.x

- name: Cache node modules
uses: actions/cache@26968a09c0ea4f3e233fdddbafd1166051a095f6 # v2.1.4
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/pull-request-automation.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ jobs:
- name: Use Node.js 14.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: 14.x
node-version: 14.x

# Changing into the action's directory and running `npm install` is much
# faster than a full project-wide `npm ci`.
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/rnmobile-android-runner.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
- name: Use Node.js 14.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: 14.x
node-version: 14.x

- name: Restore npm cache
uses: actions/cache@26968a09c0ea4f3e233fdddbafd1166051a095f6 # v2.1.4
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/rnmobile-ios-runner.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
- name: Use Node.js 14.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: 14.x
node-version: 14.x

- name: Restore npm cache
uses: actions/cache@26968a09c0ea4f3e233fdddbafd1166051a095f6 # v2.1.4
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/static-checks.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
- name: Use Node.js 14.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: 14.x
node-version: 14.x

- name: Cache node modules
uses: actions/cache@26968a09c0ea4f3e233fdddbafd1166051a095f6 # v2.1.4
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/storybook-pages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ jobs:
- name: Use Node.js 14.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: 14.x
node-version: 14.x

- name: Cache node modules
uses: actions/cache@26968a09c0ea4f3e233fdddbafd1166051a095f6 # v2.1.4
Expand Down
6 changes: 3 additions & 3 deletions .github/workflows/unit-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ jobs:
- name: Use Node.js ${{ matrix.node }}.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: ${{ matrix.node }}
node-version: ${{ matrix.node }}

- name: Cache node modules
uses: actions/cache@26968a09c0ea4f3e233fdddbafd1166051a095f6 # v2.1.4
Expand Down Expand Up @@ -60,7 +60,7 @@ jobs:
- name: Use Node.js 14.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: 14.x
node-version: 14.x

- name: Cache node modules
uses: actions/cache@26968a09c0ea4f3e233fdddbafd1166051a095f6 # v2.1.4
Expand Down Expand Up @@ -102,7 +102,7 @@ jobs:
- name: Use Node.js 14.x
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
with:
node-version: 14.x
node-version: 14.x

- name: Cache node modules
uses: actions/cache@26968a09c0ea4f3e233fdddbafd1166051a095f6 # v2.1.4
Expand Down
4 changes: 2 additions & 2 deletions bin/test-create-block.sh
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ status "Scaffolding block..."
npx wp-create-block esnext-test --no-wp-scripts
cd esnext-test

status "Formatting JavaScript files..."
../node_modules/.bin/wp-scripts format-js
status "Formatting files..."
../node_modules/.bin/wp-scripts format

status "Building block..."
../node_modules/.bin/wp-scripts build
Expand Down
2 changes: 1 addition & 1 deletion docs/how-to-guides/platform/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ You can then add a scripts section to your package.json file, for example:
```json
"scripts": {
"build": "wp-scripts build",
"format:js": "wp-scripts format-js",
"format": "wp-scripts format",
"lint:js": "wp-scripts lint-js",
"start": "wp-scripts start"
}
Expand Down
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,7 @@
"fixtures:clean": "rimraf \"packages/e2e-tests/fixtures/blocks/*.+(json|serialized.html)\"",
"fixtures:generate": "cross-env GENERATE_MISSING_FIXTURES=y npm run test-unit",
"fixtures:regenerate": "npm run fixtures:clean && npm run fixtures:generate",
"format": "wp-scripts format",
"format-js": "wp-scripts format-js",
"format-php": "wp-env run composer run-script format",
"lint": "concurrently \"npm run lint-lockfile\" \"npm run lint-js\" \"npm run lint-pkg-json\" \"npm run lint-css\"",
Expand Down Expand Up @@ -291,8 +292,8 @@
"*.scss": [
"wp-scripts lint-style"
],
"*.{js,ts,tsx}": [
"wp-scripts format-js",
"*.{js,ts,tsx,yml}": [
"wp-scripts format",
"wp-scripts lint-js"
],
"{docs/{toc.json,tool/*.js},packages/{*/README.md,components/src/*/**/README.md}}": [
Expand Down
1 change: 1 addition & 0 deletions packages/create-block/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Enhancement

- Rename `format:js` script to `format` ([#30240](https://github.com/WordPress/gutenberg/pull/30240)).
- Updated `.editorconfig` template files to work with automatic file formatting ([#30794](https://github.com/WordPress/gutenberg/pull/30794)).

## 2.2.0 (2021-04-06)
Expand Down
4 changes: 2 additions & 2 deletions packages/create-block/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,10 @@ $ npm run build
Builds the code for production. [Learn more](/packages/scripts#build).

```bash
$ npm run format:js
$ npm run format
```

Formats JavaScript files. [Learn more](/packages/scripts#format-js).
Formats files. [Learn more](/packages/scripts#format).

```bash
$ npm run lint:css
Expand Down
2 changes: 1 addition & 1 deletion packages/create-block/lib/init-package-json.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ module.exports = async ( {
main: wpScripts && 'build/index.js',
scripts: wpScripts && {
build: 'wp-scripts build',
'format:js': 'wp-scripts format-js',
format: 'wp-scripts format',
'lint:css': 'wp-scripts lint-style',
'lint:js': 'wp-scripts lint-js',
start: 'wp-scripts start',
Expand Down
2 changes: 1 addition & 1 deletion packages/create-block/lib/init-wp-scripts.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ module.exports = async ( { slug } ) => {

info( '' );
info( 'Formatting JavaScript files.' );
await command( 'npm run format:js', {
await command( 'npm run format', {
cwd,
} );

Expand Down
4 changes: 2 additions & 2 deletions packages/create-block/lib/scaffold.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,8 @@ module.exports = async (
code( ' $ npm run build' );
info( ' Builds the code for production.' );
info( '' );
code( ' $ npm run format:js' );
info( ' Formats JavaScript files.' );
code( ' $ npm run format' );
info( ' Formats files.' );
info( '' );
code( ' $ npm run lint:css' );
info( ' Lints CSS files.' );
Expand Down
2 changes: 2 additions & 0 deletions packages/scripts/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

### Breaking Changes

- Rename `format-js` script to `format` ([#30240](https://github.com/WordPress/gutenberg/pull/30240)).
- Include YAML files when formatting files with `format` ([#30240](https://github.com/WordPress/gutenberg/pull/30240)).
- The bundled `css-loader` dependency has been updated from requiring `^3.5.2` to requiring `^5.1.3` ([#27821](https://github.com/WordPress/gutenberg/pull/27821)).
- The bundled `mini-css-extract-plugin` dependency has been updated from requiring `^0.9.0` to requiring `^1.3.9` ([#27821](https://github.com/WordPress/gutenberg/pull/27821)).
- The bundled `postcss-loader` dependency has been updated from requiring `^3.0.0` to requiring `^4.2.0` ([#27821](https://github.com/WordPress/gutenberg/pull/27821)).
Expand Down
16 changes: 8 additions & 8 deletions packages/scripts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +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",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"lint:md:docs": "wp-scripts lint-md-docs",
Expand Down Expand Up @@ -128,27 +128,27 @@ _Flags_:
- `--gpl2`: Validates against [GPLv2 license compatibility](https://www.gnu.org/licenses/license-list.en.html)
- `--ignore=a,b,c`: A comma-separated set of package names to ignore for validation. This is intended to be used primarily in cases where a dependency’s `license` field is malformed. It’s assumed that any `ignored` package argument would be manually vetted for compatibility by the project owner.

### `format-js`
### `format`

It helps to enforce coding style guidelines for your JavaScript files by formatting source code in a consistent way.
It helps to enforce coding style guidelines for your files (JavaScript, YAML) 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"
"format": "wp-scripts format",
"format:src": "wp-scripts format ./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.
- `npm run format` - formats files in the entire project’s directories.
- `npm run format:src` - formats 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.
When you run commands similar to the `npm run format:src` example above, you can provide a file, a directory, or `glob` syntax or any combination of them.

By default, files located in `build`, `node_modules`, and `vendor` folders are ignored.

Expand Down
136 changes: 28 additions & 108 deletions packages/scripts/scripts/format-js.js
Original file line number Diff line number Diff line change
@@ -1,116 +1,36 @@
/**
* External dependencies
*/
const { exit, stdout } = require( 'process' );

/**
* External dependencies
*/
const chalk = require( 'chalk' );
const { sync: spawn } = require( 'cross-spawn' );
const { sync: resolveBin } = require( 'resolve-bin' );
const { sync: dirGlob } = require( 'dir-glob' );
const { sync: readPkgUp } = require( 'read-pkg-up' );

/**
* Internal dependencies
*/
const {
fromConfigRoot,
fromProjectRoot,
getArgFromCLI,
getFileArgsFromCLI,
hasArgInCLI,
hasPrettierConfig,
hasProjectFile,
} = require( '../utils' );

// Check if the project has wp-prettier installed and if the project has a Prettier config
function checkPrettier() {
try {
const prettierResolvePath = require.resolve( 'prettier' );
const prettierPackageJson = readPkgUp( { cwd: prettierResolvePath } );
const prettierPackageName = prettierPackageJson.pkg.name;

if (
! [ 'wp-prettier', '@wordpress/prettier' ].includes(
prettierPackageName
)
) {
return {
success: false,
message:
chalk.red(
'Incompatible version of Prettier was found in your project\n'
) +
"You need to install the 'wp-prettier' package to get " +
'code formatting compliant with the WordPress coding standards.\n\n',
};
}
} catch {
return {
success: false,
message:
chalk.red(
"The 'prettier' package was not found in your project\n"
) +
"You need to install the 'wp-prettier' package under an alias to get " +
'code formatting compliant with the WordPress coding standards.\n\n',
};
}

return { success: true };
}

const checkResult = checkPrettier();
if ( ! checkResult.success ) {
stdout.write( checkResult.message );
exit( 1 );
}

// Check for existing config in project, if it exists no command-line args are
// needed for config, otherwise pass in args to default config in packages
// See: https://prettier.io/docs/en/configuration.html
let configArgs = [];
if ( ! hasPrettierConfig() ) {
configArgs = [
'--config',
require.resolve( '@wordpress/prettier-config' ),
];
}

// If `--ignore-path` is not explicitly specified, use the project's or global .eslintignore
let ignorePath = getArgFromCLI( '--ignore-path' );
if ( ! ignorePath ) {
if ( hasProjectFile( '.eslintignore' ) ) {
ignorePath = fromProjectRoot( '.eslintignore' );
} else {
ignorePath = fromConfigRoot( '.eslintignore' );
}
}
const ignoreArgs = [ '--ignore-path', ignorePath ];

// forward the --require-pragma option that formats only files that already have the @format
// pragma in the first docblock.
const pragmaArgs = hasArgInCLI( '--require-pragma' )
? [ '--require-pragma' ]
: [];

// Get the files and directories to format and convert them to globs
let fileArgs = getFileArgsFromCLI();
if ( fileArgs.length === 0 ) {
fileArgs = [ '.' ];
}

// Converts `foo/bar` directory to `foo/bar/**/*.js`
const globArgs = dirGlob( fileArgs, {
extensions: [ 'js', 'jsx', 'ts', 'tsx' ],
} );

const result = spawn(
resolveBin( 'prettier' ),
[ '--write', ...configArgs, ...ignoreArgs, ...pragmaArgs, ...globArgs ],
{ stdio: 'inherit' }
);

process.exit( result.status );
const { getNodeArgsFromCLI, spawnScript } = require( '../utils' );

const { scriptArgs, nodeArgs } = getNodeArgsFromCLI();

const keypress = async () => {
process.stdin.setRawMode( true );
return new Promise( ( resolve ) =>
process.stdin.once( 'data', () => {
process.stdin.setRawMode( false );
resolve();
} )
);
};

( async () => {
const message =
`Please note that the ${ chalk.red(
'format-js'
) } script has been renamed to ${ chalk.green( 'format' ) }.\n` +
"If you're calling it from any of your own scripts, please update them accordingly.\n" +
'Press any key to continiue.';

// eslint-disable-next-line no-console
console.log( message );

await keypress();
spawnScript( 'format', scriptArgs, nodeArgs );
} )();
Loading

0 comments on commit 06fd22e

Please sign in to comment.