Vite + Vue 3 + Pug with ESLint and Prettier

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["plugin:vue/vue3-recommended", "airbnb-base", "prettier"],
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 12,
    ecmaFeatures: {
      modules: true,
    },
  },
  plugins: ["vue", "prettier"],
  rules: {
    "prettier/prettier": "error",
    "vue/multi-word-component-names": "off",
    "no-use-before-define": "off",
    "no-param-reassign": "warn",
    "no-underscore-dangle": "off",
    "no-promise-executor-return": "off",
    "consistent-return": "off",
    "import/no-unresolved": "off",
    "import/no-dynamic-require": "off",
    "import/extensions": ["error", "ignorePackages"],
    "import/no-extraneous-dependencies": "off",
  },
};

README.md

VSCode setup

1. Install plugins

Required:

• ESLint (vscode code linting plugin)
• Prettier (vscode code formatting plugin)

Recommended:

• Volar (vscode syntax highlight plugin)

2. Install dependencies

It is recommended to bootstrap your config with command

npm init @eslint/config

Select desired options and then install dependencies that are left

• Prettier (npm i -D prettier)
• ESLint (npm i -D eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue)
• Pug (npm i -D pug @prettier/plugin-pug)
• Airbnb (npm i -D eslint-config-airbnb-base eslint-plugin-import)
• Vite (npm i -D vite-plugin-eslint)

All-in-One

npm i -D prettier pug @prettier/plugin-pug eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-plugin-import vite-plugin-eslint

settings.json

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

vite.config.js

import { defineConfig } from "vite";
import eslintPlugin from "vite-plugin-eslint";

export default defineConfig({
  plugins: [eslintPlugin()],
});