Eli Perelman
8 years ago
1 changed files with 208 additions and 0 deletions
@ -0,0 +1,208 @@ |
|||||
|
# Neutrino Airbnb Preset [![NPM version][npm-image]][npm-url] |
||||
|
|
||||
|
`neutrino-preset-airbnb-base` is a Neutrino preset that supports linting JavaScript projects with Airbnb's base ESLint |
||||
|
config, following the [Airbnb styleguide](https://github.com/airbnb/javascript). |
||||
|
|
||||
|
## 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 |
||||
|
|
||||
|
```bash |
||||
|
❯ yarn add --dev neutrino-preset-airbnb-base |
||||
|
``` |
||||
|
|
||||
|
#### npm |
||||
|
|
||||
|
```bash |
||||
|
❯ npm install --save-dev neutrino-preset-airbnb-base |
||||
|
``` |
||||
|
|
||||
|
## Project Layout |
||||
|
|
||||
|
`neutrino-preset-airbnb-base` follows the standard [project layout](/project-layout.md) 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`: |
||||
|
|
||||
|
```json |
||||
|
{ |
||||
|
"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 |
||||
|
|
||||
|
```bash |
||||
|
❯ 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 |
||||
|
|
||||
|
```bash |
||||
|
❯ 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. |
||||
|
|
||||
|
```bash |
||||
|
❯ 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](/customization/README.md). |
||||
|
`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](/customization/simple.md) 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._ |
||||
|
|
||||
|
```json |
||||
|
{ |
||||
|
"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](/customization/advanced.md) 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._ |
||||
|
|
||||
|
```js |
||||
|
const merge = require('deepmerge'); |
||||
|
|
||||
|
module.exports = neutrino => { |
||||
|
neutrino.config |
||||
|
.rule('lint') |
||||
|
.loader('eslint', ({ options }) => { |
||||
|
return { |
||||
|
options: merge(options, { |
||||
|
rules: { |
||||
|
semi: 'off' |
||||
|
} |
||||
|
}) |
||||
|
}; |
||||
|
}); |
||||
|
}; |
||||
|
``` |
||||
|
|
||||
|
## Contributing |
||||
|
|
||||
|
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo |
||||
|
containing all resources for developing Neutrino and its core presets. Follow the |
||||
|
[contributing guide](/contributing/README.md) for details. |
||||
|
|
||||
|
[npm-image]: https://badge.fury.io/js/neutrino-preset-airbnb-base.svg |
||||
|
[npm-url]: https://npmjs.org/package/neutrino-preset-airbnb-base |
||||
Loading…
Reference in new issue