eslint-config-tidal

eslint-config-tidal

ESLint shareable config for the TIDAL web frontend code style using the new flat config format.

Usage

We export one ESLint configuration for your usage (including Prettier for formatting).

Install the package as a devDependency: eslint-config-tidal along with eslint (and possible any plugins/configs that should be project specific).

Add a root eslint.config.js file, similar to this:

import tidal from '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 */
];

For running from a shell you can add an entry in package.jsons scripts like this:

"lint:code": "eslint . --cache --cache-strategy content",

(which will also cache results, so re-runs are faster)

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. This means you will need to update any scripts that use eslint to be called this way though, like lint-staged and IDE integration (currently not possible for Webstorm: https://youtrack.jetbrains.com/issue/WEB-61117).

VSCode setup

Install the plugin: 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.)

PS: If you needed the workaround for not using "type": "module" above, you will also need:

"eslint.options": {
    "overrideConfigFile": "eslint.config.mjs"
  }

Philosophy

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.

In this package however rules should (ideally) either be "error" or "off".

Development:

In the package you want to lint: (assuming it is in a sibling folder) yarn link ../eslint-config-tidal

Updating dependencies: npx npm-check-updates --interactive --format group