从0开始为Vue3+TS+Vite项目配置ESLint+Prettier

初始化项目

使用cli命令初始化一个Vue3+TS+Vite项目：

# npm
npm create vite@latest

# yarn
yarn create vite

# pnpm
pnpm create vite

注：后续演示使用pnpm包管理器。

按下图选择配置：

配置ESLint

1、安装ESLint

执行cli命令安装和初始化ESLint：

# npm
npx eslint --init

# yarn 
yarn dlx eslint --init

# pnpm
pnpx eslint --init

执行命令后，会询问详细配置信息，根据实际需要进行配置：

What do you want to lint? 你想检查什么文件？

选择 JavaScript
How would you like to use ESLint? 你希望 ESLint 做什么？

选择 To check syntax and find problems ，语法+潜在bug检查
What type of modules does your project use? 你的项目用什么模块化？

选择 JavaScript modules (import/export) ，使用ES模块
Which framework does your project use? 你的项目用什么框架？

选择 Vue.js
Does your project use TypeScript? 你的项目用TypeScript吗？

选择 Yes
Where does your code run? 你的代码运行在哪里？

空格选择 Browser 和 Node ，浏览器 + Node 环境都支持
Which language do you want your configuration file be written in? 你的 ESLint 配置文件想用什么语言写？

选择 TypeScript
Jiti is required for Node.js <24.3.0 to read TypeScript configuration files. 低版本 Node 不能直接读 TS 格式的 ESLint 配置，需要安装一个工具：jiti

Would you like to add Jiti as a devDependency? 你要安装 jiti 吗？

选择 Yes
The config requires following dependencies 你的配置需要这些依赖
```
eslint, @eslint/js, globals, typescript-eslint, eslint-plugin-vue, jiti
```
Would you like to install them now? 现在安装吗？

选择 Yes
Which package manager do you want to use? 用什么包管理器？

选择 pnpm
最终配置如下：

2、eslint.config.ts 配置文件

安装完依赖后，项目根目录会出现eslint.config.ts配置文件。

可以在选项中增加rules属性，添加自定义格式规则。
不过后面使用Prettier的话，这里就不用配置了。
这里为了演示，添加规则semi：强制语句末尾添加分号，否则警告。

// 导入 ESLint 官方的 JavaScript 核心规则
import js from "@eslint/js";
// 导入全局变量定义（浏览器/Node.js 内置变量）
import globals from "globals";
// 导入 TypeScript ESLint 插件（支持检查 TS 代码）
import tseslint from "typescript-eslint";
// 导入 Vue ESLint 插件（支持检查 .vue 文件）
import pluginVue from "eslint-plugin-vue";
// ESLint 9 扁平配置的工具函数（类型提示+规范配置格式）
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    // 匹配检查的文件：JS、TS、Vue 全部文件
    files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
    // 启用 ESLint 官方 JS 插件
    plugins: { js },
    // 继承 ESLint 官方推荐的 JS 规则（基础语法检查）
    extends: ["js/recommended"],
    // 全局变量配置：同时支持浏览器 + Node.js 全局变量
    // 比如 window、document、process、require 不会报未定义
    languageOptions: { globals: { ...globals.browser, ...globals.node } },
    // 可以在这里增加rules属性，添加自定义格式规则，使用Prettier的话，这里就不用配置
    rules: {
      semi: ["warn", "always"], // 必须在语句末尾加分号，否则警告
    },
  },
  // 继承 TypeScript-ESLint 官方推荐规则
  tseslint.configs.recommended,
  // 继承 Vue 官方核心必备规则（扁平配置专用）
  pluginVue.configs["flat/essential"],
  {
    // 只对 .vue 文件生效
    files: ["**/*.vue"],
    // 让 Vue 文件中的 <script lang="ts"> 支持 TypeScript 解析
    languageOptions: { parserOptions: { parser: tseslint.parser } },
  },
]);

3、package.json 文件增加命令

在package.json 的scripts中，增加两个脚本命令：

"lint": "eslint",
"lint:fix": "eslint --fix"

"lint": "eslint"：对整个项目进行ESLint检查，不修改代码。
"lint:fix": "eslint --fix"：扫描代码，自动修复所有 ESLint 能自动修复的问题

到这里，已经可以使用命令行对代码进行代码质量检查、自动修复代码：

# 代码质量检查
pnpm lint

# 自动修复代码
pnpm lint:fix

配置Prettier

1、安装依赖

安装3个开发依赖：prettier、eslint-config-prettier、eslint-plugin-prettier 。

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

prettier：核心代码格式化工具，自动格式化代码，统一代码风格。
eslint-config-prettier：关闭 ESLint 与 Prettier 冲突的规则。
eslint-plugin-prettier：把 Prettier 变成 ESLint 的一条规则，让 Prettier 的格式化能力集成到 ESLint 里。

2、修改 eslint.config.ts 文件

引入eslint-config-prettier、eslint-plugin-prettier 两个插件。

// ......
// 导入 Prettier 的 ESLint 配置（关闭与 Prettier 冲突的规则）
import eslintConfigPrettier from "eslint-config-prettier/flat";
// 导入 Prettier 的 ESLint 插件（将 Prettier 作为 ESLint 规则运行，显示格式问题）
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";

export default defineConfig([
  // ......,
  // 必须放在其他规则后面！
  eslintConfigPrettier,
  eslintPluginPrettierRecommended,
]);

3、配置 .prettierrc 文件

在根目录新建.prettierrc文件或者终端执行命令：

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

在.prettierrc 文件中进行代码风格规则配置，比如

{
    "singleQuote": true,
    "tabWidth": 2,
    "semi": false
}

配置后，就能：

修复语法错误（ESLint）
修复格式错误（Prettier）

4、使用

现在，你可以使用ESLint，对代码进行格式和语法的检查与修复。

# 代码质量检查
pnpm lint

# 自动修复代码
pnpm lint:fix

VSCODE插件

推荐安装ESLint、Prettier。

ESLint 插件

读取项目里的eslint配置文件，实时：

标红 / 波浪线提示代码语法、规范、格式错误
保存时自动执行 eslint --fix 修复代码
识别你项目安装的 eslint 依赖，走项目本地配置

Prettier 插件

读取项目 .prettierrc，单纯做代码格式化：引号、分号、缩进、换行等。

VSCODE配置保存自动格式化代码

打开VSCODE设置面板，搜索 format

Format On Save：勾选，保存时自动格式化代码
Default Formatter：选择 Prettier - Code formatter

这样每次保存代码后，VSCODE都会根据Prettier规则自动格式化代码。

.prettierrc 推荐配置

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": true,
  "endOfLine": "lf"
}

printWidth: 120

一行代码的最大字符宽度，超过这个宽度会自动换行，120 是前端项目通用值，适配主流显示器。
tabWidth: 2

缩进空格数，Vue 官方规范强制使用 2 个空格缩进。
useTabs: false

不使用 Tab 键缩进，改用空格缩进，避免不同编辑器 Tab 显示不一致的问题。
semi: true

代码末尾保留分号，防止 JavaScript 自动分号补全导致的语法异常。
singleQuote: true

强制使用单引号，Vue 项目通用代码风格，双引号会自动转为单引号。
quoteProps: "as-needed"

对象属性仅在必要时（如包含特殊字符）才加引号，保持代码简洁。
jsxSingleQuote: false

JSX 语法中使用双引号，符合 React/JSX 通用规范，不与 Vue 冲突。
trailingComma: "es5"

ES5 兼容的尾逗号，对象、数组最后一项末尾保留逗号，提升代码可维护性。
bracketSpacing: true

对象字面量的大括号内侧保留空格，例如 { name: 'xxx' } 而非 {name:'xxx'}。
bracketSameLine: false

HTML 标签、Vue 模板的闭合尖括号单独一行，符合前端主流美观格式。
jsxBracketSameLine: false

JSX 标签闭合尖括号单独一行，和 bracketSameLine 保持一致风格。
arrowParens: "always"

箭头函数单个参数时不省略括号，例如 (item) => {} 而非 item => {} 。
requirePragma: false

不需要文件顶部添加特殊注释就自动格式化，日常开发必备。
insertPragma: false

不自动在文件顶部插入格式化标记，避免冗余代码。
proseWrap: "preserve"

保持 markdown 等文本文件的原始换行方式，不强制重新排版。
htmlWhitespaceSensitivity: "css"

HTML 空白字符遵循 CSS 显示规则，避免 Vue 模板因空格导致布局异常。
vueIndentScriptAndStyle: true

Vue 专属配置，让 .vue 文件中 <script> 和 <style> 标签内的内容自动缩进，更美观。
endOfLine: "lf"

统一换行符为 LF，解决 Windows (CRLF) 和 Mac/Linux (LF) 换行符冲突问题，Git 协作必备。

posted @ 2026-05-12 21:37 前端cry 阅读(109) 评论(0) 收藏举报

刷新页面返回顶部