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

@neutrinojs/airbnb-base

v9.5.0

Published

Neutrino preset for adding Airbnb's base JS ESLint config, following the Airbnb styleguide

Downloads

350

Readme

Neutrino Airbnb Base Preset

@neutrinojs/airbnb-base is a Neutrino preset that supports linting JavaScript projects with Airbnb's base ESLint config, following the Airbnb styleguide.

NPM version NPM downloads

Features

  • Zero upfront configuration necessary to start linting your project
  • Modern Babel knowledge supporting ES modules, JSX (when used with React preset), Web and Node.js apps
  • Highly visible during development, fails compilation when building for production
  • Easily extensible to customize your project as needed

Note: If you are building a React project, you should probably use @neutrinojs/airbnb instead.

Requirements

  • Node.js 10+
  • Yarn v1.2.1+, or npm v5.4+
  • Neutrino 9 and one of the Neutrino build presets
  • webpack 4
  • ESLint 6 or 7

Quickstart

The fastest way to get started is by using the create-project scaffolding tool. See the Create new project docs for more details.

Don’t want to use the CLI helper? No worries, we have you covered with the manual installation.

Manual Installation

First follow the manual installation instructions for your chosen build preset.

@neutrinojs/airbnb-base can be installed via the Yarn or npm clients. Inside your project, make sure @neutrinojs/airbnb-base and eslint are development dependencies. You will also be using another Neutrino preset for building your application source code.

Yarn

❯ yarn add --dev @neutrinojs/airbnb-base eslint

npm

❯ npm install --save-dev @neutrinojs/airbnb-base eslint

After that, edit your project's .neutrinorc.js to add the preset for linting before your build preset. For example, when building your project using @neutrinojs/web:

const airbnbBase = require('@neutrinojs/airbnb-base');
const web = require('@neutrinojs/web');

module.exports = {
  options: {
    root: __dirname,
  },
  use: [airbnbBase(), web()],
};

Start the app, then check your console for any linting errors. If everything is successful, you should see no errors in the console. ESLint errors visible during development are reported, but will still continue to build and serve your project. ESLint errors during build will not build the project, and will cause the command to fail.

Yarn

❯ yarn start

ERROR in ./src/index.js
Module Error (from ./node_modules/eslint-loader/index.js):

error: Missing semicolon (semi) at src/index.js:35:51:
  33 |
  34 |
> 35 | const MOUNT_NODE = document.getElementById("root")
     |                                                   ^
  36 |
  37 |
  38 |

1 error found.
1 error potentially fixable with the `--fix` option.

npm

❯ npm start

ERROR in ./src/index.js
Module Error (from ./node_modules/eslint-loader/index.js):

error: Missing semicolon (semi) at src/index.js:35:51:
  33 |
  34 |
> 35 | const MOUNT_NODE = document.getElementById("root")
     |                                                   ^
  36 |
  37 |
  38 |

1 error found.
1 error potentially fixable with the `--fix` option.

Project Layout

@neutrinojs/airbnb-base follows the standard project layout specified by Neutrino. This means that by default all project source code should live in a directory named src in the root of the project.

Building

@neutrinojs/airbnb-base will cause errors to fail your build when NODE_ENV is not 'development'. If you want to ease introduction of this linting preset to your project, consider only adding it to your use list during development until all linting errors have been resolved.

❯ yarn build

ERROR in ./src/index.js
Module Error (from ./node_modules/eslint-loader/index.js):

error: Missing semicolon (semi) at src/index.js:35:51:
  33 |
  34 |
> 35 | const MOUNT_NODE = document.getElementById("root")
     |                                                   ^
  36 |
  37 |
  38 |

1 error found.
1 error potentially fixable with the `--fix` option.

Example: ease linting into project by only enabling when NODE_ENV=development (ie: --mode development):

const airbnbBase = require('@neutrinojs/airbnb-base');
const web = require('@neutrinojs/web');

module.exports = {
  options: {
    root: __dirname,
  },
  use: [process.env.NODE_ENV === 'development' ? airbnbBase() : false, web()],
};

Middleware options

This preset uses the same middleware options as @neutrinojs/eslint. If you wish to customize what is included, excluded, or any ESLint options, you can provide an options object with the middleware and this will be merged with our internal defaults for this preset.

Example: Extend from a custom configuration (it will be applied after Airbnb) and turn off semicolons from being required.

const airbnbBase = require('@neutrinojs/airbnb-base');

module.exports = {
  options: {
    root: __dirname,
  },
  use: [
    airbnbBase({
      eslint: {
        // For supported options, see:
        // https://github.com/webpack-contrib/eslint-loader#options
        // https://eslint.org/docs/developer-guide/nodejs-api#cliengine
        // The options under `baseConfig` correspond to those
        // that can be used in an `.eslintrc.*` file.
        baseConfig: {
          extends: ['my-custom-config'],
          rules: {
            'babel/semi': 'off',
          },
        },
      },
    }),
  ],
};

Exposing generated lint configuration via .eslintrc.js

@neutrinojs/eslint, from which this preset inherits, provides an .eslintrc() output handler for generating the ESLint configuration in a format suitable for use in an .eslintrc.js file. This allows the ESLint CLI to be used outside of building the project, and for IDEs and text editors to provide linting hints/fixes.

Create a .eslintrc.js file in the root of the project, containing:

// .eslintrc.js
const neutrino = require('neutrino');

module.exports = neutrino().eslintrc();

This .eslintrc.js configuration will be automatically used when running the ESLint CLI. For convenience a lint script alias can be added to your package.json, allowing linting to be run via yarn lint or npm run lint:

{
  "scripts": {
    "lint": "eslint --cache --format codeframe --ext mjs,jsx,js src"
  }
}

Projects may face a problem when their editor or IDE lints all files and highlights errors that were normally excluded from source, i.e. Neutrino's include and exclude options. This is because the ESLint CLI does not have a way to specify included and excluded files from the .eslintrc.js configuration. Instead you will need to create an .eslintignore file that controls which files should be excluded from linting.

Using your own .eslintrc.*

If instead you would prefer to use your own non-generated .eslintrc.* file, set useEslintrc to true. This will cause @neutrinojs/airbnb-base to only set the loader-specific configuration defaults, and leave all other linting configuration to be managed by the standalone .eslintrc.* file.

See the @neutrinojs/eslint documentation for more details.

Customizing

To override the lint configuration, start with the documentation on customization. @neutrinojs/airbnb-base creates some conventions to make overriding the configuration easier once you are ready to make changes.

Rules

The following is a list of rules and their identifiers which can be overridden:

| Name | Description | NODE_ENV | | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | lint | By default, lints JS and JSX files from the src and test directories using ESLint. Contains a single loader named eslint. This is inherited from @neutrinojs/eslint. | all |

Contributing

This preset is part of the neutrino repository, a monorepo containing all resources for developing Neutrino and its core presets and middleware. Follow the contributing guide for details.