Vue2 Code Standards: Prettier + ESLint Complete Setup Guide

Separation of Concerns: Prettier vs ESLint

The article begins by clarifying the distinct roles: Prettier handles formatting (indentation, quotes, semicolons, line breaks) with an opinionated, zero-config approach, while ESLint handles code quality (unused variables, potential bugs, Vue syntax rules). Conflicts between the two are resolved by eslint-config-prettier, which disables ESLint's formatting rules.

Dependency Installation with Version Locking

Required packages (Node.js 14+, recommended 16/18): prettier – formatting core eslint@8 – linting core, deliberately locked to 8.x because ESLint 9's flat config breaks .eslintrc and removes

--ext

eslint-plugin-vue@9

– Vue rules supporting both Vue 2 and 3 eslint-config-prettier – disables conflicting ESLint format rules eslint-plugin-prettier – runs Prettier as an ESLint rule so --fix handles both @babel/eslint-parser + @babel/core – enables parsing of ESNext syntax (optional chaining, dynamic import)

Install command:

npm install -D prettier eslint@8 eslint-plugin-vue@9 eslint-config-prettier eslint-plugin-prettier @babel/core @babel/eslint-parser

.prettierrc.json – 15 Formatting Rules

Create .prettierrc.json at project root with commented settings:

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "singleAttributePerLine": false
}

Key callout: endOfLine: "lf" prevents cross-platform line-ending diffs. Pair with VS Code files.eol: "\n" and a root .gitattributes file.

Add .prettierignore (mirror .eslintignore) to exclude build artifacts:

dist
node_modules
public
coverage
*.min.js
package-lock.json

.eslintrc.js – Quality Rules with Correct Extends Order

// .eslintrc.js
module.exports = {
  root: true,
  env: { node: true, browser: true, es2021: true },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'plugin:prettier/recommended' // must be last
  ],
  parserOptions: {
    parser: '@babel/eslint-parser',
    ecmaVersion: 2021,
    sourceType: 'module',
    requireConfigFile: false
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
    'no-var': 'error',
    'prefer-const': 'error',
    eqeqeq: ['error', 'always', { null: 'ignore' }],
    'vue/multi-word-component-names': 'off',
    'vue/no-unused-components': 'warn',
    'vue/no-v-html': 'off',
    'vue/component-name-in-template-casing': ['warn', 'PascalCase']
  }
};

Critical details: extends order matters: later entries override earlier ones, so plugin:prettier/recommended must be last. It enables the Prettier plugin, inherits eslint-config-prettier, and activates the prettier/prettier rule in one line. @babel/eslint-parser belongs inside parserOptions.parser, not at the top-level parser key; placing it at the top breaks eslint-plugin-vue 's template parsing.

No formatting rules appear in rules because prettier/recommended already disables dozens (e.g., vue/html-indent).

Rule rationale table included: conditional no-console / no-debugger, underscore prefix ignore for unused vars, strict === with null exception, disabling multi-word component name check for legacy App.vue, allowing v-html when needed, enforcing PascalCase in templates.

npm Scripts – Four Commands

"scripts": {
  "lint": "eslint --ext .js,.vue src",
  "lint:fix": "eslint --ext .js,.vue src --fix",
  "format": "prettier --write \"src/**/*.{js,vue,json,css,scss,md}\"",
  "format:check": "prettier --check \"src/**/*.{js,vue,json,css,scss,md}\""
}

lint

– check only, for CI lint:fix – check + fix (formatting + quality via Prettier plugin), daily driver format – pure formatting for non-linted files (Markdown, JSON, CSS) format:check – CI gate for formatting

VS Code Integration – Save-Time Automation

Install extensions: ESLint (dbaeumer) and Prettier - Code formatter (esbenp). Add .vscode/settings.json to repo for team sharing:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript", "vue", "html"],
  "files.eol": "
",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Verification: open a .vue file, break indentation, press Ctrl+S – code should auto-format.

husky + lint-staged – Pre-Commit Gate

Editor config only works for those who configured it. Git hooks enforce checks on every commit:

npx husky-init && npm install
npm install -D lint-staged

.husky/pre-commit

:

npx lint-staged

package.json

addition:

"lint-staged": {
  "*.{js,vue}": ["eslint --fix", "prettier --write"],
  "*.{json,css,scss,md}": ["prettier --write"]
}

Result: only staged files are checked, auto-fixed, and commit blocks if fixes fail. Fix for missing execute permission on Linux/macOS: chmod +x .husky/pre-commit.

Six Common Pitfalls & Fixes

eslint --fix does nothing – verify file not in .eslintignore; check VS Code ESLint output panel for errors.

Prettier/ESLint conflict – ensure plugin:prettier/recommended is last in extends.

.vue parse errors – confirm @babel/eslint-parser is inside parserOptions, not top-level parser.

ESLint 9 errors – downgrade: npm i -D eslint@8.

Windows line-ending diffs – endOfLine: lf + files.eol: "\n" + .gitattributes.

Want ESLint quality only – replace plugin:prettier/recommended with 'prettier' in extends; formatting and linting run separately (two save actions).

Summary: Six-Step Process

Install: prettier, eslint@8, bridge packages, Babel parser

Configure formatting: .prettierrc.json Configure quality: .eslintrc.js with prettier/recommended last

Add npm scripts: lint:fix as single fix command

Configure VS Code: save-time auto-format + ESLint fix

Add husky + lint-staged: pre-commit enforcement

The goal is invisibility: when "save formats, commit validates" becomes default behavior, the team stops arguing over indentation and quotes.