搭建vue3中后台管理模版 (三) - 集成 eslint、prettier、stylelint 以约束代码

配置 Eslint

语法检查工具 eslint.cn/

vite 并未默认安装eslint，这里我们需要手动安装

安装依赖

pnpm add -D eslint

初始配置

执行eslint初始化

pnpm eslint --init

依次初始化选项

(1) How would you like to use ESLint?
如何使用ESLint, 选 `problems`

(2) What type of modules does your project use?
使用什么样的引入模式，选 `(import/export)`

(3) Which framework does your project use?
使用的是哪个框架, 选 `Vue.js`

(4) Does your project use TypeScript?
使用了 TypeScript 吗，选 `Yes`

(5) Where does your code run?
代码运行在哪里？， 选浏览器端 `Browser`

(6) What format do you want your config file to be in?
需要配置文件使用什么格式，需要注释选 `JavaScript`, 不需要注释选 `Json`

(7) Would you like to install them now? 选择：Yes 
现在安装吗？，选 `Yes`

(8) Which package manager do you want to use?
使用的是那个包管理器？， 用什么选什么，这里选的 `pnpm`

配置文件 .eslintrc.json

rules 规则配置：eslint.cn/docs/rules/

执行完成后根目录生成了 .eslintrc.json 配置文件

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

添加 airbnb 风格规范

安装 eslint-config-airbnb-base

pnpm add -D eslint-config-airbnb-base

添加规则

{
    "extends": [
        "eslint:recommended",
+       "airbnb-base",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
}

忽略配置 .eslintignore

根目录创建 .eslintignore 文件，配置忽略不需要解析的文件或目录

配置规则：参考 gitignore的配置规则

/hello/*    // 开头有“/”，匹配相对于`.gitignore`文件本身的目录级别的。
hello/      // 结尾“/”， 匹配任意级别的hello目录下的所有目录（不包含文件）
hello.*     // 匹配以hello.开头的文件或者文件夹
hello/*     // 匹配hello目录下的所有目录和文件
!/foo/bar   // 排除目录 foo/bar 之外的所有内容
**/foo      // 前导 " `**`"，在所有目录中匹配， 与foo相同
foo/**      // 尾随的“ `/**`”匹配里面的所有内容。匹配目录“ `foo`”下的所有文件

/.vscode/*
/.idea/*
/.husky/*

/public/*
/dist/*

/src/vite-env.d.ts
components.d.ts

添加命令行 lint

在 package.json 文件中的 script 中添加 lint 命令

eslint 命令行配置文档 eslint.bootcss.com/docs/user-g…

• . 为指定lint当前项目中的文件
• --ext 为指定lint哪些后缀的文件
• --fix 开启自动修复

{
    "scripts": {
        "lint": "eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix"
    }
}

测试一下，在App.vue中随便写个对象

执行 lint 命令，虽然命令行无信息返回，但文件中的代码被纠正了

问题处理

1. 当配置文件为 .eslintrc.js 时，报eslint找不到module的报错

env字段中增加node: true配置解决

{
    "env": {
        "browser": true,
        "es2021": true,
+       "node": true
    },
}

2. 解析.vue后缀的文件时候出现解析错误parsing error

• 根属性 parser 改为 "parser": "vue-eslint-parser"
• 在 parserOptions 对象中添加 "parser": "@typescript-eslint/parser",

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
+   "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
+       "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

配置 Prettier

代码格式化工具

• 官方文档：www.prettier.cn/
• 规则配置：www.prettier.cn/docs/option…

安装依赖

pnpm add -D prettier

配置文件 .prettierrc.json

在根目录下新建 .prettierrc.json

配置规则： prettier.io/docs/en/opt…

实际项目中请去除 json 文件中的注释

{
    // 一行的字符数，如果超过会进行换行，默认为80
    "printWidth": 200,
    // 一个tab代表几个空格数
    "tabWidth": 2,
    // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
    "useTabs": false,
    // 字符串是否使用单引号，默认为false，使用双引号
    "singleQuote": true,
    // 行位是否使用分号，默认为true
    "semi": false,
    // 是否使用尾逗号，有三个可选值"<none|es5|all>"
    "trailingComma": "none",
    // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    "bracketSpacing": true
}

添加以下配置，更多配置可查看官方文档

添加命令行 format

{
    "scripts": {
        "format": "prettier --write \"./**/*.{html,vue,js,jsx,ts,tsx,json}\"",
    }
}

测试一下看看，如果报错了看是不是与eslint冲突问题

问题处理

1. 解决 eslint 与 prettier 的冲突

使用社区提供的方案

安装依赖

pnpm add -D eslint-config-prettier eslint-plugin-prettier

在 .eslintrc.json中extends的最后添加一个配置（必须放在最后面）

{ 
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
+       "plugin:prettier/recommended"
    ],
}

最后 重启vscode

配置 Stylelint

CSS 样式格式化工具

• 官方文档：stylelint.bootcss.com/
• 规则配置：stylelint.bootcss.com/user-guide/…

安装依赖

pnpm add -D stylelint stylelint-scss stylelint-order stylelint-config-standard stylelint-config-standard-vue stylelint-config-prettier stylelint-config-recommended-scss postcss postcss-scss postcss-html

依赖项说明

依赖名称	说明	官网文档
stylelint	css样式lint工具	stylelint.io/
stylelint-scss	特定于SCSS语法的规则	github.com/shellscape/…
stylelint-order	CSS属性排序	github.com/hudochenkov…
stylelint-config-standard	stylelint的推荐配置	github.com/stylelint/s…
stylelint-config-standard-vue	lint.vue文件的样式配置	github.com/ota-meshi/s…
stylelint-config-prettier	关闭所有不必要或可能与Prettier冲突的规则	github.com/prettier/st…
stylelint-config-recommended-scss	scss的推荐可共享配置规则	github.com/ssivanatara…
postcss	转换css代码工具	www.postcss.com.cn/
postcss-scss	识别scss语法	github.com/ssivanatara…
postcss-html	识别html/vue 中的<style></style>标签中的样式	github.com/gucong3000/…

配置文件 .stylelintrc.json

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-recommended-scss",
    "stylelint-config-standard-vue"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "overrides": [
    {
      "files": [
        "**/*.(scss|css|vue|html)"
      ],
      "customSyntax": "postcss-scss"
    },
    {
      "files": [
        "**/*.(html|vue)"
      ],
      "customSyntax": "postcss-html"
    }
  ],
  "ignoreFiles": [
    "**/*.js",
    "**/*.jsx",
    "**/*.tsx",
    "**/*.ts",
    "**/*.json",
    "**/*.md",
    "**/*.yaml"
  ],
  "rules": {
    "no-descending-specificity": null,
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": [
          "v-deep"
        ]
      }
    ],
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": [
          "deep"
        ]
      }
    ],
    "order/properties-order": [
      "position",
      "top",
      "left",
      "right",
      "bottom",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-family",
      "font-size",
      "font-weight",
      "font-synthesis",
      "line-height",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "color-scheme",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-radius",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition",
      "overflow",
      "overflow-x",
      "overflow-y",
      "z-index"
    ]
  }
}

添加命令行 lint:style

{
    "scripts": {
        "lint:style": "stylelint \"src/**/*.{css,scss,vue,html}\" --fix"
    }
}

测试一下，运行一下 lint:style

可以看到 style.css 中属性都被格式化了

VS Code 安装相关插件

安装相关插件以实现保存时，自动调用命令，提高效率

ESlint

实现每次保存代码时，自动执行lint命令来修复代码的错误

在 .vscode/settings.json文件中加入以下配置。

{
+   "editor.codeActionsOnSave": {
+       "source.fixAll": false,
+       "source.fixAll.eslint": true
+   }
}

• editor.codeActionsOnSave 开启自动修复

Prettier - Code formatter

实现每次保存代码时，自动完成格式化

在 .vscode/settings.json文件中加入以下配置。

{
+   "editor.formatOnSave": true,
+   "editor.defaultFormatter": "esbenp.prettier-vscode"
}

• editor.formatOnSave 保存的时候自动格式化
• editor.defaultFormatter 默认格式化工具选择prettier

Stylelint

实现每次保存代码时, 自动执行 stylelint

在 .vscode/settings.json文件中加入以下配置

{
    "editor.codeActionsOnSave": {
+       "source.fixAll.stylelint": true
    }
+   "stylelint.validate": ["css", "scss", "vue", "html"]
}

通过扩展标识符设置项目推荐

在 extensions.json 注意到有一个 recommendations 属性，找文档看这个属性干嘛用的

再找一下推荐扩展的

recommendations 里配置的时扩展的标识符 vue.volar（右下角）

那么我们把上面添加的 VS Code 都加到 recommendations 里吧

.vscode/extensions.json

{
    "recommendations": [
        "Vue.volar",
+       "dbaeumer.vscode-eslint",
+       "esbenp.prettier-vscode",
+       "stylelint.vscode-stylelint"
    ],
}

再来看推荐扩展刚好对应上了

完整配置 .vscode/

extensions.json

{
    "recommendations": [
        "Vue.volar",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "stylelint.vscode-stylelint"
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "stylelint.validate": ["css", "scss", "vue", "html"]
}

settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "css.validate": false,
    "scss.validate": false,
    "stylelint.validate": ["css", "scss", "vue", "html"],
    "eslint.alwaysShowStatus": true,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "eslint.format.enable": true,
    "eslint.options": {
        "overrideConfigFile": ".eslintrc.json"
    },
    "eslint.validate": [
        "javascript",
        "vue",
        "html"
    ],
    "files.autoSave": "off",
    "vetur.validation.template": false
}