Merge pull request #160 from Automattic/add/prettier-config

Export prettierrc

.eslintrc.js

@@ -3,6 +3,6 @@
  */
 
 module.exports = {
-	extends: ['plugin:@automattic/wpvip/recommended'],
+	extends: [ 'plugin:@automattic/wpvip/recommended' ],
 	root: true,
 };

.prettierrc

@@ -1,5 +1 @@
-{
-  "bracketSpacing": true,
-  "singleQuote": true,
-  "useTabs": true
-}
+"./prettierrc.js"

README.md

@@ -33,8 +33,6 @@ You may also wish to define an `.eslintignore` file if there are files or paths
 
 The "recommended" config includes rules for JavaScript, TypeScript, Jest, and React, including rules related to formatting and white space. It is intended to be strict! Opinionated defaults keep our codebases consistent and reduce the friction we experience when context-switching between projects.
 
-If your project has installed [Prettier](https://prettier.io/) as a dependency, then many formatting tasks will be delegated to it (via `eslint-plugin-prettier`). You are encouraged to define your own [`.prettierrc` configuration file](https://prettier.io/docs/en/configuration.html) to fine-tune your project’s formatting.
-
 Of course, this recommended config may not be ideal for every project, so feel free to "build your own" using the available modular configs. The recommended config is equivalent to:
 
 ```js
@@ -52,6 +50,22 @@ module.exports = {
 
 Note that the order of configs can matter, since they can contain overrides. It is particularly important to add the `prettier` config last.
 
+### Prettier
+
+Install [WP Prettier](https://github.com/Automattic/wp-prettier) to benefit from additional formatting rules:
+
+```sh
+npm i --save-dev --save-exact "prettier@npm:wp-prettier@latest"
+```
+
+This repo also provides a Prettier config, which you can use with the following `.prettierrc`:
+
+```json
+"@automattic/eslint-plugin-wpvip/prettierrc"
+```
+
+For maximum benefit, see [Prettier's documentation on enabling format-on-save in your editor](https://prettier.io/docs/en/editors.html). This enables you to concentrate on coding while Prettier handles formatting.
+
 ## CLI
 
 The `cli` config allows certain behaviors that are usually against best practice but are useful in a codebase that produces a CLI tool:

__fixtures__/javascript.js

@@ -11,17 +11,16 @@ new RegExp( dosPattern );
 
 function x( y ) {
 	return xIsACoolParam;
-};
+}
 
 let things = {
 	a: 13,
 	cd: 99.99,
 	e9: 6e99,
-	f7: (  ) => ['x'],
+	f7: () => [ 'x' ],
 	12: '32',
 	ff: xx => xx,
-	gg: ( {fds, }) =>
-        fds,
+	gg: ( { fds } ) => fds,
 };
 
 export async function doThingsInSequence() {
@@ -31,7 +30,7 @@ export async function doThingsInSequence() {
 }
 
 export function doThingsInSequenceWithoutWaiting() {
-	Object.keys( things ).forEach( async ( thing ) => {
+	Object.keys( things ).forEach( async thing => {
 		await Promise.resolve( thing );
 	} );
 }
@@ -43,4 +42,4 @@ export function shadow() {
 
 nonExistent();
 
-// There is intentionally no new line at the end of this file to hit [eol-last](https://eslint.org/docs/rules/eol-last).
+// There is intentionally no new line at the end of this file to hit [eol-last](https://eslint.org/docs/rules/eol-last).

__fixtures__/typescript.ts

@@ -26,10 +26,7 @@ export default {
 	things,
 };
 
-function someCoolDecorator(
-	totallyRadArgument,
-	value
-): typeof totallyRadArgument {
+function someCoolDecorator( totallyRadArgument, value ): typeof totallyRadArgument {
 	return totallyRadArgument;
 }