使用vite脚手架创建vue3项目配置eslint+stylelint

配置 Eslint

快速配置

1. 使用vite的脚手架创建一个项目

   yarn create vite

2. 安装Eslint包

   cd vite-project
   yarn add 
   yarn add eslint -D

3. 配置eslint

   npx eslint --init

   

4. 安装依赖包

   如果上一步中 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 -D

module.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包.

stylelint官方推荐的一些配置和插件

支持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"]
+   }]
+ }
}