There are many posts explaining configuring ESLint and Prettier in combination or separately. To circumvent the complexity surrounding this complexity few have created a node module that you download and your ESLint is configured to be used with Prettier automatically.
To keep this post short, I will dive into configuring ESLint to be used with Prettier rules.
If you want to read about ESLint and Prettier, I will post the links to the end of this article.
ESLint Configuration with Prettier Integration
This guide provides step-by-step instructions on setting up ESLint with Prettier integration for consistent code linting and formatting in your JavaScript/TypeScript projects.
Prerequisites
Make sure you have Node.js and npm installed on your machine. If not, you can download and install them from https://nodejs.org/.
The node version we will be using for this configuration is 20.10.0
Step 1: Initialize Your Project
npm init -y
Step 2: Install ESLint
npx eslint --init
You will be asked a variety of questions as follows:
Need to install the following packages:
@eslint/create-config@0.4.6
Ok to proceed? (y) y
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0 eslint-plugin-promise@^6.0.0
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
Installing eslint-plugin-react@latest, eslint-config-standard@latest, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0
Step 3: Generated .eslintrc.json
{
"env": {
"browser": true,
"node": true,
"es2021": true
},
"extends": [
"standard",
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
}
Step 4: Install Prettier
Install Prettier module as follows:
npm install prettier --save-dev
Step 5: Install dependencies for ESlint to work with Prettier
npx install-peerdeps eslint-config-prettier --dev
npx install-peerdeps eslint-plugin-prettier --dev
Step 6: Install ESLint extension for VS Code
Step 7: Update .eslintrc.json with Prettier rules
{
"extends": [
"eslint:recommended",
"plugin:prettier/recommended" //Extend Prettier settings
],
"plugins": [
"react",
"prettier", //Add prettier plugin
],
"rules": {
"prettier/prettier": [ //Add following rules as per your requirement
"error",
{
"singleQuote": true,
"endOfLine": "auto",
"tabWidth": 2,
"trailingComma": "none"
}
],
"no-console": "off", //switch to warn for production
"no-unused-vars": "warn"
},
"globals": { //Optional in case you don't have console statements
"console": true
},
}
Step 8: VS Code Settings
Update your VS Code settings settings.json to enable ESLint and Prettier integration.
{
"editor.formatOnSave": false,
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"eslint.format.enable": true,
"files.eol": "\n",
// turn it off for JS and JSX, we will do this via eslint
"[javascript][javascriptreact][typescript][typescriptreact]": {
"editor.formatOnSave": false
}
}
Restart VS Code for the changes to take place
Step 9: Create NPM Scripts
In your package.json file, add NPM scripts for linting and fixing:
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
Step 10: Run ESLint
npm run lint
Step 11: Auto-Fix ESLint Issues
npm run lint:fix
or you can run
npx eslint . --fix
These steps will configure ESLint with Prettier in your project, ensuring consistent code formatting and style enforcement. Customize the configurations based on your project's specific needs.
Step 12: ESLint settings for HTML files
Install html-eslint plugin
npm install --save-dev eslint @html-eslint/parser @html-eslint/eslint-plugin
Step 13: Update .eslintrc.json file
{
"plugins": [
"react",
"prettier",
"@html-eslint" //Added HTML lint plugin
],
"overrides": [
{
"files": [
"*.html"
],
"parser": "@html-eslint/parser", //Added HTML parser
"extends": [
"plugin:@html-eslint/recommended" //Extend HTML parser
]
}
]
}
Step 14: Update VS Code settings.json
Add the following:
"eslint.validate": [
"javascript", // ...
"html" // Add "html" to enable linting `.html` files.
]
Restart VS Code again for the changes to take place
Full .eslintrc.json
{
"env": {
"browser": true,
"node": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"prettier",
"@html-eslint"
],
"rules": {
"prettier/prettier": [
"error",
{
"singleQuote": true,
"endOfLine": "auto",
"tabWidth": 2,
"trailingComma": "none"
}
],
"no-console": "off",
"no-unused-vars": "warn"
},
"globals": {
"console": true
},
"overrides": [
{
"files": [
"*.html"
],
"parser": "@html-eslint/parser",
"extends": [
"plugin:@html-eslint/recommended"
]
}
]
}
References and Credits
HTML ESLint parser
ESLint
Prettier
WESBOS ESLint Config
If you have any questions, do post in the comments and I will try my best to answer them
Top comments (1)
Nice work adithya