Vite+Vue3项目集成ESLint+Prettier+Stylelint+Husky让项目规范起来

最新推荐文章于 2025-10-10 03:53:06 发布

原创

最新推荐文章于 2025-10-10 03:53:06 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #typescript

本文介绍了如何在 Vite+Vue3 项目中集成 ESLint、Prettier、Stylelint 和 Husky，以实现代码规范和提交信息的标准化。涵盖了 ESLint 的安装、Prettier 的集成、保存时自动格式化、VSCode 配置、Stylelint 的使用以及 Husky 配置，包括 lint-staged 和 commit 规范。

随着前端工程化的发展,前端代码规范也显得越来越重要,所以作为一个前端对于这方面还是需要有一定的了解的。本篇文章将带大家使用ESLint+Prettier+Stylelint+Husky从零搭建一个Vite+Vue3项目

ESlint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误,它的使用其实很简单

首先安装 ESLint

pnpm i eslint -D

然后进行初始化

npx eslint --init

你会发现出现一些选择项

因为我们用的是 pnpm,所有那些工具没有安装,我们需要安装一下这些插件

pnpm i eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D

在package.json的script中添加命令lint:script

 "scripts": {"lint:script": "eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./"},

直接运行pnpm run lint:script会报错,我们需要将.eslintrc.json文件下的"parser": "@typescript-eslint/parser"

移动到parserOptions中,然后新增parser: vue-eslint-parser,因为eslint-plugin-vue规定如果用了其它解析器则需要将其移动到parseOptions下才不会发生冲突,如下

{"env": {"browser": true,"es2021": true},"extends": ["eslint:recommended","plugin:vue/vue3-essential","plugin:@typescript-eslint/recommended"],"overrides": [],"parser": "vue-eslint-parser","parserOptions": {"ecmaVersion": "latest","sourceType": "module","parser": "@typescript-eslint/parser"},"plugins": ["vue","@typescript-eslint"],"rules": {"indent": ["error",4],"linebreak-style": ["error","unix"],"quotes": ["error","double"],"semi": ["error","always"]}
}

最后执行