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 是这样得来的：

需要注意的坑

1.prettieer 和 tsconfig 这俩个配置文件的更改并不能直接生效。需要重启一下 vscode

小技巧

1.让多个配置文件折叠显示, 在 .vscode/setting 中添加如下命令

{"explorer.fileNesting.patterns": {"package.json": "stylelint.config.js, .gitignore, ...","README.md": "CHANGELOG.md, LICENCE"},
}

2.快速重启vscode

3.查看 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，这样可以使用相同的配置文件