JavaScript 中 Vite 怎么集成 ESLint 与 Prettier-js教程-PHP中文网

vite项目集成eslint与prettier的核心是分工协作：eslint负责语法与逻辑检查，prettier统一格式；需按顺序配置——先引入eslint-config-prettier禁用eslint格式规则，再加载vue/ts规则，最后通过eslint-plugin-prettier将prettier作为eslint规则启用，并在vs code中设置保存时自动修复。

javascript 中 vite 怎么集成 eslint 与 prettier

在 Vite 项目中集成 ESLint 和 Prettier，核心是让 ESLint 负责代码质量检查（语法、潜在错误、逻辑问题），Prettier 负责统一代码格式（缩进、引号、换行等），两者协同工作不冲突。关键在于正确安装依赖、配置规则顺序、禁用 ESLint 中与 Prettier 重叠的格式化规则。

安装并初始化 ESLint

进入已创建的 Vite 项目根目录，运行初始化命令：

pnpm create @eslint/config@latest（推荐，ESLint 官方新 CLI，支持扁平化配置）
或旧方式：pnpx eslint --init

按提示选择：

What do you want to lint? → JavaScript
How would you like to use ESLint? → To check syntax and find problems
Type of modules? → JavaScript modules (import/export)
Framework? → Vue.js（若为 React/TS 项目则对应选择）
TypeScript? → Yes
Where does your code run? → 空格选中 Browser 和 Node
Config file format? → TypeScript（生成 eslint.config.ts）
Install dependencies now? → Yes，包管理器选 pnpm

完成后会自动安装 @eslint/js、eslint-plugin-vue、typescript-eslint 等必要插件，并生成配置文件。

安装并配置 Prettier

执行命令安装 Prettier 及其 ESLint 集成插件：

pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier

在项目根目录新建 .prettierrc.json，写入格式规则，例如：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

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

再建 .prettierignore，填入无需格式化的路径：

node_modules/
dist/
public/
*.md

整合 ESLint 与 Prettier 规则

编辑 eslint.config.ts，确保三类配置按顺序组合：

基础 JS 规则（如 @eslint/js）
eslint-config-prettier —— 必须放在 Vue/TS 规则之前，用于关闭所有与格式相关的 ESLint 规则
Vue + TS 专用规则（如 eslint-plugin-vue 推荐配置）
eslint-plugin-prettier —— 将 Prettier 作为 ESLint 的一条规则启用，级别设为 'error' 或 'warn'

示例片段（简化）：

import js from '@eslint/js'
import vue from 'eslint-plugin-vue'
import prettierConfig from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'

export default [
  js.configs.recommended,
  prettierConfig, // 关键：清空 ESLint 格式规则
  ...vue.configs['flat/strongly-recommended'],
  {
    files: ['**/*.{js,ts,vue}'],
    plugins: { prettier: prettierPlugin },
    rules: { 'prettier/prettier': 'error' }
  }
]

VS Code 中启用自动修复

安装官方 ESLint 插件（由 Dirk Baeumer 开发），然后在工作区 .vscode/settings.json 中添加：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

这样保存时自动执行 ESLint 修复（包括 Prettier 格式化），且不与其他格式化器冲突。