Why every Developer should use ESLint & Prettier

Hi there!

This is my first blog where I will be sharing why every developer should use ESLint and Prettier in their projects and what is the easiest way to use them.

Problem Introduction

Maintaining clean, well-formatted code is always a good habit and also essential for large projects. And it is a standard that every developer should use in modern software development. Without proper tools the codebases quickly became messy and hard to understand and doing it manually takes a lot of time and energy. So, using proper tools becomes more important.

As the modern web development is revolves around React and React based frameworks like Next.js, ESLint and Prettier provides a very easy solution the problem mentioned. One ensures the code quality and other ensures code style.

What is ESLint?

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript/Typescript code, with the goal of making code more consistent and avoiding bugs.

This is the official definition provided by the ESLint Documentation.

In simple terms, ESLint is a tool that analyzes your code for bad practices, indentation issues and bugs. Which helps to get ready for any of the future errors that can occur.

What is Prettier?

Prettier is an opinionated code formatter with support for: Javascript, HTML, CSS, TypeScript and many more. It removes all original styling and ensures that all outputted code conforms to a consistent style.

This is the official definition provided by the Prettier Documentation.

ESLint vs Prettier: Whats the difference?

The major difference between both is that ESLint is used for maintaining Code Quality and Bug Detection while the main purpose of Prettier is Code Formatting and Maintaining Code Readability.

Using both at the same time may cause some conflicts but the rules for both can be altered/defined by developer so, using both with well-defined rules is a better option.

Using them in your Next.js project

• Create a Next.js project.
• Make sure you have installed Prettier- Code Formatter & ESLint extension in VS Code.
• Install eslint-config-prettier as a development dependency.

npm install --save-dev eslint-config-prettier

• Create a .vscode folder and inside create a settings.json file and paste the following code:

{
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "always"
	}
}

This code will ensure that all the ESLint and Prettier actions are performed on saving the file and you don't have to do it manually all the time.

• Create a .prettierrc.json file and paste the following code. This code ensures that on saving the file following things are maintained:
  • There is a semicolon after end of every line.
  • There is no single quote used, always use double quote.
  • The width of tab is 2 spaces for ensuring perfect indentation.
  • You can change any rule or add any new rule using the documentation.

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "plugins": ["prettier-plugin-tailwindcss"]
}

• Inside the eslint.config.mjs file paste the following code. This code ensures that on saving the file following things are maintained and if not throw an error or warning:
  • Use semicolons after end of every line.
  • Use Double Quotes instead of Single Quotes.
  • Use Arrow Functions.
  • Use Template Literals.
  • Remove unused import statements.
  • Disallow unused variables but allow those starting with _
  • Warn about console.log but allow console.error and console.warn
  • Consistent React Hooks usage.
  • Use next/Image tag instead of <img> tag.
  • Add new line above return.
  • Add new line below import.

const eslintConfig = [
	...compat.config({
		extends: ["next/core-web-vitals", "next/typescript", "prettier"],
		rules: {
			semi: ["error"],
			quotes: ["error", "double"],
			"prefer-arrow-callback": ["error"],
			"prefer-template": ["error"],
			"unused-imports/no-unused-imports": ["error"],
			"no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
			"no-console": ["warn", { "allow": ["warn", "error"] }],
	        "react-hooks/rules-of-hooks": ["error"],
	        "react-hooks/exhaustive-deps": ["warn"],
	        "jsx-a11y/alt-text": ["warn"],
            "react/forbid-elements": [
                ["error"], {
                    "forbid": [{
                        "element": "img",
                        "message": "Use <Image> from next/image instead of <img>."
                    }]
                }
            ],
            "newline-before-return": "error",
            "import/newline-after-import": [
                "error", {
                    "count": 1
                }
            ],
		}
	})
];