Using ESLint and Prettier to Improve Code Quality

Aamir Khan

August 25, 2025

Using ESLint and Prettier to Improve Code Quality

Writing clean, consistent, and error-free code is one of the most important skills you can develop as a JavaScript or full-stack developer. This is where tools like ESLint and Prettier come in. They don’t just save time — they make your codebase professional, maintainable, and less prone to bugs.

If you’re a junior developer or self-taught coder, learning to use these tools early can level up your coding workflow and make collaboration with teams much smoother.

What Are ESLint and Prettier?

ESLint

ESLint is a linting tool for JavaScript and TypeScript that analyzes your code to find potential problems. It enforces coding standards and highlights issues like unused variables, inconsistent naming, or unsafe code patterns.

Prettier

Prettier is an opinionated code formatter. It automatically formats your code so you don’t have to argue about tabs vs spaces or worry about line wrapping — it just works.

Why They Matter

Consistency: Your entire codebase looks the same, regardless of who wrote it.
Fewer Bugs: ESLint catches potential errors before they break your app.
Time Savings: No more manual formatting or nitpicking code reviews.
Team Collaboration: Everyone follows the same rules automatically.

Step-by-Step: Setting Up ESLint and Prettier

1. Install Dependencies

npm init -y
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

2. Initialize ESLint

npx eslint --init

Follow the prompts to select your environment (Node, Browser, etc.), style preferences, and whether you want a config file in JSON or JavaScript format.

3. Configure Prettier with ESLint

Add this to your .eslintrc.js file:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

4. Add Prettier Config (Optional)

Create a .prettierrc file:

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2
}

5. Format and Lint Your Code

Run these commands:

npx eslint . --fix
npx prettier --write .

Integrating with VS Code

To make the most of these tools, integrate them with your editor:

Install the ESLint and Prettier extensions in VS Code.
Enable Format on Save in your editor settings.

This ensures your code is automatically formatted every time you save a file.

Real-World Example

Imagine you’re building a full-stack project with React and Node.js. Without ESLint, you might accidentally leave unused variables or forget to handle promises properly. With ESLint and Prettier configured, these mistakes are flagged immediately, saving you hours of debugging.

Related Resources

Key Takeaways

ESLint improves code quality by enforcing rules.
Prettier ensures consistent formatting.
Integrating both creates a clean, error-free workflow.

Try setting this up in your next project and see how much smoother your development process becomes.

Call to Action

What’s your favorite ESLint rule or Prettier setting? Comment below and share your setup!

💖

Enjoyed the Post?

If my blog helped you, please consider supporting me!

Support Me 💖

Code Journey With Aamir