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

@belgattitude/eslint-config-bases

v6.17.0

Published

Composable eslint config bases for [my personal projects](https://github.com/belgattitude) and others.

Downloads

1,678

Readme

@belgattitude/eslint-config-bases

Composable eslint config bases for my personal projects and others.

npm npm

Features

  • Monorepo friendly: Each workspace can have its own config.
  • Composable: Compose your workspace eslint config from pre-defined bases.
  • Peace of mind: Plugins does not need to be installed per workspaces, thx to @rushstack/eslint-patch.
  • Performance!: Plugins enabled on file conventions patterns to increase perf.

Install

Add the following devDependencies to workspace (apps/packages in monorepo) or main project package.json.

yarn add --dev eslint@^8.57.1 @belgattitude/eslint-config-bases prettier
yarn dedupe # optional but recommended

Monorepo tricks

Depending on package manager, you may want to install

yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn dedupe # optional but recommended

in the root package.json or individually in a workspace to prevent issues when multiple versions are installable (ie v8 and v7)

Add a lint command in package.json scripts

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.mjs,.cjs,.mts,.cts"
  }
}

Tips for react/nextjs

Tip: If using nextjs < 15, you might want force resolutions of eslint-plugin-react to ^5.0.0 to avoid conflicts. This can be done using the package.json resolutions (yarn) or overrides (npm, pnpm) field:

{
  "resolutions": {
    "eslint-plugin-react-hooks": "5.0.0"
  }
}

Optional plugins

PS: To keep the size low, if you use the following plugins:

  • graphql: yarn add --dev @graphql-eslint/eslint-plugin
  • mdx: yarn add --dev eslint-plugin-mdx.
  • tailwind: yarn add --dev eslint-plugin-tailwindcss.

In one line

yarn add --dev @graphql-eslint/eslint-plugin \
               eslint-plugin-mdx \
               eslint-plugin-tailwindcss

Usage

Create an ./apps/my-app/.eslintrc.cjs file that extends any of the existing base configs. For example:

// next line only required if you're using a monorepo
require("@belgattitude/eslint-config-bases/patch/modern-module-resolution");

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  // using typescript-eslint v8 ?
  // use projectService - https://typescript-eslint.io/getting-started/typed-linting/  
  parserOptions: {
    projectService: true,
    tsconfigRootDir: __dirname,
  },
  ignorePatterns: ["**/node_modules", "**/.cache", "build", ".next"],
  extends: [
      
    // Group 1: recommended always  
      
    "@belgattitude/eslint-config-bases/typescript",
    "@belgattitude/eslint-config-bases/simple-import-sort",
    "@belgattitude/eslint-config-bases/import-x",
    "@belgattitude/eslint-config-bases/regexp",

    // For tests: use jest or vitest
      
    /// --- "@belgattitude/eslint-config-bases/jest",   
    "@belgattitude/eslint-config-bases/vitest", 
      
    // Group 2: Helps to avoid complexity (cyclomatic...)
    "@belgattitude/eslint-config-bases/sonar",
      
    // Group 3: When working with react  
    "@belgattitude/eslint-config-bases/react",
    "@belgattitude/eslint-config-bases/react-query",
    "@belgattitude/eslint-config-bases/rtl",
      
    // Group 4: Performance related (ie: set vs includes...)
    "@belgattitude/eslint-config-bases/performance",
      
    // Group 5: Various tools (per project)
    // '@belgattitude/eslint-config-bases/tailwind',  
    // "@belgattitude/eslint-config-bases/storybook",
    // "@belgattitude/eslint-config-bases/playwright",
    // "@belgattitude/eslint-config-bases/graphql-schema",
    // "@belgattitude/eslint-config-bases/mdx",  

    // Group 6: Framework specifics
    // ie:
    // - nextjs: 'next/core-web-vitals',
    // - remix:  '@remix-run/eslint-config',
    // ...

    // Group 7: Visual/Sort consistency  
    // Not recommended but can by applied on some projects
    // see https://github.com/azat-io/eslint-plugin-perfectionist
    //  
    // "@belgattitude/eslint-config-bases/perfectionist",
    // "@belgattitude/eslint-config-bases/perfectionist-jsx",


    // Group 8: Formatter  
    // Post configure the prettier base and run prettier
    // without conflicts thx to eslint-plugin-prettier
    "@belgattitude/eslint-config-bases/prettier-plugin",
    // Alternatively to the above if you're already running prettier
    // we can get a speed up by using on eslint-prettier-config
    // "@belgattitude/eslint-config-bases/prettier-config",
  ],
  rules: {
    // Specific global rules for your app or package
    // Might help is next eslint plugin does not locate pages
    // https://nextjs.org/docs/messages/no-html-link-for-pages#pagesdir
    // '@next/next/no-html-link-for-pages': ['error', `${__dirname}/src/pages`],

    // https://typescript-eslint.io/rules/consistent-type-definitions/  
    // '@typescript-eslint/consistent-type-definitions': 'error'  
  },
  overrides: [
    // Specific file rules for your app or package
    /*  
    {
      files: ['next.config.mjs'],
      rules: {
          'import/order': 'off',
          '@typescript-eslint/ban-ts-comment': 'off',
      },
    },
    {
      files: ['tailwind.config.ts'],
      rules: {
          '@typescript-eslint/naming-convention': 'off',
      },
    },    
    */
  ],
};

Ensure your tsconfig.json includes the .eslintrc.cjs file:

{
  "exclude": ["**/node_modules", "**/.*/*"],
  "include": [
    ".eslintrc.*s", // <-- add this
    // rest of the includes
  ]
}

Tip:

  • Prettier: @belgattitude/eslint-config-bases/prettier-plugin and @belgattitude/eslint-config-bases/prettier-config are mutually exclusives. Choose one. The prettier-config suppose that you run prettier independently. The prettier-plugin will run prettier for you. Easiest the prettier-plugin, fastest prettier-config (this mostly depends if you set up and persist caches as well)

  • Performance: Some rules are known to be slow (ie: import/namespace...). Slowest identified rules are disabled depending on context (ie: *.test.tsx? might not need everything). Depending on project it's possible to disable entirely some slow rules (ie: 'import/namespace': 'off'). A good tip run eslint with the TIMING=1 to identify slow rules.

  • If using NextJs < 15, to avoid conflicts on eslint-plugin-react-hooks, ensure either

    • Option 1: Update their eslint-config-next plugin to v15, ie: yarn add --dev eslint-config-next@^15.0.3

    • Option 2: Add an override (npm, pnpm) or resolutions (yarn) field in the root package.json to force the version of eslint-plugin-react-hooks to 5.0.0:

      {
       "resolutions": {
         "eslint-plugin-react-hooks": "5.0.0"
       }
      }

Bases

You can find the bases in ./src/bases.

| Base | Match convention | Scope | |:--------------------------------------------------| :-------------------------------- |:----------------------------------------------------------------| | typescript | all | Naming conventions, consistent imports, import sorting... | | sonar | *.{js,jsx,ts,tsx} | Keep levels of code complexity sane. (excl test and stories) | | regexp | *.{js,jsx,jsx,tsx} | Keep regexp consistent and safer. | | react | *.{jsx,tsx} | Recommendations for react, react-hooks and jsx projects. | | react-query | **/?(*.)+(test).{js,jsx,ts,tsx} | Enforce "recommended" react-query usage. | | jest | **/?(*.)+(test).{js,jsx,ts,tsx} | Catch inconsistencies or error in jest tests. | | vitest | **/?(*.)+(test).{js,jsx,ts,tsx} | Catch inconsistencies or error in jest tests. | | rtl | **/?(*.)+(test).{js,jsx,ts,tsx} | Potential errors / deprecations in react-testing-library tests. | | graphql-schema | *.graphql | Ensure validity of graphql schema files. | | mdx | all | Mdx validation | | storybook | *.stories.{ts,tsx,mdx} | Potential errors / deprecations in stories. | | playwright | **/e2e/**/*.test.{js,ts} | Keep "recommended" playwright usage. | | prettier-plugin | all | Post configure eslint for prettier compatibility. |

Notes:

  • The order is important. Some bases will disable or tune previously defined rules. For example the react base will tune the naming conventions for function components and increase recommended cognitive complexity. The typescript base will also relax conventions for javascript files.

  • Based on filename conventions some rules are relaxed or disabled to avoid false positives and keep a good level of performance. For example the sonar base won't run on test and storybook files. If you work on different conventions the patterns must be updated.

Prettier integration

Two ways to work with prettier.

  • @belgattitude/eslint-config-bases/prettier-plugin - eslint will run prettier under the hood
  • @belgattitude/eslint-config-bases/prettier-config - eslint will just disable some conflicting rules (so you'll need to run prettier after)

The first method is recommended for simplicity. For best perf use the cache option to run eslint.

Tune the behaviour by creating a config in .prettierrc.js

// @ts-check
const {
  getPrettierConfig,
} = require("@belgattitude/eslint-config-bases/helpers");

/**
 * @type {import('prettier').Config}
 */
module.exports = {
  ...getPrettierConfig(),
  overrides: [
    // whatever you need
  ],
};

Tip: You can tune the provided prettier.base.config for your own needs.

Notes

Typescript

Generic typescript project, mostly based on

| Type/Plugin | Comment | |:---------------------------------------------------------------------------------------------------| :--------------------------------------------------------------------------- | | eslint:recommended | The basics for code linting. | | @typescript-eslint/recommended | The basics for typescript. | | @typescript-eslint/consistent-type | Use TS 3.8+ imports/exports, helps with esbuild | | @typescript-eslint/naming-convention | | | eslint-plugin-import | Order imports |

Sonarjs

| Type/Plugin | Comment | | :---------------------------------------------------------------------------------------- | :--------------------------- | | eslint-plugin-sonarjs/recommended | Help to keep complexity sane |

React

| Type/Plugin | Comment | | :---------------------------------------------------------------------------------------------------------------------- | :--------------------------------------- | | eslint-plugin-react/recommended | | | eslint-plugin-react-hooks/recommended | | | eslint-plugin-jsx-a11y/recommended | Helps to produce accessibility-ready jsx |

React-Query

| Type/Plugin | Comment | | :---------------------------------------------------------------------------------------------------------------------- | :--------------------------------------- | | @tanstack/eslint-plugin-query/recommended | |

Vitest

| Type/Plugin | Comment | |:-------------------------------------------------------------------------|:------------------------------| | @vitest/eslint-plugin/recommended | Vitest recommended practices. |

Jest

| Type/Plugin | Comment | | :------------------------------------------------------------------------------------- | :-------------------------- | | eslint-plugin-jest/recommended | Jest recommended practices. |

React Testing Library

| Type/Plugin | Comment | | :------------------------------------------------------------------------------------------------------------ | :------------------------------------ | | eslint-plugin-testing-library/recommended | Ease when using react-testing-library |

Regexp

| Type/Plugin | Comment | | :------------------------------------------------------------------------------------ | :------ | | eslint-plugin-regexp/recommended | |

Mdx

To tune the behaviour, you can add setting in the top level config

module.exports = {
    settings: {
        'mdx/code-blocks': true,
        // optional, if you want to disable language mapper, set it to `false`
        // if you want to override the default language mapper inside, you can provide your own
        'mdx/language-mapper': {},
    },
}

Etc

...