Step‑by‑Step Guide to Integrating ESLint into Vue 3 and Other Front‑End Projects

In front‑end development, code quality and consistency are crucial. ESLint is a powerful tool that detects and fixes errors, enforces style rules, and reduces bugs, making it indispensable for Vue, React, and other JavaScript frameworks.

What ESLint Does

ESLint provides real‑time linting, automatic fixing on save, unified coding style, and early error detection, helping both individual developers and teams maintain high‑quality, maintainable code.

5 Steps to Integrate ESLint

1. Initialise a Vue 3 Project

If you don’t have a Vue 3 project, create one with Vue CLI:

npm install -g @vue/cli
vue create my-vue3-project

2. Install ESLint

Navigate to the project directory and install ESLint with the Vue plugin:

cd my-vue3-project
npm install eslint eslint-plugin-vue --save-dev

If your eslint version is >9.0.0, ensure you are using a compatible Node version (e.g., ^18.18.0, ^20.9.0, or >=21.1.0). In the example the versions are eslint 9.8.0 and node v18.17.1 .

3. Initialise ESLint Configuration

Run the initializer to generate a configuration file:

npx eslint --init

The CLI will ask a series of questions; for a Vue project you typically choose:

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be? · JavaScript

This creates eslint.config.mjs (or .eslintrc.js for older versions). An example flat config for Vue 3:

// eslint.config.mjs
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default [
  { files: ["**/*.{js,mjs,cjs,ts,vue}"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {
    files: ["**/*.vue"],
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  }
];

4. Add Custom Rules

Extend the generated config with project‑specific rules, for example:

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";
import standard from "eslint-config-standard";

export default [
  { files: ["**/*.{js,mjs,cjs,ts,vue}"] },
  { languageOptions: { globals: globals.browser, ecmaVersion: 12, sourceType: "module" } },
  pluginJs.configs.recommended,
  pluginVue.configs["flat/essential"],
  standard,
  {
    rules: {
      indent: ["error", 2],
      "linebreak-style": ["error", "unix"],
      quotes: ["error", "single"],
      semi: ["error", "never"],
      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    }
  }
];

5. Run ESLint Checks

Add scripts to package.json for linting and auto‑fixing:

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

Running npm run lint checks the code; npm run lint:fix attempts automatic fixes.

Deeper Integration (Development & Build)

Vite Integration

Install vite-plugin-eslint and configure it in vite.config.js :

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({ /* custom options */ })
  ]
});

Typical options:

eslintPlugin({
  include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],
  exclude: ['node_modules/**', 'dist/**'],
  fix: true,
  cache: false
});

Webpack Integration

Install eslint-webpack-plugin and add it to webpack.config.js :

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // other webpack config
  plugins: [
    new ESLintPlugin({
      extensions: ['js', 'vue', 'ts'],
      fix: true,
      cache: true,
      exclude: 'node_modules',
      failOnError: true
    })
  ]
};

CI/CD Integration

Example GitHub Actions workflow:

name: CI
on: [push, pull_request]
jobs:
  lint:
    name: Lint Code Base
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Dependencies
        run: npm install
      - name: Run ESLint
        run: npm run lint

GitLab CI example:

stages:
  - lint
eslint:
  stage: lint
  script:
    - npm install
    - npm run lint

Git Hooks (Prevent Bad Code from Entering Repo)

Use husky and lint‑staged to run ESLint on commit:

npm install husky lint-staged --save-dev

// package.json additions
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,mjs,cjs,ts,vue}": "eslint --fix"
  }
}

Common Issues & Troubleshooting

1. npx eslint --init fails

Check Node version (≥16) and reinstall dependencies if necessary.

2. ESLint version mismatch

Update @typescript-eslint and vite-plugin-eslint to the latest versions, clear node_modules and reinstall.

3. Invalid '--ext' option

When using the new eslint.config.* format, file extensions are defined in the config, so the --ext flag is no longer needed. Run simply eslint . or specify a directory.

4. ConfigError: "structuredClone is not defined"

Ensure the correct ESLint version and that the rule set matches your environment.

Editor / IDE Integration

Most modern editors (VS Code, WebStorm, Sublime) have ESLint plugins that provide real‑time linting and auto‑fix on save. For VS Code, add the following to .vscode/settings.json :

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"]
}

This ensures that saving a file automatically applies ESLint fixes.

Conclusion

Integrating ESLint into a front‑end project gives you real‑time error detection, automatic fixing, and consistent code style, which together improve development speed and code quality. Whether you integrate it via build tools, CI/CD pipelines, Git hooks, or directly in your IDE, the result is a more reliable and maintainable codebase.