Set Up ESLint and Prettier in a Vue 3 Project for Clean Code

Maintaining clean, readable, and consistent code is essential in modern frontend development—especially when working in teams or scaling applications over time. In a Vue 3 project, tools like ESLint and Prettier help automate code quality checks and formatting, reducing bugs and eliminating style debates.

ESLint identifies problematic patterns in your JavaScript, TypeScript, and Vue files, while Prettier ensures consistent code formatting across your project. Together, they create a smooth development workflow and keep your codebase professional and maintainable.

In this tutorial, we’ll build a fresh Vue 3 project using Vite, then configure ESLint and Prettier step by step for a clean and productive development environment.

By the end of this guide, you will learn how to:

• Create a new Vue 3 project with Vite
• Install and configure ESLint
• Install and configure Prettier
• Integrate ESLint with Prettier
• Automatically fix formatting issues
• Improve team collaboration with consistent code standards

Let’s get started.

Prerequisites

Before starting, make sure you have the following installed:

• Node.js (version 18 or later recommended)
• npm or yarn
• A code editor like Visual Studio Code

You can verify your installation by running:

node -v
npm -v

If Node.js is not installed yet, download it from the Node.js official website.

Basic knowledge of Vue 3 and JavaScript will also be helpful.

Step 1: Create a New Vue 3 Project

We’ll use Vite because it provides fast development and a modern setup for Vue projects.

Run the following command:

npm create vite@latest vue-eslint-prettier-app

When prompted, choose:

Framework: Vue
Variant: JavaScript

Then move into the project directory and install dependencies:

cd vue-eslint-prettier-app
npm install

Start the development server:

npm run dev

You should see your Vue app running in the browser.

Step 2: Install ESLint

Now let’s add ESLint to the project.

Run:

npm install -D eslint eslint-plugin-vue @eslint/js globals

This installs:

• eslint → the core linting engine
• eslint-plugin-vue → Vue-specific linting rules
• @eslint/js → JavaScript recommended rules
• globals → browser and Node global variables support

Step 3: Create ESLint Configuration

Create a new file in the root project directory:

eslint.config.js

Add the following configuration:

import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import globals from 'globals'

export default [
  js.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'off',
      'vue/multi-word-component-names': 'off'
    }
  }
]

This configuration:

• Enables recommended JavaScript rules
• Adds Vue-specific linting rules
• Supports browser and Node environments
• Customizes a few practical rules for development

Step 4: Add ESLint Script

Open package.json and add this script:

{
  "scripts": {
    "lint": "eslint . --ext .js,.vue",
    "lint:fix": "eslint . --ext .js,.vue --fix"
  }
}

Now you can run:

npm run lint

To automatically fix issues:

npm run lint:fix

This helps maintain clean code without manual checking.

Step 5: Install Prettier

Next, let’s install Prettier.

Run:

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

These packages provide:

• prettier → code formatting engine
• eslint-config-prettier → disables conflicting ESLint rules
• eslint-plugin-prettier → runs Prettier through ESLint

This ensures both tools work together smoothly.

Step 6: Create Prettier Configuration

Create a new file:

.prettierrc

Add:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100,
  "tabWidth": 2
}

This setup gives you:

• no semicolons
• single quotes
• shorter readable lines
• consistent indentation

You can customize these rules based on your team's preferences.

Step 7: Integrate ESLint with Prettier

Now update eslint.config.js:

import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import globals from 'globals'
import prettier from 'eslint-config-prettier'

export default [
  js.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  prettier,
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'off',
      'vue/multi-word-component-names': 'off'
    }
  }
]

The important part is:

prettier

This disables ESLint formatting rules that conflict with Prettier.

Now your project uses:

• ESLint for code quality
• Prettier for formatting consistency

This is the best practice setup for modern Vue projects.

Step 8: Format Code Automatically in VS Code

If you use Visual Studio Code, install these extensions:

• ESLint
• Prettier - Code Formatter

Then create:

.vscode/settings.json

Add:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  }
}

Now every time you save:

• Prettier formats your code
• ESLint fixes issues automatically

This creates a highly productive workflow.

Step 9: Test It

Try creating messy code inside App.vue:

<script setup>
const message = "Hello Vue"
console.log(message)
</script>

<template>
<h1>{{message}}</h1>
</template>

Now save the file.

Prettier and ESLint will automatically transform it into clean code like this:

<script setup>
const message = 'Hello Vue'
console.log(message)
</script>

<template>
  <h1>{{ message }}</h1>
</template>

This is exactly why these tools are essential.

Best Practices for Teams

For professional team projects:

• Commit .prettierrc
• Commit eslint.config.js
• Commit .vscode/settings.json
• Use pre-commit hooks later with tools like Husky
• Add lint checks in CI/CD pipelines

This ensures every developer follows the same coding standards.

Consistency improves:

• readability
• maintainability
• onboarding speed
• fewer code review conflicts

Conclusion

Setting up ESLint and Prettier in a Vue 3 project is one of the smartest early decisions you can make.

Instead of arguing about code style or manually fixing formatting, you let automation handle it—so you can focus on building features.

In this tutorial, you learned how to:

• Create a Vue 3 app with Vite
• Configure ESLint for code quality
• Configure Prettier for formatting
• Integrate both tools cleanly
• Enable auto-formatting in Visual Studio Code

This setup is simple, professional, and scalable for both solo developers and teams.

Your Vue codebase will thank you for it.

You can find the full source code on our GitHub.

We know that building beautifully designed Mobile and Web Apps from scratch can be frustrating and very time-consuming. Check Envato unlimited downloads and save development and design time.

That's just the basics. If you need more deep learning about Vue/Vue.js, you can take the following cheap course:

• Vue - The Complete Guide (incl. Router & Composition API)
• Vue JS - The Complete Guide [2025]
• Complete Vue Developer Bootcamp (Pinia, Vitest)
• Vue.js 3 Masterclass: Build 7 Real-World Apps
• Build Web Apps with Vue JS 3 & Firebase
• Vue.js 3 - The Complete Guide Interview Q&S
• Vue JS 3 For Modern Web Development - Beginner to Advanced
• Nuxt 3 & Supabase Mastery: Build 2 Full-Stack Apps
• Vue.js 3 Essentials: Build Dynamic Web Apps with Confidence
• Complete Vue.js 3 Course: Vuejs 3, Vite, TailwindCSS, Pinia

Thanks!