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

@babbel/eslint-config

v2.2.0

Published

Hierarchical ESLint configuration collection that intends to be simple to use, layered, and shared with others

Downloads

1,521

Readme

NPM module @babbel/eslint-config

Hierarchical ESLint configuration collection that intends to be simple to use, layered, and shared with others. (project maintainers)

Table of Contents

ESLint Configurations

There are multiple configurations you can use in your projects listed below. These are meant to be used in combination with one another. Please note that the base configuration is used by all the others, so there's no need to include that in your configuration unless it's the only one you're using.

The configuration names specified below should be used as items in the extends array in your ESLint configuration file. Each configuration string is clickable to bring you to the configuration details.

It is recommended to not use the browser, isomorphic, and/or node configs simultaneously

Base Configuration Assumptions

  • Airbnb style guide configurations used as a guide

  • Extends the recommended configuration of the following plugins:

  • Native ES module-style imports and exports

    • Imports

      • File extensions required like in the spec (e.g. import { some } from './thing.mjs';)

      • Imports declared at the top of each file in ordered groups separated by an empty line

        1. External (e.g. NPM packages) and Node.js built-in (e.g. node:fs) imports
        2. Internal imports (e.g. from your src/ directory)
        3. Type imports (e.g. import type ...)
        // External Imports
        import { copyFile } from 'node:fs/promises';
        import React from 'react';
        
        // Internal Imports
        import { logger } from './logger.mjs';
        
        // Type Imports
        import type { APIGatewayProxyEvent, APIGatewayProxyStructuredResultV2 } from 'aws-lambda';
        import type { LoginResponse } from './types.mts';
    • Exports

      • Use named exports not default exports
      • Exports all in a single declaration at the bottom of each file (e.g. export { ... })
  • Prettier for file formatting; ESLint does not check for formatting

Example Usage

Here are a few common use cases to get you familiar with using this collection. The following examples should be added to your .eslintrc.json file at the root of your repository.

Browser Environment

{ "extends": ["@babbel/eslint-config/browser"] }

Yep. That's it. 😀

Or if you want to add some custom rules:

{
  "extends": ["@babbel/eslint-config/browser"],
  "rules": {
    /* add your custom rules here */
  }
}

Node.js Environment

{ "extends": ["@babbel/eslint-config/node"] }

I think you're getting the hang of it now...

Browser Environment That Uses React, TypeScript, Jest, and a Custom Rule

{
  "extends": ["@babbel/eslint-config/react-typescript", "@babbel/eslint-config/browser"],
  "rules": {
    "no-console": "off"
  },
  "overrides": [
    {
      "files": ["**/*.test.ts"],
      "extends": "@babbel/eslint-config/jest"
    }
  ]
}

Making Your Own Config From the Base Config 🎓

{
  "extends": ["@babbel/eslint-config"],
  "rules": {
    /* add all your custom rules here */
  }
}

The config export @babbel/eslint-config maps to the base config file lib/eslintBaseConfig.json. You can see how this works by looking for the "." entry in the exports section of this project's package.json; that section defines all the config exports rather than using proxy files (e.g. index.js) at the root of the repository.

For example, if you want to add an export called @babbel/eslint-config/example, you would do the following:

  • Create a new ESLint configuration file called ./lib/eslintExampleConfig.json and set your preferred settings within.
  • For the /example package export to work, we have to add a new entry in the "exports" section in package.json. For this example, we'll add
{
  "exports": {
    ...
    "example": "./lib/eslintExampleConfig.json",
    ...
  }
}
  • File a pull request and wait for a project maintainer to review it. As a reminder, be sure that your new configuration extends eslintBaseConfig.json or a more specific configuration, otherwise the acceptance of your code contributions may be delayed.

Changing This Library

Maintenance of this library requires an exact version of Bun to be installed, specifically the one listed in the packageManager field of package.json. Because there are no well-established version managers for Bun (e.g. like nvm for Node.js), a package.json script was added to overwrite the currently-installed version of Bun with the expected version for this project; Bun's entire install is a single binary, so doing so is a safe operation.

Execute the install script by running

bun run --silent install:bun:expected-version