npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nordcloud/eslint-config-pat

v10.0.0

Published

Shareable ESLint config for PAT projects

Downloads

1,691

Readme

@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