ESLint is a linting tool that analyzes your code and suggests fixes and Prettier is a code formatter that saves you the time by automatically formats your code as you save.
Both tools combined give an amazing developer experience because you don't have to worry about bugs due to syntax errors or trailing commas.
Both tools come with a set of pre-defined rules which you can later customize to suit your needs in the individual config files.
Setting up ESLint and Prettier for your JavaScript projects
To use ESLint and Prettier you need to have these tools on your machine.
- Node
- NPM
- Code Editor (Atom, VSCode, Sublime text, etc).
Installing globally vs locally
There are two methods to set up ESLint and Prettier which is the global method where the configurations apply to all your projects and the local method where the configurations might vary per project (this is probably when you work in various teams).
Overwriting global installation
To overwrite the global installation of ESLint, all you need to do is place a new .eslintrc.json file in the project's root directory and install all the plugins required by the project. We'll get into more detail later.
The setup
I'll be using the global installation method here but if you just need the local installation for a project, you could just replace the -g flag with --save-dev for all installation commands and you're good to go.
Installing ESlint and Prettier
npm install -g eslint prettier
The command above installs ESlint and Prettier globally on your machine. In order to use Prettier with ESLint on your machine, two other packages need to be installed. eslint-config-prettier to disable rules that conflict with Prettier and eslint-plugin-prettier to allow ESLint format our code using Prettier.
npm install -g eslint-config-prettier eslint-plugin-prettier
Configuring ESLint
Now that we have those, we need to create the config file for ESLint, this file will contain all configurations for ESLint and any rules you wish to modify as well.
Since we set up the tools globally, the file has to exist in your home directory ~/.
Create a new file named .eslintrc.json in your home directory and paste the code below in the file.
{
"extends": ["plugin:prettier/recommended"],
"env": {
"browser": true,
"es6": true,
"node": true
},
"plugins": ["prettier"],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"prettier/prettier": "error"
}
}
The main keys you need to be concerned with here are the rules, plugins and extends.
- The
rules key is where you specify how ESLint treats each rule, the three values accepted are off, warn or error, alternatively, you could replace them with 1, 2 or 3.
- The
plugins key is where you specify the plugins you wish to use with ESLint.
- The
extends key is to specify additional rules to be used by ESLint.
To know more about configuring ESLint, you can read the official docs [here](https://eslint.org/docs/2.13.1/user-guide/configuring 'ESLint configuration docs')
Configuring Prettier
Since ESLint is now extending rules from prettier, If we wanted to modify the rules Prettier has, we could do that by creating a .prettierrc.json. Here's an example:
{
"printWidth": 180,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true
}
Editor Integration
It's possible to integrate ESLint and Prettier into your code editor, this way you get the features to work in real-time as you code.
I use Visual Studio Code but the same should apply to other editors.
All you need to do install the ESLint and Prettier extensions from your editor's extensions store.
Optional configurations for editors
VSCode has a settings.json file which is a JSON representation of the settings it uses, we can enter our own configuration in there for an even smoother experience.
What we want to achieve is to have ESLint run automatically and fix our code when we save the file.
{
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.autoFixOnSave": true
}
Basically what we've set there is set our editor to automatically format all other code except JavaScript code, because it's ESLint that'll handle that with the eslint.autoFixOnSave rule.
Check out more ESLint configurations for VSCode [here](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 'VSCode ESLint config').
Possible Issues
If you happen to use the Node Version Manager or have node installed in another directory than the default, you will need to redirect the VSCode ESLint extension to where the npm installed ESLint binary is located. To do that, add the code below to the settings.json file of VSCode.
{
"eslint.nodePath": "<path to ESLint package>"
}
If you face any issues, do drop a comment below.
