@automattic/eslint-plugin-wpvip 0.1.0-0 → 0.3.0

package/.eslintrc.json

@@ -1,6 +1,5 @@
 {
 	"extends": [
-		"plugin:@wordpress/eslint-plugin/recommended",
 		"./configs/base",
 		"./configs/cli",
 		"./configs/react",

package/.nvmrc

@@ -0,0 +1 @@
+16

package/README.md

@@ -1,13 +1,13 @@
 # WordPress VIP ESLint plugin
 
-This is an ESLint plugin to provide WordPress VIP's (internal) JavaScript and TypeScript coding standards. It is designed to extend [`@wordpress/eslint-plugin`](https://github.com/WordPress/gutenberg/tree/trunk/packages/eslint-plugin), but allows you to choose which preset(s) you want to use.
+This is an ESLint plugin to provide WordPress VIP's (internal) JavaScript and TypeScript coding standards. It extends [`@wordpress/eslint-plugin`](https://github.com/WordPress/gutenberg/tree/trunk/packages/eslint-plugin).
 
 ## Installation
 
-Install `eslint` and `@automattic/eslint-plugin-wpvip` (currently using a `beta` dist-tag) to your project.
+Install `eslint` and `@automattic/eslint-plugin-wpvip` to your project.
 
 ```sh
-npm install --save-dev eslint @automattic/eslint-plugin-wpvip@beta
+npm install --save-dev eslint @automattic/eslint-plugin-wpvip
 ```
 
 If your project uses TypeScript, make sure `typescript` is installed as well.
@@ -19,19 +19,16 @@ Create an `.eslintrc.json` file with your desired presets. Here is an example th
 ```
 {
 	"extends": [
-		"plugin:@wordpress/eslint-plugin/recommended",
 		"plugin:@automattic/wpvip/base",
 		"plugin:@automattic/wpvip/react",
 		"plugin:@automattic/wpvip/testing",
-		"plugin:@automattic/wpvip/typescript",
+		"plugin:@automattic/wpvip/typescript"
 	]
 }
 ```
 
 And that's it! Code editors that are configured to work with ESLint will automatically pick up the rulesets and flag any errors or warnings.
 
-See the `configs` directory and [`@wordpress/eslint-plugin`](https://github.com/WordPress/gutenberg/tree/trunk/packages/eslint-plugin) for available presets.
-
 Tip: setup a `lint` npm script in `package.json`:
 
 ```
@@ -41,6 +38,31 @@ Tip: setup a `lint` npm script in `package.json`:
 }
 ```
 
+## Available presets
+
+Use these presets in the `extends` section of your `eslintrc`:
+
+- `plugin:@automattic/wpvip/base`
+- `plugin:@automattic/wpvip/prettier`
+- `plugin:@automattic/wpvip/react`
+- `plugin:@automattic/wpvip/testing`
+- `plugin:@automattic/wpvip/typescript`
+- `plugin:@automattic/wpvip/typescript-migration`
+- `plugin:@automattic/wpvip/typescript-strict`
+
+## Prettier
+
+This plugin comes with support for `prettier`. Configure it by [adding a `.prettierrc`](https://prettier.io/docs/en/configuration.html) to your project and enabling the `@automattic/wpvip/prettier` preset:
+
+```
+{
+	"extends": [
+		"plugin:@automattic/wpvip/base",
+		"plugin:@automattic/wpvip/prettier"
+	]
+}
+```
+
 ## Migrating
 
 Changing linter rules can be tricky and lead to huge PRs. To ease adoption, we can add [eslines](https://github.com/Automattic/eslines) to our project, to turn lint errors into warnings.

package/configs/base.js

@@ -3,6 +3,7 @@ module.exports = {
 		node: true,
 	},
 	extends: [
+		'plugin:@wordpress/eslint-plugin/recommended-with-formatting',
 		'eslint:recommended',
 		'plugin:json/recommended',
 		'plugin:security/recommended',
@@ -33,6 +34,10 @@ module.exports = {
 			},
 		],
 
+		// Maximum cyclomatic complexity must not be above 20.
+		complexity: 'error',
+
+		// Files must end in a newline.
 		'eol-last': [ 'error', 'always' ],
 
 		// Identifiers should be between 2 and 40 characters in length.
@@ -81,13 +86,6 @@ module.exports = {
 		// Arrow functions should be used for function arguments and callbacks.
 		'prefer-arrow-callback': 'warn',
 
-		// Temporarily navigate Gutenberg bug that too-eagerly loads prettier config:
-		// https://github.com/WordPress/gutenberg/pull/40634
-		//
-		// Once this is released and available on NPM, we can remove `prettier` as
-		// a devDependency and remove this rule.
-		'prettier/prettier': 0,
-
 		// `parseInt` calls must always supply a radix argument.
 		radix: 'error',
 

package/configs/index.js

@@ -1,7 +1,10 @@
 module.exports = {
 	base: require( './base' ),
 	cli: require( './cli' ),
+	prettier: require( './prettier' ),
 	react: require( './react' ),
 	testing: require( './testing' ),
 	typescript: require( './typescript' ),
+	'typescript/migration': require( './typescript-migration' ),
+	'typescript/strict': require( './typescript-strict' ),
 };

package/configs/prettier.js

@@ -0,0 +1,13 @@
+module.exports = {
+	extends: [
+		'plugin:prettier/recommended',
+	],
+	/**
+	 * Please include a short description of the rule. For rules that downgrade or
+	 * disable errors, include a brief justification or reasoning.
+	 */
+	rules: {
+		// Raise Prettier errors as ESLint errors.
+		'prettier/prettier': 'error',
+	},
+};

package/configs/typescript-migration.js

@@ -0,0 +1,23 @@
+/**
+ * TypeScript migration rules
+ * ==========================
+ * These rules are intended to extend the base `typescript` rules and will help
+ * you migrate an existing project to TypeScript.
+ */
+module.exports = {
+	/**
+	 * Please include a short description of the rule. For rules that downgrade or
+	 * disable errors, include a brief justification or reasoning.
+	 *
+	 * NOTE: Before disabling a rule, first consider keeping it and/or downgrading
+	 * it to a warning. This allows the rule to surface helpful advice in your
+	 * editor and nudge you towards best practices, but will not fail your lint
+	 * step while you work to migrate your codebase.
+	 *
+	 * An example is the `@typescript-eslint/no-explicit-any` rule, which is set
+	 * to `warning` in the `@typescript-eslint/recommended` preset and is
+	 * intentionally not overridden here.
+	 */
+	rules: {},
+};
+

package/configs/typescript-strict.js

@@ -0,0 +1,20 @@
+/**
+ * TypeScript strict rules
+ * =======================
+ * These rules are intended to extend the base `typescript` rules and will help
+ * you enforce additional best practices for TypeScript projects.
+ */
+module.exports = {
+	extends: [
+		'plugin:@typescript-eslint/recommended-requiring-type-checking',
+	],
+	/**
+	 * Please include a short description of the rule. For rules that downgrade or
+	 * disable errors, include a brief justification or reasoning.
+	 */
+	rules: {
+		// TypeScript `any` type must not be used. This is a warning in the base
+		// config, and is elevated to an error here.
+		'@typescript-eslint/no-explicit-any': 'error',
+	},
+};

package/configs/typescript.js

@@ -1,3 +1,16 @@
+/**
+ * Base TypeScript rules
+ * =====================
+ * These rules are intended to be used for all VIP TypeScript projects. They can
+ * be extended by `typescript-migration` (to make migration to TypeScript
+ * easier) and `typescript-strict` (to enforce additional best practices).
+ *
+ * Note that, if you also use the `@wordpress/eslint-plugin/recommended` preset,
+ * a number of TypeScript rules are automattically added whenever TypeScript is
+ * installed as a dependency of your project:
+ *
+ * https://github.com/WordPress/gutenberg/blob/trunk/packages/eslint-plugin/configs/recommended.js
+ */
 module.exports = {
 	extends: [
 		'plugin:@typescript-eslint/recommended',
@@ -6,6 +19,25 @@ module.exports = {
 	 * Please include a short description of the rule. For rules that downgrade or
 	 * disable errors, include a brief justification or reasoning.
 	 */
+	ignorePatterns: [ '**/*.d.ts' ],
+	overrides: [
+		{
+			files: [ '**/*.ts', '**/*.tsx' ],
+			parser: '@typescript-eslint/parser',
+			rules: {
+				// Prefer the TypeScript versions of some rules.
+				'no-duplicate-imports': 'off',
+				'@typescript-eslint/no-duplicate-imports': 'error',
+				'no-shadow': 'off',
+				'@typescript-eslint/no-shadow': 'error',
+
+				// Don't require redundant JSDoc types in TypeScript files.
+				'jsdoc/require-param-type': 'off',
+				'jsdoc/require-returns-type': 'off',
+			},
+		},
+	],
+	plugins: [ '@typescript-eslint' ],
 	rules: {
 		// Elevate the unused vars rule to an error, but allow it to be suppressed
 		// with a naming convention.
@@ -17,4 +49,11 @@ module.exports = {
 			},
 		],
 	},
+	settings: {
+		'import/resolver': {
+			node: {
+				extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
+			},
+		},
+	},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/eslint-plugin-wpvip",
-  "version": "0.1.0-0",
+  "version": "0.3.0",
   "description": "ESLint plugin for internal WordPress VIP projects",
   "main": "index.js",
   "scripts": {
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/Automattic/eslint-config-wpvip#readme",
   "dependencies": {
-    "@wordpress/eslint-plugin": "12.1.0",
+    "@wordpress/eslint-plugin": "12.8.0",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-no-async-foreach": "0.1.1",
     "eslint-plugin-security": "1.5.0"
@@ -38,10 +38,10 @@
     "eslint": ">=8"
   },
   "devDependencies": {
-    "@babel/preset-env": "7.16.11",
-    "eslint": "8.14.0",
-    "jest": "28.0.1",
-    "prettier": "2.6.2",
-    "typescript": "4.6.3"
+    "@babel/preset-env": "7.18.9",
+    "eslint": "8.20.0",
+    "jest": "28.1.3",
+    "prettier": "2.7.1",
+    "typescript": "4.7.4"
   }
 }