Vue 前端代码规范实战：ESLint v9、Prettier 与 Stylelint 集成指南与最佳实践

🚀 作者主页： 有来技术
🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template
🌺 仓库主页： GitCode︱ Gitee ︱ Github
💖 欢迎点赞 👍 收藏 ⭐评论 📝 如有错误敬请纠正！

目录

    • 前言
    • 集成 ESLint
      • 安装插件
      • 配置 ESLint
      • 快速初始化
      • 定制化配置
      • 添加 ESLint 运行脚本
      • 测试 ESLint
    • 集成 Prettier
      • 安装插件
      • 安装依赖
      • 配置 Prettier
      • 配置忽略文件
      • 添加格式化脚本
      • 保存自动格式化
      • 测试 Prettier
    • 集成 Stylelint
      • 安装插件
      • 安装依赖
      • 配置 Stylelint
      • 配置忽略文件
      • 添加 Stylelint 脚本
      • 保存自动修复
      • 测试 Stylelint
    • 结语

前言

本指南以开源项目 vue3-element-admin 的 Vue3 + TypeScript 技术栈为基础，提供 2025 年前端开发中 ESLint V9、Prettier 和 Stylelint 的最新配置与最佳实践，帮助开发者快速集成工具，提升团队协作效率和代码质量。

集成 ESLint

ESLint 是一款 JavaScript 和 TypeScript 的代码规范工具，能够帮助开发团队保持代码风格一致并减少常见错误。

ESLint 中文网：https://eslint.nodejs.cn/

安装插件

VSCode 插件市场搜索 ESLint 插件并安装

在这里插入图片描述

配置 ESLint

快速初始化

按照 ESLint 官方指南，可以使用以下命令快速生成 ESLint 配置文件：

npm init @eslint/config@latest

运行该命令后，ESLint 将通过交互式问答的方式，帮助安装相关依赖并生成默认配置文件 eslint.config.js。

默认生成的配置如下：

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";/** @type {import('eslint').Linter.Config[]} */
export default [{files: ["**/*.{js,mjs,cjs,ts,vue}"]},{languageOptions: { globals: globals.browser }},pluginJs.configs.recommended,...tseslint.configs.recommended,...pluginVue.configs["flat/essential"],{files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];

定制化配置

由于项目使用了 Vue 3 和 TypeScript，我们需要在默认配置的基础上进行调整，以适配当前项目。首先，安装必要的 ESLint 依赖：

pnpm add -D eslint-plugin-vue vue-eslint-parser eslint-config-prettier eslint-plugin-prettier
依赖作用
eslint-plugin-vue提供 Vue 相关的 ESLint 规则
vue-eslint-parser解析 .vue 文件
eslint-config-prettier关闭与 Prettier 冲突的 ESLint 规则
eslint-plugin-prettier将 Prettier 作为 ESLint 规则进行检测

以下是优化后的 eslint.config.js 配置，涵盖了 JavaScript、TypeScript 和 Vue 代码的检查规则，并集成了 Prettier 进行代码格式化。

// https://eslint.nodejs.cn/docs/latest/use/configure/configuration-filesimport globals from "globals";
import pluginJs from "@eslint/js"; // JavaScript 规则
import pluginVue from "eslint-plugin-vue"; // Vue 规则
import pluginTypeScript from "@typescript-eslint/eslint-plugin"; // TypeScript 规则import parserVue from "vue-eslint-parser"; // Vue 解析器
import parserTypeScript from "@typescript-eslint/parser"; // TypeScript 解析器import configPrettier from "eslint-config-prettier"; // 禁用与 Prettier 冲突的规则
import pluginPrettier from "eslint-plugin-prettier"; // 运行 Prettier 规则/** @type {import('eslint').Linter.Config[]} */
export default [// 指定检查文件和忽略文件{files: ["**/*.{js,mjs,cjs,ts,vue}"],ignores: ["**/*.d.ts"],},// 全局配置{languageOptions: {globals: {...globals.browser,...globals.node// 添加自定义的类型//  PageQuery: "readonly"},},plugins: { prettier: pluginPrettier },rules: {...configPrettier.rules, // 关闭与 Prettier 冲突的规则...pluginPrettier.configs.recommended.rules, // 启用 Prettier 规则"prettier/prettier": "error", // 强制 Prettier 格式化"no-unused-vars": ["error",{argsIgnorePattern: "^_", // 忽略以 _ 开头的变量未使用警告varsIgnorePattern: "^[A-Z0-9_]+$", // 忽略变量名为大写字母、数字或下划线组合的未使用警告（枚举定义未使用场景）ignoreRestSiblings: true, // 忽略解构赋值中同级未使用变量的警告},],},},// JavaScript 配置pluginJs.configs.recommended,// TypeScript 配置{files: ["**/*.ts"],ignores: ["**/*.d.ts"], // 排除d.ts文件languageOptions: {parser: parserTypeScript,parserOptions: {sourceType: "module",},},plugins: { "@typescript-eslint": pluginTypeScript },rules: {...pluginTypeScript.configs.strict.rules, // TypeScript 严格规则"@typescript-eslint/no-explicit-any": "off", // 允许使用 any"@typescript-eslint/no-empty-function": "off", // 允许空函数"@typescript-eslint/no-empty-object-type": "off", // 允许空对象类型},},// Vue 配置{files: ["**/*.vue"],languageOptions: {parser: parserVue,parserOptions: {parser: parserTypeScript,sourceType: "module",},},plugins: { vue: pluginVue, "@typescript-eslint": pluginTypeScript },processor: pluginVue.processors[".vue"],rules: {...pluginVue.configs["vue3-recommended"].rules, // Vue 3 推荐规则"vue/no-v-html": "off", // 允许 v-html"vue/multi-word-component-names": "off", // 允许单个单词组件名},},
];

添加 ESLint 运行脚本

为了方便使用 ESLint，我们可以在 package.json 中添加 lint 脚本：

{"scripts": {"lint:eslint": "eslint --cache  \"src/**/*.{vue,ts}\" --fix",}
}

该命令会自动修复符合 ESLint 规则的代码问题，并输出检查结果。

测试 ESLint

在 App.vue 文件中添加一个未使用的变量，并运行以下命令：

pnpm run lint:eslint

集成 Prettier

Prettier 是一个代码格式化工具，能够和 ESLint 配合使用，确保代码风格统一。

prettier 中文网：https://prettier.nodejs.cn/

安装插件

VSCode 插件市场搜索 Prettier - Code formatter 插件安装

安装依赖

pnpm install -D prettier eslint-config-prettier eslint-plugin-prettier
  • prettier：主要的 Prettier 格式化库。
  • eslint-config-prettier：禁用 ESLint 中与 Prettier 冲突的规则。
  • eslint-plugin-prettier：将 Prettier 的规则作为 ESLint 的规则来运行。

配置 Prettier

参考 Prettier 官方配置文档 在项目根目录下新建配置文件 .prettierrc.yaml，用于定义代码格式化规则。我们选择 YAML 格式，原因如下：

  1. JSON 文件不支持注释，不利于配置的说明和维护。
  2. JS 文件在某些情况下配置可能不生效（例如，测试发现 printWidth: 100 仍会按默认值 80 换行），可能是优先级问题，建议进一步验证。

以下是推荐的基础配置，供参考使用：

# 每行最多字符数量，超出换行(默认80)
printWidth: 100
# 缩进空格数，默认2个空格
tabWidth: 2
# 指定缩进方式，空格或tab，默认false，即使用空格
useTabs: false
# 使用分号
semi: true
# 使用单引号 (true:单引号;false:双引号)
singleQuote: false
# 末尾使用逗号
trailingComma: all

配置忽略文件

项目根目录新建 .prettierignore 文件指定 Prettier 不需要格式化的文件和文件夹

# .prettierignore
node_modules
dist
public
*.min.js

添加格式化脚本

在 package.json 文件中添加：

{"scripts": {"lint:prettier": "prettier --write \"**/*.{js,cjs,ts,json,css,scss,vue,html,md}\""}
}

保存自动格式化

打开 VSCode 的 File → Preferences → Settings，然后选择 Open Settings (JSON)，添加以下配置

{"editor.formatOnSave": true, // 保存格式化文件"editor.defaultFormatter": "esbenp.prettier-vscode" // 指定 prettier 为所有文件默认格式化器
}

测试 Prettier

下图演示了保存时的自动格式化效果，展示了代码中引号和换行的自动调整：

在这里插入图片描述

集成 Stylelint

Stylelint 一个强大的 CSS linter(检查器)，可帮助您避免错误并强制执行约定。

Stylelint 官网：https://stylelint.io/

安装插件

VSCode 插件搜索 Stylelint 并安装

安装依赖

pnpm install -D postcss postcss-html postcss-scss stylelint stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-recess-order stylelint-config-html stylelint-prettier
依赖说明备注
postcssCSS 解析工具，允许使用现代 CSS 语法并将其转换为兼容的旧语法-
postcss-html解析 HTML (类似 HTML) 的 PostCSS 语法参见 postcss-html 文档
postcss-scssPostCSS 的 SCSS 解析器参见 postcss-scss 文档，支持 CSS 行类注释
stylelintstylelint 核心库参见 stylelint
stylelint-config-recommended提供了基础的 Stylelint 配置，适用于大多数项目，允许自定义规则集与 stylelint-config-standard 相比，此配置提供了更多的灵活性
stylelint-config-recommended-scss扩展基础配置，为 SCSS 特定规则提供支持参见 stylelint-config-recommended-scss 文档
stylelint-config-recommended-vue扩展基础配置，为 Vue 文件中的样式提供支持参见 stylelint-config-recommended-vue 文档
stylelint-config-recess-order提供优化样式顺序的配置参见 CSS 书写顺序规范
stylelint-config-html为 HTML (类似 HTML) 文件提供共享配置参见 stylelint-config-html 文档
stylelint-prettier统一代码风格，格式冲突时以 Prettier 规则为准参见 stylelint-prettier

其中选择 stylelint-config-recommended 替代 stylelint-config-standard 的原因在于它不仅提供了灵活性，还更加轻量。stylelint-config-recommended 默认包含的规则较少，避免了 stylelint-config-standard 中可能不需要的规则，这样可以减少配置的复杂度，提高项目的启动速度，同时让开发者能够集中关注对项目真正重要的风格指南。轻量配置有助于简化工作流程，特别是在大型或复杂的项目中。

配置 Stylelint

根目录新建 .stylelintrc.cjs 文件，配置如下：

{"extends": ["stylelint-config-recommended","stylelint-config-recommended-scss","stylelint-config-recommended-vue/scss","stylelint-config-html/vue","stylelint-config-recess-order"],"plugins": ["stylelint-prettier"],"overrides": [{"files": ["**/*.{vue,html}"],"customSyntax": "postcss-html"},{"files": ["**/*.{css,scss}"],"customSyntax": "postcss-scss"}],"rules": {"import-notation": "string","selector-class-pattern": null,"custom-property-pattern": null,"keyframes-name-pattern": null,"no-descending-specificity": null,"no-empty-source": null,"selector-pseudo-class-no-unknown": [true,{"ignorePseudoClasses": ["global", "export", "deep"]}],"unit-no-unknown": [true, {"ignoreUnits": ["rpx"]}]   "property-no-unknown": [true,{"ignoreProperties": []}],"at-rule-no-unknown": [true,{"ignoreAtRules": ["apply", "use", "forward"]}]}
}

配置忽略文件

根目录创建 .stylelintignore 文件，配置忽略文件如下：

*.min.js
dist
public
node_modules

添加 Stylelint 脚本

package.json 添加 Stylelint 检测指令：

  "scripts": {"lint:stylelint": "stylelint  \"**/*.{css,scss,vue,html}\" --fix"}

保存自动修复

项目根目录下.vscode/settings.json 文件添加配置：

{"editor.codeActionsOnSave": {"source.fixAll.stylelint": true },"stylelint.validate": ["css", "scss", "vue", "html"]
}

为了验证把尺寸属性 width 放置在定位属性 position 前面，根据 CSS 书写顺序规范 推断是不符合规范的，在保存时 Stylelint 自动将属性重新排序，达到预期。

在这里插入图片描述

测试 Stylelint

执行以下命令进行检测

npm run lint:stylelint

在这里插入图片描述

结语

通过集成 ESLint、Prettier 和 Stylelint，您的项目将实现代码规范与风格的高度统一，提升开发效率和代码质量。这些工具的结合不仅能够自动检测和修复代码问题，还能确保团队协作中的一致性，减少沟通成本。随着项目的迭代，持续优化配置并遵循最佳实践，将为您的团队带来更高效的开发体验，同时为项目的长期维护打下坚实的基础。让我们以规范为基石，以工具为助力，共同打造高质量的代码！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/news/907741.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

docker docker-ce docker.io

docker docker-ce docker.io

Ubuntu安装 ​​更新软件包列表​​ 首先确保软件包列表是最新的： sudo apt-get update 使用正确的卸载命令​​ 替换 docker-engine 为 docker-ce 或 docker.io： sudo apt-get remove docker docker-ce docker.io containerd runc ​​检查已安装的 Do…
阅读更多...
C++ 初阶 | 类和对象易错知识点（下）

C++ 初阶 | 类和对象易错知识点（下）

目录 0.引言 1.初始化列表 2.static 静态成员变量： 静态成员函数： 3.友元函数 4.内部类 定义： 特点： 应用： 5.优化写法 6.例题 求和12...n (不能用for/while/if/else等关键字) 7.总结 0.引言 今天&…
阅读更多...
使用yocto搭建qemuarm64环境

使用yocto搭建qemuarm64环境

环境 yocto下载 # 源码下载 git clone git://git.yoctoproject.org/poky git reset --hard b223b6d533a6d617134c1c5bec8ed31657dd1268 构建 # 编译镜像 export MACHINE"qemuarm64" . oe-init-build-env bitbake core-image-full-cmdline 运行 # 跑虚拟机 export …
阅读更多...
AWS WebRTC：获取ICE服务地址（part 3）：STUN服务和TURN服务的作用

AWS WebRTC：获取ICE服务地址（part 3）：STUN服务和TURN服务的作用

STUN服务和TURN服务的作用： 服务全称作用是否中继流量适用场景STUNSession Traversal Utilities for NAT 协助设备发现自己的公网地址（srflx candidate） ❌ 不中继，仅辅助NAT 穿透成功时使用TURNTraversal Using Relays around N…
阅读更多...
分析XSSstrike源码

分析XSSstrike源码

#用于学习web安全自动化工具# 我能收获什么？ 1.XSS漏洞检测机制 学习如何构造和发送XSS payload如何识别响应中的回显，WAF，过滤规则等如何使用词典，编码策略，上下文探测等绕过过滤器 2.Python安全工具开发技巧 使…
阅读更多...
npm run build 报错：Some chunks are larger than 500 KB after minification

npm run build 报错：Some chunks are larger than 500 KB after minification

当我们的 Vue 项目太大，使用 npm run build 打包项目的时候，就有可能会遇到以下报错： (!) Some chunks are larger than 500 kB after minification. Consider: - Using dynamic import() to code-split the application - Use build.rollup…
阅读更多...
【LLM相关知识点】关于LLM项目实施流程的简单整理（一）

【LLM相关知识点】关于LLM项目实施流程的简单整理（一）

【LLM相关知识点】关于LLM项目实施流程的简单整理（一） 文章目录 【LLM相关知识点】关于LLM项目实施流程的简单整理（一）零、学习计划梳理：结合ChatGPT从零开始学习LLM & 多模态大模型一、大模型相关应用场景和头部企…
阅读更多...
海上石油钻井平台人员安全管控解决方案

海上石油钻井平台人员安全管控解决方案

一、行业挑战与需求分析 海上钻井平台面临复杂环境风险（如易燃易爆、金属干扰、极端气象）和人员管理难题（如定位模糊、应急响应延迟）。传统RFID或蓝牙定位技术存在精度不足（1-5米）、抗干扰能力差等问题&am…
阅读更多...
@Docker Compose 部署 Pushgateway

@Docker Compose 部署 Pushgateway

文章目录 Docker Compose 部署 Pushgateway1. 目的2. 适用范围3. 先决条件4. 部署步骤4.1 创建项目目录4.2 创建 docker-compose.yml 文件4.3 启动 Pushgateway 服务4.4 验证服务运行状态4.5 测试 Pushgateway 访问 5. 配置 Prometheus 采集 Pushgateway 数据6. 日常维护6.1 查…
阅读更多...
项目 react+taro 编写的微信 小程序，什么命令，可以减少console的显示

项目 react+taro 编写的微信 小程序，什么命令，可以减少console的显示

在 Taro 项目中，为了减少 console 的显示（例如 console.log、console.info 等），可以通过配置 terser-webpack-plugin 来移除生产环境中的 console 调用。 配置步骤： 修改 index.js 文件 在 mini.webpackChain 中添加 …
阅读更多...
Java开发中常见的数值处理陷阱与规避方法

Java开发中常见的数值处理陷阱与规避方法

八进制字面量的误用问题 历史背景与语法特性 由于历史原因，Java保留了八进制字面量的支持。八进制字面量以数字0开头，例如037表示十进制数31（计算方式：38 + 7 = 31）。这种表示法在现代编程中极少使用，唯一合理的应用场景是表示Unix文件权限（如0644表示用户可读写，组和…
阅读更多...
Lua5.4.2常用API整理记录

Lua5.4.2常用API整理记录

一、基础函数 1.type(value)​​ 返回值的类型（如 "nil", "number", "string", "table", "function" 等）。 代码测试： a 0 print(type(a)) a nil print(type(a)) a "aaaaaaaa&…
阅读更多...
2025.5.29 学习日记 docker概念以及基本指令

2025.5.29 学习日记 docker概念以及基本指令

Docker： Docker 是一种开源的容器化平台，用于快速部署应用程序，实现开发、测试和生产环境的一致性。 一、Docker 核心概念 镜像（Image） 只读的模板文件，用于创建容器，类似虚拟机的镜像&#x…
阅读更多...
明远智睿SSD2351开发板：语音机器人领域的变革力量

明远智睿SSD2351开发板：语音机器人领域的变革力量

在人工智能快速发展的今天，语音机器人逐渐成为人们生活和工作中的得力助手。明远智睿SSD2351开发板凭借强大性能与丰富功能，为语音机器人的发展注入新动力，成为该领域的变革力量。 SSD2351开发板的四核1.4GHz处理器具备强劲的运算性能&#x…
阅读更多...
嵌入式学习笔记 - keil安装目录下的头文件自动包含问题

嵌入式学习笔记 - keil安装目录下的头文件自动包含问题

Keil MDK/MDK-ARM（ARM编译器）默认情况下会自动包含其安装目录下的标准头文件路径（如CMSIS库、设备头文件等）。具体机制如下： ‌默认自动包含‌： 新建工程或使用设备数据库选择芯片型号后，Keil会…
阅读更多...
什么是数据驱动？以及我们应如何理解数据驱动？

什么是数据驱动？以及我们应如何理解数据驱动？

在谈到企业数字化转型时，很多人都会说起“数据驱动”，比如“数据驱动运营”、“数据驱动业务”等等。 在大家言必称“数据驱动”的时代背景下，我相信很多人并未深究和思考“数据驱动”的真正含义，只是过过嘴瘾罢了。那么&#xff…
阅读更多...
C++中全局变量和局部变量的区别

C++中全局变量和局部变量的区别

C中全局变量和局部变量的区别 在C（以及其他编程语言）中，变量的作用域和生命周期是两个非常重要的概念。全局变量和局部变量在作用域和生命周期上有显著的区别。下面我将详细讲解全局变量和局部变量的区别，并通过代码示例来帮助理…
阅读更多...
基于RPA技术的ECRobot企业智能体解决方案，打通企业自动化业务流程的最后一公里

基于RPA技术的ECRobot企业智能体解决方案，打通企业自动化业务流程的最后一公里

在企业的日常运营中，难免会遇到一些繁琐且重复的任务，这类高频次、低复杂度的事务性工作往往造成人力资源和成本的浪费。因此如何通过智能化工具实现流程自动化，已经成为企业数字化转型进程中的共性课题。 RPA技术：自动化赋能企业…
阅读更多...
ipv6与p2p的关系

ipv6与p2p的关系

在PCDN（P2P内容分发网络）领域，IPv6与PCDN盒子的关系紧密且相互影响，主要体现在以下几个方面： 一、IPv6的部署推动PCDN盒子普及 地址资源充足 IPv6采用128位地址，解决了IPv4地址枯竭的问题，为PC…
阅读更多...
大模型应用开发之预训练

大模型应用开发之预训练

预训练是研发大语言模型的第一个训练阶段，通过在大规模语料上进行预训练，大语言模型可以获得通用的语言理解与生成能力，掌握较为广泛的世界知识，具备解决众多下游任务的性能潜力 一、数据预处理 1. 数据的收集 1）通…
阅读更多...
最新文章

Copyright @ 2022~2023