Make my JS Prettier

Because robots should do the chores, not developers

TL;DR

This is basically a copy-paste guide on how one may set up ESLint+Prettier in their javascript project because I need a source to copy from.

“silver Apple MacBook Pro on” by rawpixel on Unsplash

Once again: “Prettier is an opinionated code formatter” and ESLint is “The pluggable linting utility for JavaScript and JSX”. They work together pretty well; however, I find it more productive to use Prettier via ESLint: there are corresponding plugin and config for ESLint and it makes it possible to have just ESLint integration in an editor to make it work.

So, for example, I do not have Prettier plugin installed in my VS Code, just ESLint one. I configure VS Code to fix ESLint errors automatically on save, there are corresponding fields from settings.json file:

"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"[json]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true

So, here’s step by step description of how to enable ESLint and Prettier in a project:

  1. Install packages with exact versions fixed:
npm i -D --save-exact eslint babel-eslint prettier eslint-plugin-prettier eslint-config-prettier

2. Install ESLint config:

npm i -D --save-exact @cyberskunk/eslint-config

3. Configure ESLint using .eslintrc file (docs: ESLint and Prettier):

{
"root": true,
"parser": "babel-eslint",
"extends": [
"@jetbrains",
"@jetbrains/eslint-config/node",
"@jetbrains/eslint-config/es6",
"prettier"
],
"plugins": [
"prettier"
],
"rules": {
"import/no-commonjs": "off",
"linebreak-style": "off",
"prettier/prettier": [
"error",
{
"printWidth": 100,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": false
}
]
}
}

4. Add an .eslintingnore file to avoid linting node_modules and such, e.g.:

.idea
node_modules
dist

5. Add npm scripts to the project’s package.json file, into a scripts section:

"lint": "eslint .",
"lint-fix": "eslint --fix ."

That’s it! Not it’s possible to run npm run lint or yarn lint commands to run all the checks manually.