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.
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 ^8.10 or 10+
- Yarn v1.2.1+, or npm v5.4+
- Neutrino 9 and one of the Neutrino build presets
- webpack 4
- ESLint 5
Installation
@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
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.
Quickstart
After adding the Airbnb preset to your Neutrino-built project, 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
:
moduleexports = options: root: __dirname use: '@neutrinojs/airbnb-base' '@neutrinojs/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.jsModule Error : error: Missing semicolon at src/index.js:35:51: 33 | 34 |> 35 | const MOUNT_NODE = document.getElementById | ^ 36 | 37 | 38 | 1 error found.1 error potentially fixable with the `--fix` option.
npm
❯ npm start ERROR in ./src/index.jsModule Error : error: Missing semicolon at src/index.js:35:51: 33 | 34 |> 35 | const MOUNT_NODE = document.getElementById | ^ 36 | 37 | 38 | 1 error found.1 error potentially fixable with the `--fix` option.
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.jsModule Error : error: Missing semicolon at src/index.js:35:51: 33 | 34 |> 35 | const MOUNT_NODE = document.getElementById | ^ 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
):
moduleexports = options: root: __dirname use: processenvNODE_ENV === 'development' ? '@neutrinojs/airbnb-base' : false '@neutrinojs/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. Use an array pair instead of a string to supply these options.
Example: Extend from a custom configuration (it will be applied after Airbnb) and turn off semicolons from being required.
moduleexports = options: root: __dirname use: '@neutrinojs/airbnb-base' 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' ;
.eslintrc.js
Exposing generated lint configuration via @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.jsconst neutrino = ; moduleexports = ;
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
:
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.
.eslintrc.*
Using your own 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.