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

随着前端工程化的发展,前端代码规范也显得越来越重要,所以作为一个前端对于这方面还是需要有一定的了解的。本篇文章将带大家使用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"]}
} 

最后执行

 pnpm lint:script 

即可对代码进行校验。

集成 Prettier

Prettier 对代码做格式化