Neutrino preset for adding Influitives base JS ESLint config
@influitive/neutrino-preset-eslint is a Neutrino preset that supports linting JavaScript projects with influitive's base ESLint
config
- 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
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5, Neutrino build preset
@influitive/neutrino-preset-eslint can be installed via the Yarn or npm clients. Inside your project, make sureneutrino and @influitive/neutrino-preset-eslint are development dependencies. You will also be using
another Neutrino preset for building your application source code.
#### Yarn
``bash`
❯ yarn add --dev @influitive/neutrino-preset-eslint
#### npm
`bash`
❯ npm install --save-dev @influitive/neutrino-preset-eslint
@influitive/neutrino-preset-eslint follows the standard project layout specified by Neutrino. Thissrc
means that by default all project source code should live in a directory named in the root of the
project.
After adding the influitive 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 --use @influitive/neutrino-preset-eslint neutrino-preset-web",
"build": "neutrino build --use @influitive/neutrino-preset-eslint neutrino-preset-web"
}
}
Or if you have set up Neutrino with neutrino.use in your package.json:
`json`
{
"neutrino": {
"use": [
"@influitive/neutrino-preset-eslint",
"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)
`
@influitive/neutrino-preset-eslint will cause errors to fail your build when creating a bundle via neutrino build. Ifneutrino start
you want to ease introduction of this linting preset to your project, consider only adding it to your preset list for 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)
error Command failed with exit code 1.
`
To override the build configuration, start with the documentation on customization.
@influitive/neutrino-preset-eslint creates some conventions to make overriding the configuration easier once you are ready to
make changes.
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. This isneutrino-middleware-eslint
inherited from .
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 quite verbose. Consider using advanced configuration below if this bothers you._
_Example: Turn off semicolons from being required as defined by the influitive rules._
`json`
{
"neutrino": {
"config": {
"module": {
"rule": {
"lint": {
"use": {
"eslint": {
"options": {
"rules": {
"semi": "off"
}
}
}
}
}
}
}
}
}
}
Again, using simple customization for linting can be verbose. Consider using advanced customization if it suits your
project.
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. This preset is also
Neutrino middleware, making it easy to compose and extend the configuration.
_Example: Turn off semicolons from being required as defined by the influitive rules._
`js
// If using as middleware, remove from middleware and .use it from your override:
const influitive = require('@influitive/neutrino-preset-eslint');
module.exports = neutrino => {
neutrino.use(influitive, {
eslint: {
rules: {
semi: 'off'
}
}
});
};
`
`js
// If using as a preset from the CLI or configured in package.json,
// override its configuration directly:
const merge = require('deepmerge');
module.exports = neutrino => {
neutrino.config.module
.rule('lint')
.use('eslint')
.tap(options => merge(options, {
rules: {
semi: 'off'
}
}));
};
`
@influitive/neutrino-preset-eslint also provides a method for getting the ESLint configuration suitable for use in an eslintrcneutrino.use
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 in package.json, this should be relatively straightforward. Byneutrino-middleware-eslint
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. This is inherited from .
_Example: Create a .eslintrc.js file in the root of the project._
`js
// .eslintrc.js
const { Neutrino } = require('neutrino');
const pkg = require('./package.json');
const api = Neutrino();
// If the Influitive preset is not included in pkg.neutrino.use,
// use it manually:
api.use(require('@influitive/neutrino-preset-eslint'));
// Add the rest of the presets:
pkg.neutrino.use
.map(require)
.map(api.use);
module.exports = api.eslintrc();
``
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.
[npm-image]: https://img.shields.io/npm/v/@influitive/neutrino-preset-eslint.svg
[npm-downloads]: https://img.shields.io/npm/dt/@influitive/neutrino-preset-eslint.svg
[npm-url]: https://npmjs.org/package/@influitive/neutrino-preset-eslint