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

@heinzelman-labs/eslint-config-typescript

v2.1.0

Published

Heinzelman TypeScript ESLint configuration based on @typescript-eslint/eslint-plugin

Downloads

41

Readme

@heinzelman-labs/eslint-config-typescript

npm version total downloads monthly downloads license

A personal ESLint shareable config for TypeScript projects based on the recommended rules defined by @typescript-eslint/eslint-plugin 5.59.11.

TypeScript rules only apply to .ts and .tsx files so that this config also works for mixed JS/TS code bases.

References

At a minimum (using the fast config), this config extends the eslint-recommended and recommended configs provided by @typescript-eslint/eslint-plugin 5.59.11.

While eslint-recommended disables such Eslint rules that are already handled natively by TypeScript, recommended contains the generally recommended rule configs for TypeScript projects.

The default config provided by this package additionally extends recommended-requiring-type-checking.

Source code of the package can be found on ...

Installation

yarn

yarn add -D @heinzelman-labs/eslint-config-typescript

npm

npm i -D @heinzelman-labs/eslint-config-typescript

Usage

Basic .eslintrc.js with type-checking

The default config provided by @heinzelman-labs/eslint-config-typescript does not only extend from @typescript-eslint/recommended but also from @typescript-eslint/recommended-requiring-type-checking. These highly valuable rules require type information, thus you will need to add a tsconfig.json to your project directory.

module.exports = {
    extends: [
        // Typically either using base or React Eslint config ...
        '@heinzelman-labs/eslint-config-react',
        // ... in tandem with the TypeScript Eslint config.
        '@heinzelman-labs/eslint-config-typescript'
    ],
    rules: {
        // Customize base / React rules ...
    },
    overrides: [
        {
            files: ['*.ts', '*.mts', '*.cts', '*.tsx'],
            rules: {
                // Customize TypeScript rules ...
            }
        },
        {
            files: ['*.tsx'],
            rules: {
                // Customize rules exclusively for TypeScript components ...
            }
        }
    ],
    env: {
        // Environments as needed ...
    }
};

Basic .eslintrc.js without type-checking

In order to only use fast feedback rules which operate purely based on syntax, extend from @heinzelman-labs/eslint-config-typescript/fast. This may come in handy when dealing with really large codebases or you feel that ESLint is slow when it's run by your IDE.

  module.exports = {
    // ...
    extends: [
-       '@heinzelman-labs/eslint-config-typescript'
+       '@heinzelman-labs/eslint-config-typescript/fast'
    ]
    // ...
  };

Mono-Repo .eslintrc.js

For mono-repos using either @heinzelman-labs/eslint-config-base or @heinzelman-labs/eslint-config-react don't forget to add your package directories.

const { resolve } = require('path');

module.exports = {
    // ...
    rules: {
        'import/no-extraneous-dependencies': ['error', { 
            packageDir: [
                __dirname,
                resolve(__dirname, 'packages/foo'),
                resolve(__dirname, 'packages/bar')
            ]
        }]
    }
    // ...
};

CLI

I would recommend to not use glob patterns or filenames, but to use directories to specify target files where possible. Then use the --ext option to define relevant file extensions. This way ESLint will not complain if you end up not having a certain file type among your sources anymore, e.g. .js. You may also use .eslintignore to exclude files from the result set as needed.

eslint ./src --ext .js,.ts,.tsx

Changes compared to eslint-config-base, eslint-config-react, @typescript-eslint/eslint-plugin

Although this config does neither actively extend @heinzelman-labs/eslint-config-base nor @heinzelman-labs/eslint-config-react, it does adjust some of their rules because I personally often use one of them in tandem with @heinzelman-labs/eslint-config-typescript and some of their rules just don't make sense in a TypeScript context.

Difference from @heinzelman-labs/eslint-config-base

  // Can be turned off for TypeScript projects because TypeScript
  // does its own lookups.
- 'import/no-unresolved': ['error', { 
-     commonjs: true, 
-     caseSensitive: true 
- }],
+ 'import/no-unresolved': 'off',

  // Rule must be disabled as it can report incorrect errors. 
  // `@typescript-eslint/no-use-before-define` is used instead.
- 'no-use-before-define': ['error', { 
-     functions: false, 
-     classes: true, 
-     variables: false 
- }],
+ 'no-use-before-define': 'off'

Note: A number of other rules get disabled or modified by eslint-recommended, recommended and recommended-requiring-type-checking.

Difference from @heinzelman-labs/eslint-config-react

  // Typically not using PropTypes in TypeScript projects, so only 
  // error on components that have a propTypes block declared.
  'react/prop-types': ['error', {
      ignore: [],
      customValidators: [],
-     skipUndeclared: false,
+     skipUndeclared: true
  }]

Difference from @typescript-eslint/eslint-plugin

eslint-recommended

No changes.

recommended

- '@typescript-eslint/no-empty-function': 'error',
+ '@typescript-eslint/no-empty-function': ['error', {
+     allow: [
+         'arrowFunctions',
+         'functions',
+         'methods'
+     ]
+ }],

- '@typescript-eslint/no-unused-vars': 'warn',
+ '@typescript-eslint/no-unused-vars': ['error', {
+     vars: 'all',
+     varsIgnorePattern: '^React$',
+     args: 'after-used',
+     ignoreRestSiblings: true
+ }]

recommended-requiring-type-checking

No changes.

Additional rule configs

'@typescript-eslint/explicit-function-return-type': ['error', {
    allowExpressions: true
}],

'@typescript-eslint/no-use-before-define': ['error', {
    functions: false,
    classes: true,
    variables: false,
    enums: true,
    typedefs: false,
    ignoreTypeReferences: true
}]

License

MIT License