Neutrino preset to use Prettier with ESLint in a friendly way
neutrino-preset-prettier-eslint
is a Neutrino preset to use Prettier in a way it doesn't conflict with ESLint.
Features
- Almost zero configuration to start making your code prettier
💅 - Turns off all ESLint rules that are unnecessary or might conflict with prettier (using
eslint-config-prettier
) - Runs Prettier as an ESLint rule, allowing keep the consistency across the team and format validation on CI (using
eslint-plugin-prettier
) - Format the code from command line like
npm run format
(usingprettier-eslint
)
ESLint preset
This preset supports integration with ESLint through the use of any preset based on neutrino-middleware-eslint
, as for example neutrino-preset-airbnb-base
.
Just follow the Neutrino's documentation instructions for the chosen preset and after that, the instructions bellow.
Requirements
- Node.js v6.9+
- NPM or Yarn client
- Neutrino v5
- Neutrino ESLint preset based on
neutrino-middleware-eslint
Installation
neutrino-preset-prettier-eslint
can be installed via the Yarn or NPM clients.
Inside your project, make sure neutrino
, and neutrino-preset-prettier-eslint
are development dependencies.
As mentioned above you will need an ESLint preset of your choice.
You will also be using another Neutrino preset for building your application source code.
Yarn
❯ yarn add --dev neutrino-preset-prettier-eslint
NPM
❯ npm install --save-dev neutrino-preset-prettier-eslint
Quickstart
We recommend setup Neutrino with neutrino.use
in your package.json.
Be aware that the order of the presets are important.
For example, if you are using neutrino-preset-airbnb-base
and neutrino-preset-web
:
{
"neutrino": {
"use": [
"neutrino-preset-airbnb-base",
"neutrino-preset-prettier-eslint",
"neutrino-preset-web"
]
}
}
Then, create the format
and lint
scripts in your package.json scripts section:
"scripts": {
"start": "neutrino start",
"build": "neutrino build",
"lint": "eslint \"src/**/*.js\"",
"format": "prettier-eslint --write \"src/**/*.js\""
}
Now you can format all your JS code inside src folder with:
Yarn
ps: yarn users will also need to install prettier-eslint-cli
to use the format CLI:
❯ yarn add --dev prettier-eslint-cli
❯ yarn run format
NPM
❯ npm run format
You can also lint your code. It will use Prettier for format rules, and ESLint for any other rules that you have configured:
Yarn
❯ yarn run lint
NPM
❯ npm run lint
This can be very useful to ensure, on a Continuous Integration environment, that the code is consistent with prettier format.
Editor integration
You don't need to use the command line during your development process. Prettier and ESLint have great support on most popular editors.
Atom integration
Prettier for Atom is the official package to integrate Prettier on Atom. Make sure you enable prettier-eslint support on the package settings and you must be good to go.
Sometimes it would be necessary to restart the editor after changing settings, so if something is not working as expected, maybe this would solve the issue.
During my setup I came across an issue with Atom and neutrino-preset-airbnb-base
that was breaking the integration with Atom.
I had to do an ugly workaround to make it work. In simple terms, you will probably need to install this fork of nodejs-depd
on your project:
https://github.com/fnmunhoz/nodejs-depd
Yarn
❯ yarn add --dev github:fnmunhoz/nodejs-depd
NPM
❯ npm install --save-dev github:fnmunhoz/nodejs-depd
The fork just removes an eval call, and I believe it will not break anything. I will try to solve this in a more elegant way in the near future.
Contributing
This is still a work in progress. It simplifies my setup and I hope it simplifies others people setup as well.
I would love to receive contributions, feel free to open a Pull Request or create an Issue.
Any feedback is welcome