配置 Eslint
快速配置
使用vite的脚手架创建一个项目
yarn create vite安装Eslint包
cd vite-project yarn add yarn add eslint -D配置eslint
npx eslint --init
安装依赖包
如果上一步中
Would you like to install them now with npm? 选择的为yes则可跳过当前步骤，否则，可以根据上一步骤的提示对需要的包进行安装
yarn add -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^8.2.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest 执行完以上的步骤基本的eslint配置就完成了，如果使用vscode的同学一定要注意要重启vscode才能生效
深度定制配置
踩坑
问题1：
当我打开App.vue文件的时候发现下面的错误，这个规则一看就是vue2 的规则阿
解决方法
vue是使用 eslint-plugin-vue 这个插件对vue的格式进行校验的我们打开它的文档看一下
可以看出来 vue3 推荐的是 plugin:vue/vue3-recommended 这个规则，而我们的 eslintrc.js 中使用的是 plugin:vue/essential 这个，我们修改代码如下，重新打开 App.vue 问题修复。
module.exports = {
extends: [
- 'plugin:vue/essential',
+ 'plugin:vue/vue3-recommended',
'airbnb-base',
]
}问题2：
当我安装上 vue-router 在app上使用时，报文件无法解析
解决方法
我们看到第一个错是 import/no-unresolved查看文档 主要原因是因为我们的文件名没有文件后缀所以文件不能被 require.resolve 方法所解析，通过添加一下代码，扩展解析器的解析后缀
module.exports = {
+ settings: {
+ 'import/resolver': {
+ node: {
+ extensions: [
+ '.js',
+ '.jsx',
+ '.ts',
+ ],
+ },
+ },
+ },
}另一个错是报的是 import/extension 缺少文件后缀，通过查看文档我们添加如下代码解决
module.exports = {
+ 'import/extensions': ['error', 'always', {
+ js: 'never',
+ mjs: 'never',
+ jsx: 'never',
+ ts: 'never',
+ tsx: 'never',
+ }],
}第一个参数为错误等级error表示异常，第二个参数always代表必须使用扩展，第三个参数对特定类型的文件进行设置
配置 Alias
Eslint alias需要借助 eslint-import-resolver-alias 这个插件才能实现
yarn add eslint-import-resolver-alias -D修改.eslintrc.js代码
module.exports = {
settings: {
+ 'import/resolver': {
+ alias: {
+ map: [
+ ['@components', './src/components'],
+ ],
+ extensions: ['.ts', '.js', '.jsx', '.json'],
+ },
+ },
},
}为了让 vite 在构建的时候能够识别Alias我们需要在vite.config.ts中添加如下配置
export default defineConfig({
+ resolve: {
+ alias: { '@components': './src/components' },
+ },
})配置Ts的 Eslint
ts 的语法lint 是使用@typescript-eslint/eslint-plugin插件实现的，插件本身只能识别ts的内容，不能识别vue文件中的其他内容，所以我们需要先更换eslint 的parse 为 vue-eslint-parser之后在配置 ts 推荐的lint规则，参考如下代码完成配置。
yarn add vue-eslint-parser修改 .eslintrc.js
module.exports = {
+ parser: 'vue-eslint-parser',
extends: [
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
parserOptions: {
+ project: ['./tsconfig.eslint.json'],
+ extraFileExtensions: ['.vue'],
}
}添加 tsconfig.eslint.json
{
"extends": "./tsconfig.json",
"include": ["./vite.config.ts",".eslintrc.js", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}在git commit 的时候对提交文件进行校验
第一步
在 package.json 中添加 lint:script 命令
{
"scripts": {
+ "lint:script":"eslint --ext .js,.jsx,.ts,.tsx,.vue --fix ./",
},
}执行 npm run lint:script 将对项目的代码进行检查
第二步
使用 lint-staged工具对暂存去的代码进行 lint
syarn add lint-staged -D在 package.json 中添加如下代码
{
+ "lint-staged" : {
+ "**/*.{js,jsx,tsx,ts,vue}": [
+ "npm run lint:script" ,
+ "git add ."
+ ]
+ }
}第三步
为了方便git 钩子的使用，我们需要安装 husky参考文档
yarn add husky -D
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx --no lint-staged"配置 Stylelint
安装 stylelint
yarn add stylelint stylelint-config-standard -D配置 .stylelintrc.js 文件
module.exports={
extends:["stylelint-config-standard",]
}配置package.json检查命令
{
"scripts": {
+ "lint:style":"stylelint --fix **/*.{css,less,scss.vue}",
}
}支持 Less
安装 postcss-less 包
yarn add postcss-less -D postcss 默认支持的是css 源，postcss-less 包是让 postcss 支持 less 源的工具
修改 .stylelintrc.js 文件
module.exports = {
+ overrides:[
+ {
+ files:["**/*.less"],
+ customSyntax:"postcss-less"
+ }
+ ]
}支持 Scss
安装 postcss-scss 包
yarn add postcss-scss -Dmodule.exports = {
overrides:[
+ {
+ files:["**/*.scss"],
+ customSyntax:"postcss-scss"
+ }
]
}支持css 属性顺序
支持属性顺序我们直接使用 rational-order 配置
安装依赖包
yarn add -D stylelint-order stylelint-config-rational-order修改 .stylelintrc.js
module.exports = {
extends:[
+ "stylelint-config-rational-order"
]
}按以上步骤操作完之后执行npm run lint:style有报错的话，可以执行yarn add -D postcss命令在本地安装一直最新的postcss包.
支持vue 文件
安装依赖包
yarn add -D postcss-html stylelint-config-recommended-vue修改 .stylelintrc.js
module.exports={
extends:[
+ "stylelint-config-recommended-vue"
]
}在git commit 的时候对文件进行校验
修改 package.json 文件
{
"lint-staged": {
+ "**/*.{css,less,scss,vue}":[
+ "npm run lint:style",
+ "git add ."
+ ]
}在补充几个在开发中遇到的问题
在覆盖 elui 的样式的时候如下代码报错如下
:deep(.el-form--inline .el-form-item) {
margin-right: 10px;
}
第一个的错是因为 stylelint 无法识别 :deep伪类
第二个错是因为stylelint 的 class 命名规范默认为使用中划线分割，而elemsntui 使用的是 bem的规范
针对上面两个问题我们需要扩展.stylelintrc.js中的rules属性让styelint支持，代码如下
module.exports = {
+ rules:{
+ 'selector-class-pattern':'^([a-z][a-z0-9]*)(-+[a-z0-9]+)*$',
+ 'selector-pseudo-class-no-unknown':[true,{
+ ignorePseudoClasses: ["deep"]
+ }]
+ }
}
