UNPKG

7.7 kBMarkdownView Raw
1# Neutrino ESLint Middleware
2[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
3
4`neutrino-middleware-eslint` is Neutrino middleware for linting source code using ESLint and eslint-loader.
5
6## Requirements
7
8- Node.js v6.10+
9- Yarn or npm client
10- Neutrino v7
11
12## Installation
13
14`neutrino-middleware-eslint` can be installed via the Yarn or npm clients.
15
16#### Yarn
17
18```bash
19❯ yarn add neutrino-middleware-eslint
20```
21
22#### npm
23
24```bash
25❯ npm install --save neutrino-middleware-eslint
26```
27
28## Usage
29
30`neutrino-middleware-eslint` can be consumed from the Neutrino API, middleware, or presets. Require this package
31and plug it into Neutrino:
32
33```js
34// Using function middleware format
35const eslint = require('neutrino-middleware-eslint');
36
37// Usage shows default values
38neutrino.use(eslint, {
39 test: /\.(js|jsx)$/,
40 include: [], /* Should specify either include or exclude */
41 exclude: [], /* Should specify either include or exclude */
42 eslint: {
43 cwd: neutrino.options.root,
44 useEslintrc: false,
45 root: true,
46 extensions: ['js', 'jsx'],
47 plugins: ['babel'],
48 baseConfig: {},
49 envs: ['es6'],
50 parser: 'babel-eslint',
51 parserOptions: {
52 ecmaVersion: 2017,
53 sourceType: 'module',
54 ecmaFeatures: {
55 objectLiteralDuplicateProperties: false,
56 generators: true,
57 impliedStrict: true
58 }
59 },
60 settings: {},
61 globals: ['process'],
62 rules: {}
63 }
64});
65```
66
67- `test`: Test which files should be linted.
68- `include`: An array of paths to include in linting. Maps to Webpack's [`Rule.include`](https://webpack.js.org/configuration/module/#rule-include)
69- `exclude`: An array of paths to exclude from linting. Maps to Webpack's [`Rule.exclude`](https://webpack.js.org/configuration/module/#rule-exclude)
70- `eslint`: An ESLint CLIEngine configuration object for configuring ESLint. Use this to configure rules, plugins, and other [ESLint options](http://eslint.org/docs/user-guide/configuring).
71
72## Customization
73
74`neutrino-middleware-eslint` creates some conventions to make overriding the configuration easier once you are ready to
75make changes.
76
77### Rules
78
79The following is a list of rules and their identifiers which can be overridden:
80
81| Name | Description | Environments and Commands |
82| --- | --- | --- |
83| `lint` | By default, lints JS and JSX files from included directories using ESLint. Contains a single loader named `eslint`. | all |
84
85## Information
86
87By default this middleware will show errors and warnings in the console during development, and will cause a failure when
88creating a build bundle.
89
90---
91
92If you want your preset or middleware to also extend from another **ESLint configuration or preset** that you have made
93a dependency, you must use `baseConfig.extends` rather than just `extends`. This is a limitation of ESLint, not this
94middleware.
95
96---
97
98This middleware only configures a target environment for `es6`, leaving other build middleware free to add their own
99target environments. If your middleware puts restrictions on which environments it is capable of running, please
100document that clearly in your middleware.
101
102## eslint CLI
103
104_This is the recommended way to perform a one-off lint in a Neutrino project._
105
106You can also have Neutrino invoke ESLint for you if you wish to perform a one-time lint. This avoids needing to install
107ESLint manually, creating a `.eslintrc.js` file, or having to manage includes and ignores. As long as the ESLint
108middleware is loaded, you have access to a command to run ESLint from the command line.
109
110This middleware registers a command named `lint` which programmatically calls ESLint and prints the results to
111the console.
112
113```bash
114❯ neutrino lint
115```
116
117```bash
118❯ neutrino lint --fix
119```
120
121## eslintrc Config
122
123If you cannot or do not wish to use Neutrino to execute one-off linting, you can still use ESLint manually.
124
125`neutrino-middleware-eslint` also provides a method for getting the ESLint configuration suitable for use in an eslintrc
126file. Typically this is used for providing hints or fix solutions to the development environment, e.g. IDEs and text
127editors. Doing this requires [creating an instance of the Neutrino API](https://neutrino.js.org/api) and providing the
128middleware it uses. If you keep all this information in a `.neutrinorc.js`, this should be relatively straightforward. By
129providing all the middleware used to Neutrino, you can ensure all the linting options used across all middleware will be
130merged together for your development environment, without the need for copying, duplication, or loss of organization and
131separation.
132
133This middleware registers another command named `eslintrc` which returns an ESLint configuration object suitable for
134consumption by the ESLint CLI. Use the Neutrino API's `call` method to invoke this command:
135
136_Example: Create a .eslintrc.js file in the root of the project, using `.neutrinorc.js` middleware._
137
138```js
139// .eslintrc.js
140
141// If you do not specify any middleware to call(),
142// it will use the local .neutrinorc.js file
143
144const { Neutrino } = require('neutrino');
145const api = Neutrino();
146
147module.exports = api.call('eslintrc');
148```
149
150_Example: Create a .eslintrc.js file in the root of the project, using specified middleware._
151
152```js
153// .eslintrc.js
154const { Neutrino } = require('neutrino');
155const api = Neutrino();
156
157module.exports = api.call('eslintrc', [
158 ['neutrino-middleware-eslint', {
159 eslint: {
160 rules: { semi: 'off' }
161 }
162 }],
163 'neutrino-preset-react'
164]);
165```
166
167If you are able, only use a `.eslintrc.js` file for editor hints, and use the Neutrino `lint` command for one-off linting
168or fixes.
169
170Projects may face a problem when their editor or IDE lints all files and highlights errors that were normally excluded
171from source, i.e. Neutrino's `include` and `exclude` options. This is because the ESLint CLI does not have a way to
172specify included and excluded files from configuration. If you still wish to use ESLint's CLI for linting, consider
173setting [CLI flags](http://eslint.org/docs/user-guide/command-line-interface#options) or using an
174[eslintignore](http://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories) to choose which files to
175include or exclude from linting.
176
177Unfortunately ESLint does not provide the possibility to configure ignored paths from Neutrino configuration and exclude them
178from linting. Projects authors should define this manually in their project root directory in a `.eslintignore` file. This
179is one of the main reasons to prefer using the `lint` CLI command with this middleware, as it avoids a lot of manual
180configuration and boilerplate.
181
182`.eslintignore` file:
183
184```
185/build
186/*.*
187```
188
189ESLint will exclude built files and any files in the root directory (e.g. custom Neutrino configuration) but `src` and
190`test` folders will be still checked. `node_modules` are ignored by default in ESLint. More information can be found
191in the [ESLint user guide](http://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories).
192
193## Contributing
194
195This middleware is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
196containing all resources for developing Neutrino and its core presets and middleware. Follow the
197[contributing guide](https://neutrino.js.org/contributing) for details.
198
199[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-eslint.svg
200[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-eslint.svg
201[npm-url]: https://npmjs.org/package/neutrino-middleware-eslint
202[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
203[slack-url]: https://neutrino-slack.herokuapp.com/