Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

ESLint and Prettier Integration in Vue.js Projects

What will you learn in this guide?​

In this guide, you will learn to use ESLint and Prettier together in Vue.js projects.
The goal is to produce readable and consistent projects by automating code styling.

Now within the team, "single quotes or double quotes?" You won't have to argue.
The entire code layout will be managed by rules and automation.

🧠 Technical Summary​

This guide describes ESLint and Prettier integration in Vue.js projects.
Problem: Inconsistent code formatting and style confusion within the team.
Solution: Enforce Prettier rules via ESLint.

Preliminary Preparations​

  • Node.js must be installed on your computer
  • You just need to know basic terminal commands
  • An existing Vue project or a new project can be used

1️⃣ Project Setup and Installation of Packages​

First install Prettier globally.

npm install --global prettier
  • This command makes Prettier available system-wide.

Create a new project with Vue CLI.

npx @vue/cli create genixnode-vue-app --default
  • This command creates Vue project with default settings.
  • Change to the project directory.
cd genixnode-vue-app
  • Add ESLint and Prettier integration packages.
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
  • These packages enable ESLint and Prettier to work together smoothly.

2️⃣ Editing ESLint Configuration​

  1. ESLint settings are usually in package.json or .eslintrc.js.

Method A: If You Are Using package.json​

  • Edit the eslintConfig section as follows.
{
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "plugin:prettier/recommended",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  }
}
  • This structure implements Prettier rules via ESLint.

Method B: If You Are Using .eslintrc.js​

  1. Update the settings as follows.
module.exports = {
  root: true,
  extends: [
    "plugin:vue/essential",
    "plugin:prettier/recommended",
    "eslint:recommended"
  ],
};
  • This setting forces Prettier rules to ESLint.

3️⃣ Auto-Editing Codes​

  1. After the installation is completed, run the following command.
npx eslint --fix src/
  • This command automatically fixes .js and .vue files.
  1. Indents, spacing, and line order become standard. Code styling is no longer a manual issue.

❓ Frequently Asked Questions (FAQ)​

1. What is the difference between ESLint and Prettier? ESLint controls code quality, Prettier controls code appearance.

2. Does it autocorrect every time I save? Yes. “Format On Save” can be turned on in VS Code.

3. Can it be added to existing projects? Yes. All files are updated with eslint --fix.

4. Is there a problem for teams using different editors? No. Rules are defined within the project.

🎯 Result​

You've brought your Vue.js project into line with modern development standards. Code readability increases, style debates end.

You can safely develop your projects on the GenixNode infrastructure.