eslint, prettier, stylelint 的配置
这三个规则的配置思路:代码美化用 prettier,逻辑代码用 eslint 校验,样式代码用 stylelint 校验。有跟代码美化冲突的以 prettier 为主
为什么要用这么多呢,因为 eslint 不能解析样式代码,所以需要 stylelint,虽然可以给 eslint 配置 prettier 的规则,但是像 json,css 等文件却没办法美化,所以 prettier 的优势就突出来了,它能够保证不同文件的样式都一致
eslint
// .eslintrc.js
module.exports = {
root: true,
plugins: ["prettier"],
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-recommended",
"plugin:prettier/recommended",
],
parser: "vue-eslint-parser",
rules: {
"prettier/prettier": ["warn"],
},
parserOptions: {
parser: "@typescript-eslint/parser",
sourceType: "module",
},
};
大概规则解释:使用 eslint,typescript,vue3,prettier 的推荐配置,并且按照从下往上的顺序覆盖其他规则。
parser: 这个用了 vue 的,以此来解析 .vue 的代码, 并且设置 ts 代码解析器为 @typescript-eslint/parser
prettier
这个比较简单,我直接用的 prettier 的推荐配置
stylelint
// .stylelintrc.js
module.exports = {
extends: [
"stylelint-config-recess-order",
"stylelint-config-recommended-scss",
"stylelint-config-recommended-vue",
"stylelint-config-tailwindcss",
"stylelint-config-prettier",
],
};
大概规则解释(* 替换 stylelint-config):使用 -recess-order 来规定样式文件如何排序,-recommended-{scss, vue} 来提供 .scss 和 .vue 文件的解析能力。-tailwindcss 来规避我使用的 tailwindcss 造成的一些规则冲突,-prettier 来关闭跟 prettier 样式美化的规则
vscode 配置
目标:保证有 lint 错误的时候能够标红提示,保存代码时自动执行 prettier 命令来美化代码
// .vscode/settings.json
{
// 默认格式化插件:esbenp.prettier-vscode
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true, // 每次保存的时候进行格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false, // 每次保存的时候不进行 eslint 处理
},
"stylelint.enable": true, // 启用 stylelint 插件
"prettier.enable": true, // 启用 prettier 插件
"css.validate": false, // // 关闭 vscode 默认自带的 css 检查
}
用到的插件
// .vscode/extensions.json
{
"recommendations": [
"dbaeumer.vscode-eslint", // eslint 校验插件
"bradlc.vscode-tailwindcss", // tailwindcss 智能提示和检查插件
"heybourn.headwind", // 能够自动对 tailwindcss 的 class 变量进行排序
"esbenp.prettier-vscode", // prettier 格式化插件
"stylelint.vscode-stylelint", // stylelint 校验插件
"Vue.volar", // vue 代码高亮,智能提示插件
"ZixuanChen.vitest-explorer", // vitest 插件
]
}
这个 id 是这样得来的:
需要注意的坑
- prettieer 和 tsconfig 这俩个配置文件的更改并不能直接生效。需要重启一下 vscode
小技巧
- 让多个配置文件折叠显示, 在 .vscode/setting 中添加如下命令
{
"explorer.fileNesting.patterns": {
"package.json": "stylelint.config.js, .gitignore, ...",
"README.md": "CHANGELOG.md, LICENCE"
},
}
- 快速重启vscode
- 查看 vscode 执行的各种命令,比如查看 git 的执行命令
husky 和 lint-stated
目标:每次提交的代码都是通过 eslint stylelint 校验的
husky 一个流行的添加 git hooks 的插件,lint-stated 智能的对 git 中暂存的代码执行相应的操作
// .lintstagedrc.js
module.exports = {
"*.{js,ts,jsx,tsx}": ["eslint --fix"],
"*.{vue}": ["stylelint --fix", "eslint --fix"],
"*.{scss, css, less}": ["stylelint --fix", "prettier --write"],
"*.{json, md}": ["prettier --write"],
};
lint-stated 默认是并行执行的,为了防止冲突,我对不同后缀的文件设置了不同的命令,并且防止同一个文件多次执行相同的命令
vitest 和 vite
/// <reference types="vitest" />
export default defineConfig({
plugins: [vue(), vueJsx()],
build: {
lib: {
entry: "./src/components/ToastMessage.vue",
name: "index",
},
},
test: {
environment: "happy-dom",
},
});
打包用的 vite,测试工具用的 vitest,这样可以使用相同的配置文件
总结
一个好的项目离不开一整套的前端工程化工具,而常见的代码校验相关的就是 eslint prettier stylelint husky lint-stated。这些工具只要理解了,对于后面的代码维护能够起到极大地作用,而且每个项目都可以用到,一次学习处处应用,好处多多。
暂无评论内容