@nordcloud/eslint-config-pat

@nordcloud/eslint-config-pat

A TypeScript ESLint ruleset designed for Nordcloud's Platform & Tools

Implementation

• Monorepo friendly: The @nordcloud/eslint-config-pat package has direct dependencies on all the ESLint plugins that it needs. This avoids encumbering each consuming project with the obligation to satisfy a peer dependencies. It also ensures that the installed plugin versions were tested for compatibility together.

• Designed for Prettier: The @nordcloud/eslint-config-pat ruleset is designed to be used together with the Prettier code formatter. Prettier avoids frivolous debates: its defaults have already been debated at length and adopted by a sizeable community.

• Minimal configuration: To use this ruleset, your eslint configuration file (.eslintrc.js or eslint.config.mjs) will need to choose one "profile" and possibly one or two "mixins" that cover special cases

Getting started

Applying the ruleset to your project is quick and easy. You install the package, then create an eslint configuration file and select an appropriate project profile. Optionally you can also add some "mixins" to enable additional rules. Let's walk through those steps in more detail.

1. Install the package

To install the package, do this:

cd your-project-folder
npm install -D eslint typescript prettier @nordcloud/eslint-config-pat

2. Choose one profile

The ruleset currently supports two different "profile" strings, which select lint rules applicable for your project:

• @nordcloud/eslint-config-pat/profile/node - This profile enables lint rules intended for a general Node.js project, typically a web service.

• @nordcloud/eslint-config-pat/profile/web-app - This profile enables lint rules intended for a web application, for example security rules that are relevant to web browser APIs such as DOM. Also use this profile if you are creating a library that can be consumed by both Node.js and web applications.

After choosing a profile, create an .eslintrc.js (eslint before v9) or eslint.config.mjs (eslint after v9) config file that provides the Node.js __dirname context for TypeScript. Add your profile string in the extends field, as shown below:

.eslintrc.js

// This is a workaround for https://github.com/eslint/eslint/issues/3458
require("@nordcloud/eslint-config-pat/patch/modern-module-resolution");

module.exports = {
  extends: ["@nordcloud/eslint-config-pat/profile/node"], // <---- put your profile string here
  parserOptions: { tsconfigRootDir: __dirname },
};

eslint.config.mjs

import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import tsParser from "@typescript-eslint/parser";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});

export default [
  {
    ignores: ["**/*.js"], // <---- ignore files
  },
  ...compat.extends("@nordcloud/eslint-config-pat/profile/web-app"), // <---- put your profile
  {
    languageOptions: {
      parser: tsParser,
      ecmaVersion: 5,
      sourceType: "script",

      parserOptions: {
        tsconfigRootDir: __dirname,
      },
    },

    settings: {
      react: {
        version: "18.13.0", // <---- Your React version
      },
    },

    rules: {
      "unicorn/expiring-todo-comments": "off", // <---- overwrite rules
    },
  },
];

3. Add any relevant mixins

Optionally, you can add some "mixins" to your extends array to opt-in to some extra behaviors.

Important: Your .eslintrc.js "extends" field must load mixins after the profile entry.

@nordcloud/eslint-config-pat/mixins/react

For projects using the React library, the @nordcloud/eslint-config-pat/mixins/react mixin enables some recommended additional rules. These rules are selected via a mixin because they require you to:

• Add "jsx": "react" to your tsconfig.json
• Configure your settings.react.version as shown below. This determines which React APIs will be considered to be deprecated. (If you omit this, the React version will be detected automatically by loading the entire React library into the linter's process, which is costly.)

Add the mixin to your "extends" field like this:

.eslintrc.js

// This is a workaround for https://github.com/eslint/eslint/issues/3458
require("@nordcloud/eslint-config-pat/patch/modern-module-resolution");

module.exports = {
  extends: [
    "@nordcloud/eslint-config-pat/profile/web-app",
    "@nordcloud/eslint-config-pat/mixins/react", // <----
  ],
  parserOptions: { tsconfigRootDir: __dirname },

  settings: {
    react: {
      version: "16.13.0", // <---- Your React version
    },
  },
};

eslint.config.mjs

export default [
  // Other configurations
  ...compat
    .extends("@nordcloud/eslint-config-pat/mixins/react") // <----
    .map((config) => ({
      ...config,
      files: ["src/**/*.ts", "src/**/*.tsx"],
    })),
];

@nordcloud/eslint-config-pat/mixins/vitest

For projects using Vitest testing framework, the @nordcloud/eslint-config-pat/mixins/vitest mixin enables some recommended rules. In order to apply it:

• Configure your settings.env as shown below.

Add the mixin to your "extends" field like this:

.eslintrc.js

// This is a workaround for https://github.com/eslint/eslint/issues/3458
require("@nordcloud/eslint-config-pat/patch/modern-module-resolution");

module.exports = {
  extends: ["@nordcloud/eslint-config-pat/mixins/vitest"], // <----
  parserOptions: { tsconfigRootDir: __dirname },
};

eslint.config.mjs

export default [
  ...compat.extends("@nordcloud/eslint-config-pat/mixins/vitest"),
];

@nordcloud/eslint-config-pat/mixins/cypress

If you are using Cypress testing framework, the @nordcloud/eslint-config-pat/mixins/cypress mixin enables some specific rules.

Add the mixin to your "extends" field like this:

.eslintrc.js

// This is a workaround for https://github.com/eslint/eslint/issues/3458
require("@nordcloud/eslint-config-pat/patch/modern-module-resolution");

module.exports = {
  extends: [
    "@nordcloud/eslint-config-pat/mixins/cypress", // <----
  ],
  parserOptions: { tsconfigRootDir: __dirname },
};

eslint.config.mjs

export default [
  ...compat.extends("@nordcloud/eslint-config-pat/mixins/cypress"), // <----
];

@nordcloud/eslint-config-pat/mixins/node

Mixin dedicated for Node.js servers.

@nordcloud/eslint-config-pat/mixins/react-testing

Enables rules for React Testing Library.

@nordcloud/eslint-config-pat/mixins/playwright

Enables rules from Playwright ESLint plugin.

@nordcloud/eslint-config-pat/mixins/graphql

Enables rules for GraphQL schema and operation files.

server

.eslintrc.js

module.exports = {
  extends: ["@nordcloud/eslint-config-pat/mixins/graphql/schema"], // <----
};

eslint.config.mjs

export default [
  ...compat.extends("@nordcloud/eslint-config-pat/mixins/graphql/schema"), // <----
];

client

.eslintrc.js

module.exports = {
  extends: [
    "@nordcloud/eslint-config-pat/mixins/graphql/operations", // <----
  ],
};

eslint.config.mjs

export default [
  ...compat.extends("@nordcloud/eslint-config-pat/mixins/graphql/operations"), // <----
];

4. Prettier

The @nordcloud/eslint-config-pat ruleset is intended to be used with the Prettier code formatter. For general instructions on setting that up, please refer to the Prettier docs.

cd your-project-folder
npm install -D prettier

Add the prettier config file in the root directory:

prettier.config.js

module.exports = {
  ...require("@nordcloud/eslint-config-pat/prettier.config.js"), // <----
  // Your overrides
};

5. Stylelint

It's possible to use common Stylelint config from this package, you must setup stylelint first:

cd your-project-folder
npm install -D stylelint stylelint-config-recommended stylelint-config-styled-components stylelint-processor-styled-components

Add the stylelint config file in the root directory:

stylelint.config.js

module.exports = {
  extends: "@nordcloud/eslint-config-pat/stylelint.config.js", // <----
  rules: {
    // Your overrides
  },
};

Credits

• Based on @rushstack/eslint-config
• Migration guide for Eslint configuration: Migrate to ESLint 9.x