当前位置：首页 > news >正文

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

news 2026/7/2 2:51:05

初始化项目

使用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 里。