ESLint + Prettier Config Deep Dive: Enforce Code Standards in Three Steps

Division of Responsibilities: ESLint vs Prettier

ESLint acts as a code quality scanner, catching logic errors, unused variables, complexity, and style issues like === vs =. Prettier is a code formatter that enforces consistent indentation, quotes, semicolons, line breaks, and bracket spacing. The two overlap on formatting rules (quotes, semicolons), so the standard solution is to disable formatting rules in ESLint via eslint-config-prettier, letting Prettier own formatting entirely.

Minimal Setup: Install and Initialize

# Install in project (Vue / React)
npm install -D eslint prettier

# Initialize ESLint config interactively
npx eslint --init

# Run initial scan
npx eslint src/          # scan src directory
npx eslint src/main.js --fix  # scan and auto-fix fixable issues

The eslint --init wizard asks about framework, TypeScript, module system, etc., and generates .eslintrc.js (or .eslintrc.cjs) with appropriate plugins. A clean run shows 0 problems; errors include rule codes like no-unused-vars for easy lookup.

.eslintrc Core Fields Explained

// .eslintrc.cjs
module.exports = {
  root: true,                 // stop searching parent directories
  env: {
    browser: true,            // browser globals (window, document)
    es2021: true              // enable ES2021 globals and syntax
  },
  extends: [                  // inherit rule presets
    'eslint:recommended',     // ESLint official recommended rules
    'plugin:vue/vue3-recommended', // Vue 3 plugin (if Vue project)
    'prettier'                // disable formatting rules, defer to Prettier
  ],
  parserOptions: {
    ecmaVersion: 'latest',    // support latest ECMAScript syntax
    sourceType: 'module'      // ES modules (import/export)
  },
  rules: {
    'no-console': 'warn',     // warn on console usage
    'no-unused-vars': 'warn', // warn on unused variables
    'semi': ['error', 'never'] // disallow semicolons, error on violation
  }
}

Key fields:

root : defines project boundary, prevents interference from ancestor configs.

env : declares runtime globals; browser: true enables window / console.

extends : imports preset rule sets; order matters, prettier should be last.

rules : overrides with three severity levels: error (fails build, auto-fixable), warn (warning only), off (disabled).

parserOptions : sets ECMAScript version and module type.

Best practice: extend official presets and add only a few rule overrides; avoid writing every rule manually.

.prettierrc: Formatting Config and ESLint Integration

{
  "semi": true,           // require semicolons
  "singleQuote": true,    // use single quotes
  "printWidth": 100,      // max line width before wrapping
  "tabWidth": 2,          // indentation spaces
  "trailingComma": "all" // add trailing commas where valid
}

Prettier's config defines the team's formatting style; there is no universal standard, but consistency across the team is the goal. To prevent conflicts, add 'prettier' to the extends array in .eslintrc (usually last). This disables all formatting-related rules in ESLint, so Prettier becomes the sole formatter. Without it, ESLint may demand double quotes while Prettier enforces single quotes, causing endless toggle errors.

One-Click Lint and Format Scripts

Add to package.json scripts:

"scripts": {
  "lint": "eslint src --ext .js,.vue,.jsx,.ts",
  "fmt": "prettier --write \"src/**/*.{js,vue,jsx,ts,css}\""
}

Usage: npm run lint – run before commit to catch quality issues. npm run fmt – format entire project to unified style.

Common Pitfalls Checklist

Changed .prettierrc but no effect – Editor (e.g., VS Code) may use its default settings; ensure editor is configured to use the project's .prettierrc.

.eslintrc.js throws "Cannot use import statement" – Project uses ESM but init generated CommonJS syntax. Rename to .eslintrc.cjs and use CommonJS module.exports.

no-console rule not working – Verify env.node: true is set (otherwise Node globals misjudged) and rule is explicitly defined in rules.

ESLint and Prettier conflict causing blank screen – 99% due to missing eslint-config-prettier; refer to integration step above.

Summary: Three Actions to Enforce Standards

① Install: eslint + prettier + eslint-config-prettier
② Configure: .eslintrc (quality) + .prettierrc (format), extends ends with 'prettier'
③ Run: npm run lint (verify) + npm run fmt (format)

Next step for mandatory compliance: integrate into Git commit workflow using husky + lint-staged to run lint automatically before each commit.