neutrino-dev/docs/presets/neutrino-preset-airbnb-base

Neutrino Airbnb Preset

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

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

Requirements

• Node.js v6.9+
• Yarn or npm client
• Neutrino v4, Neutrino build preset

Installation

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

Yarn

❯ yarn add --dev neutrino-preset-airbnb-base

npm

❯ npm install --save-dev neutrino-preset-airbnb-base

Project Layout

neutrino-preset-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.

Quickstart

After adding the Airbnb preset to your Neutrino-built project, edit your project's package.json to add the preset for linting before your build preset. For example, if you are building your project using neutrino-preset-web:

{
  "scripts": {
    "start": "neutrino start --presets neutrino-preset-airbnb-base neutrino-preset-web",
    "build": "neutrino build --presets neutrino-preset-airbnb-base neutrino-preset-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.

Yarn

❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed

ERROR in ./src/index.js

/web/src/index.js
  7:1   warning  Unexpected console statement                no-console
  7:14  error    A space is required after '{'               babel/object-curly-spacing
  7:20  error    Missing space before value for key 'hello'  key-spacing
  7:27  error    A space is required before '}'              babel/object-curly-spacing

✖ 4 problems (3 errors, 1 warning)

npm

❯ npm start

✔ Development server running on: http://localhost:5000
✔ Build completed

ERROR in ./src/index.js

/web/src/index.js
  7:1   warning  Unexpected console statement                no-console
  7:14  error    A space is required after '{'               babel/object-curly-spacing
  7:20  error    Missing space before value for key 'hello'  key-spacing
  7:27  error    A space is required before '}'              babel/object-curly-spacing

✖ 4 problems (3 errors, 1 warning)

Building

neutrino-preset-airbnb-base will cause errors to fail your build when creating a bundle via neutrino build. If you want to ease introduction of this linting preset to your project, consider only adding it to your preset list for neutrino start until all linting errors have been resolved.

❯ yarn build
clean-webpack-plugin: /web/build has been removed.
Build completed in 1.287s

./src/index.js

/Users/eli/code/neutrino-examples/web/src/index.js
  6:1   warning  Unexpected console statement            no-console
  6:14  error    A space is required after '{'           babel/object-curly-spacing
  6:16  error    Missing space before value for key 'a'  key-spacing
  6:17  error    A space is required before '}'          babel/object-curly-spacing

✖ 4 problems (3 errors, 1 warning)

 @ multi ./src/index.js
./src/index.js
Module build failed: Error: Module failed because of a eslint error.

    at lint (/Users/eli/code/neutrino-dev/packages/neutrino-preset-airbnb-base/node_modules/eslint-loader/index.js:115:17)
    at Object.module.exports (/Users/eli/code/neutrino-dev/packages/neutrino-preset-airbnb-base/node_modules/eslint-loader/index.js:181:3)
 @ multi ./src/index.js
error Command failed with exit code 1.

Customizing

To override the build configuration, start with the documentation on customization. neutrino-preset-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:

• lint: Lints JS and JSX files from the src directory using ESLint. Contains a single loader named eslint.

Simple customization

By following the customization guide and knowing the rule and loader IDs above, you can override and augment the linting configuration directly from package.json. Note: Using the simple customization approach for linting changes can be verbose.

Example: Turn off semicolons from being required as defined by the Airbnb rules.

{
  "config": {
    "neutrino": {
      "module": {
        "rule": {
          "lint": {
            "loader": {
              "eslint": {
                "options": {
                  "rules": {
                    "semi": "off"
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Again, using simple customization for linting can be verbose. Consider using advanced customization if it suits your project.

Advanced configuration

By following the customization guide and knowing the rule and loader IDs above, you can override and augment the build by creating a JS module which overrides the config.

Example: Turn off semicolons from being required as defined by the Airbnb rules.

const merge = require('deepmerge');

module.exports = neutrino => {
  neutrino.config
    .rule('lint')
    .loader('eslint', ({ options }) => {
      return {
        options: merge(options, {
          rules: {
            semi: 'off'
          }
        })
      };
    });
};

eslintrc Config

neutrino-lint-airbnb-base also provides a method for getting the ESLint configuration suitable for use in an eslintrc file. Typically this is used for providing hints or fix solutions to the development environment, e.g. IDEs and text editors. Doing this requires creating an instance of the Neutrino API and providing the presets uses. If you keep this information in config.presets in package.json, this should be relatively straightforward. By providing all the presets used to Neutrino, you can ensure all the linting options used across all those preset will be merged together for your development environment, without the need for copying, duplication, or loss of organization and separation.

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

// .eslintrc.js
const Neutrino = require('neutrino');
const pkg = require('./package.json');
const api = new Neutrino(pkg.config.presets);

module.exports = api.custom.eslintrc();

Contributing

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