通用-ESLint+Prettier基础知识

ESLint + Prettier 基础知识

一、概述

1.1 什么是 ESLint

ESLint 是一个可配置的 JavaScript 代码检查工具，用于发现和修复代码中的问题。

核心功能：

代码质量检查
代码风格检查
自动修复问题
可扩展规则

1.2 什么是 Prettier

Prettier 是一个代码格式化工具，自动格式化代码，保持一致的代码风格。

核心功能：

自动格式化代码
统一的代码风格
支持多种语言
零配置可用

1.3 为什么一起使用

工具	作用	关注点
ESLint	代码检查	代码质量、潜在错误
Prettier	代码格式化	代码风格、格式统一

配合使用：

ESLint 负责代码质量
Prettier 负责代码格式
通过插件避免冲突

二、安装和配置

2.1 安装

bash 复制代码

# 安装 ESLint
npm install --save-dev eslint

# 安装 Prettier
npm install --save-dev prettier

# 安装 ESLint + Prettier 集成
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

# 安装 Vue 项目相关
npm install --save-dev @vue/eslint-config-prettier

2.2 初始化 ESLint

bash 复制代码

# 交互式初始化
npx eslint --init

# 或手动创建配置文件

2.3 基础配置文件

.eslintrc.js 或 .eslintrc.json：

javascript 复制代码

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'prettier'  // 必须放在最后
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'no-console': 'warn',
    'no-unused-vars': 'warn'
  }
};

.prettierrc 或 .prettierrc.json：

json 复制代码

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid"
}

.prettierignore：

lua 复制代码

node_modules
dist
build
*.min.js
package-lock.json

三、ESLint 配置

3.1 配置文件格式

.eslintrc.js（JavaScript）：

javascript 复制代码

module.exports = {
  rules: {}
};

.eslintrc.json（JSON）：

json 复制代码

{
  "rules": {}
}

3.2 环境配置

javascript 复制代码

module.exports = {
  env: {
    browser: true,    // 浏览器全局变量
    node: true,       // Node.js 全局变量
    es2021: true,     // ES2021 语法
    jest: true        // Jest 测试框架
  }
};

3.3 扩展配置

javascript 复制代码

module.exports = {
  extends: [
    'eslint:recommended',                    // ESLint 推荐规则
    'plugin:vue/vue3-essential',            // Vue 3 基础规则
    'plugin:@typescript-eslint/recommended', // TypeScript 推荐规则
    'prettier'                               // 关闭与 Prettier 冲突的规则
  ]
};

3.4 规则配置

javascript 复制代码

module.exports = {
  rules: {
    // 错误级别：'off' 或 0, 'warn' 或 1, 'error' 或 2
    'no-console': 'warn',           // 警告使用 console
    'no-debugger': 'error',          // 错误使用 debugger
    'no-unused-vars': 'warn',        // 警告未使用的变量
    'prefer-const': 'error',         // 错误：应该使用 const
    'no-var': 'error',               // 错误：禁止使用 var
    
    // 带选项的规则
    'quotes': ['error', 'single'],   // 使用单引号
    'semi': ['error', 'always'],     // 必须使用分号
    'indent': ['error', 2],          // 缩进 2 个空格
  }
};

四、Prettier 配置

4.1 配置文件

.prettierrc 或 .prettierrc.json：

json 复制代码

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "lf"
}

4.2 常用配置选项

选项	说明	默认值	示例
semi	是否使用分号	false	`true` / `false`
singleQuote	是否使用单引号	false	`true` / `false`
tabWidth	缩进空格数	2	`2` / `4`
trailingComma	尾随逗号	'none'	`'none'` / `'es5'` / `'all'`
printWidth	每行最大长度	80	`80` / `100` / `120`
arrowParens	箭头函数参数括号	'always'	`'always'` / `'avoid'`
bracketSpacing	对象括号空格	true	`true` / `false`
endOfLine	行尾序列	'lf'	`'lf'` / `'crlf'` / `'cr'`

五、集成使用

5.1 ESLint + Prettier 集成

安装依赖：

bash 复制代码

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

配置 ESLint：

javascript 复制代码

module.exports = {
  extends: [
    'eslint:recommended',
    'prettier'  // 必须放在最后，关闭冲突规则
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'  // 将 Prettier 作为 ESLint 规则
  }
};

5.2 VSCode 配置

.vscode/settings.json：

json 复制代码

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

5.3 package.json 脚本

json 复制代码

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

六、常用命令

6.1 ESLint 命令

bash 复制代码

# 检查代码
npx eslint src/

# 检查并自动修复
npx eslint src/ --fix

# 检查指定扩展名
npx eslint . --ext .js,.jsx,.ts,.tsx,.vue

6.2 Prettier 命令

bash 复制代码

# 格式化所有文件
npx prettier --write "src/**/*.{js,jsx,ts,tsx,vue}"

# 检查格式（不修改）
npx prettier --check "src/**/*.{js,jsx,ts,tsx,vue}"

# 格式化单个文件
npx prettier --write src/index.js

七、配置文件示例

7.1 Vue 3 + TypeScript 项目

.eslintrc.js：

javascript 复制代码

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    ecmaVersion: 2021
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-explicit-any': 'warn',
    'vue/multi-word-component-names': 'off'
  }
};

.prettierrc：

json 复制代码

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid"
}

八、常见问题

8.1 ESLint 和 Prettier 冲突

问题： ESLint 和 Prettier 规则冲突

解决方案：

javascript 复制代码

// 安装 eslint-config-prettier
extends: [
  'eslint:recommended',
  'prettier'  // 必须放在最后
]

8.2 保存时自动格式化不生效

问题： VSCode 保存时不自动格式化

解决方案： 检查 .vscode/settings.json：

json 复制代码

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

8.3 某些文件不想检查

解决方案：

javascript 复制代码

// .eslintignore
node_modules
dist
*.min.js

// 在代码中禁用
/* eslint-disable */
const code = '这里不会被检查';
/* eslint-enable */

九、推荐资源

官方文档：

ESLint：eslint.org/
Prettier：prettier.io/

学习资源：

ESLint 中文文档：eslint.bootcss.com/
Prettier 中文文档：prettier.io/docs/zh-CN/

十、总结

复制代码

ESLint + Prettier 核心要点：

代码质量检查 + 代码格式统一 + 自动修复 = 高质量代码

核心心法：

ESLint 保证代码质量，Prettier 保证代码风格。两者配合使用，让代码更规范、更易维护。

📝 文档信息

作者: 阿鑫
更新日期: 2026.3