Feature/new-flat-config

.github/workflows/nodejs.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x, 20.x]
     steps:
     - uses: actions/checkout@v1
     - name: Use Node.js ${{ matrix.node-version }}

.vscode/settings.json

@@ -1,12 +1,9 @@
 {
-  "[javascript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  },
-  "[json]": {
+  "[javascript][typescript][typescriptreact][json]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "editor.formatOnSave": false
+  "eslint.experimental.useFlatConfig": true
 }

README.md

@@ -1,45 +1,70 @@
 # eslint-config-tidal
 
-[![Build Status](https://travis-ci.org/tidal-engineering/eslint-config-tidal.svg?branch=master)](https://travis-ci.org/tidal-engineering/eslint-config-tidal)
-[![Codacy grade](https://img.shields.io/codacy/grade/e20818172062471ebc0c1b69e5ea0887.svg 'Codacy grade')](https://www.codacy.com/app/karlsson/eslint-config-tidal)
 [![NPM downloads](https://img.shields.io/npm/dm/eslint-config-tidal.svg 'NPM downloads')](https://www.npmjs.com/package/eslint-config-tidal)
 [![NPM version](https://img.shields.io/npm/v/eslint-config-tidal.svg 'NPM version')](https://www.npmjs.com/package/eslint-config-tidal)
-[![Node version](https://img.shields.io/node/v/eslint-config-tidal.svg 'Node version')](https://www.npmjs.com/package/eslint-config-tidal)
-[![Dependency status](https://img.shields.io/david/tidal-engineering/eslint-config-tidal.svg 'Dependency status')](https://david-dm.org/tidal-engineering/eslint-config-tidal)
 
-> ESLint [shareable config](http://eslint.org/docs/developer-guide/shareable-configs.html) for the TIDAL Code Style.
+
+> ESLint [shareable config](http://eslint.org/docs/developer-guide/shareable-configs.html) for the TIDAL web frontend code style using the new [flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new).
 
 ## Usage
 
-We export five ESLint configurations for your usage.
+We export one ESLint configuration for your usage (including Prettier for formatting).
 
-### eslint-config-tidal
+Install the package as a `devDependency`: `@tidal-music/eslint-config-tidal` along with `eslint` (and possible any plugins/configs that should be project specific).
 
-Our default export contains all of our base ESLint rules. It requires `eslint` and `eslint-plugin-import`.
+Add a root `eslint.config.js` file, similar to this:
 
-1. Install the correct versions (check `peerDependencies`) of each package:
+```
+import tidal from '@tidal-music/eslint-config-tidal';
+
+/** @type { import("eslint").Linter.FlatConfig[] } */
+export default [
+  ...tidal,
+  {
+    files: ['*.js', '**/*.js', '**/*.ts', '**/*.tsx'],
+  },
+  {
+    ignores: [
+      'node_modules/*',
+      /* Build output folders, etc */
+    ],
+  },
+  /* Add any overrides here */
+];
+```
 
-```sh
-npm install --save-dev eslint-config-tidal eslint-plugin-import
+For running from a shell you can add an entry in `package.json`s `scripts` like this:
+```
+"lint:code": "eslint . --cache --cache-strategy content",
 ```
+(which will also cache results, so re-runs are faster)
 
-2. Add `"extends": "tidal"` to your `.eslintrc`.
+This depends on your `package.json` including `"type": "module"`. If that is not possible, you can work around that by renaming your `eslint.config.js` to: `eslint.config.mjs` and launching it like this instead: `ESLINT_USE_FLAT_CONFIG=true eslint . --config eslint.config.mjs`.
 
-### eslint-config-tidal/flow
+### VSCode setup
 
-This entry point enables the linting rules for Flow. To use, add `"extends": ["tidal", "tidal/flow"]` to your `.eslintrc`.
-Additional required packages: `eslint-plugin-flowtype`.
+Install the plugin: [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+
+And then ensure you have this in your workspace or user settings:
+```
+  "[javascript][typescript][typescriptreact][json]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.experimental.useFlatConfig": true
+```
+(This will auto-fix and auto format the files on save.)
 
-### eslint-config-tidal/react
+## Philosophy
 
-This entry point enables the linting rules for React (requires v16.8+). To use, add `"extends": ["tidal", "tidal/react"]` to your `.eslintrc`.
-Additional required packages: `eslint-plugin-react`, `eslint-plugin-react-hooks`, `eslint-plugin-jest`, `eslint-plugin-jsx-a11y`.
+This package is pretty opinionated, if some rules are not suitable in your context they can be disable in your `eslint.config.js` or set to warnings instead of errors, if it makes sense to push for them eventually.
 
-### eslint-config-tidal/typescript
+In this package however rules should (ideally) either be "error" or "off".
 
-This entry point enables the linting rules for Typescript. To use, add `"extends": ["tidal", "tidal/typescript", "plugin:import/typescript"]` to your `.eslintrc`.
-Additional required packages: `@typescript-eslint/eslint-plugin`, `@typescript-eslint/parser`.
 
-### eslint-config-tidal/legacy
+## Development:
 
-Lints ES5 and below. To use, add `"extends": ["tidal", "tidal/legacy"]` to your `.eslintrc`.
+In the package you want to lint: (assuming it is in a sibling folder)
+`yarn link ../eslint-config-tidal`

eslint.config.js

@@ -0,0 +1,24 @@
+import globals from 'globals';
+
+import tidal from './index.js';
+
+/** @type { import("eslint").Linter.FlatConfig[] } */
+export default [
+  ...tidal,
+  {
+    files: ['*.js', '**/*.js', '**/*.ts', '**/*.tsx'],
+  },
+  {
+    ignores: ['test/cases/*'],
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+    settings: {
+      'import/internal-regex': '^@tidal/',
+    },
+  },
+];

global.d.ts

@@ -0,0 +1,2 @@
+// This is a workaround to allow importing any JS package without TS types
+declare module '*';

index.js

@@ -1,17 +1,37 @@
-module.exports = {
-  extends: [
-    './rules/best-practices',
-    './rules/errors',
-    './rules/es6',
-    './rules/imports',
-    './rules/node',
-    './rules/strict',
-    './rules/variables',
-    './rules/style',
-  ].map(require.resolve),
-  parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-  },
-  rules: {},
-};
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import perfectionistNatural from 'eslint-plugin-perfectionist/configs/recommended-natural';
+
+import baseRuleSet from './rule-sets/base.js';
+import cypressRuleSet from './rule-sets/cypress.js';
+import dtsRuleSet from './rule-sets/dts.js';
+import nodeRuleSet from './rule-sets/node.js';
+import unitTestRuleSet from './rule-sets/unit-test.js';
+
+// mimic CommonJS variables (in ESM)
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+/** @type { import("eslint").Linter.FlatConfig[] } */
+export default [
+  js.configs.recommended,
+  compat.extends('eslint-config-xo/browser')[0],
+  compat.extends('eslint-config-xo-react')[0],
+  eslintConfigPrettier,
+  perfectionistNatural,
+  // Base Tidal rule set:
+  baseRuleSet,
+  // Following are some file type specific overrides:
+  cypressRuleSet,
+  dtsRuleSet,
+  nodeRuleSet,
+  unitTestRuleSet,
+];

internal-rules/index.js

@@ -0,0 +1,7 @@
+import { requireCoverageIgnoreReason } from './require-coverage-ignore-reason.js';
+
+export default {
+  rules: {
+    'require-coverage-ignore-reason': requireCoverageIgnoreReason,
+  },
+};

internal-rules/require-coverage-ignore-reason.js

@@ -0,0 +1,27 @@
+'use strict';
+// Extracted from: https://github.com/graphql/graphql-js/pull/3388 related to:
+// https://github.com/istanbuljs/eslint-plugin-istanbul/pull/17
+// Fixed reason length check and converted to ESM.
+
+export function requireCoverageIgnoreReason(context) {
+  const istanbulRegExp = /^\s*istanbul\s+ignore\s+(if|else|next|file)\s+/;
+  return {
+    Program() {
+      const sourceCode = context.getSourceCode();
+
+      for (const node of sourceCode.getAllComments()) {
+        const comment = node.value;
+
+        if (comment.match(istanbulRegExp)) {
+          const reason = comment.replace(istanbulRegExp, '');
+          if (reason.length === 0) {
+            context.report({
+              message: 'Add a reason why code coverage should be ignored',
+              node,
+            });
+          }
+        }
+      }
+    },
+  };
+}