H3-UI

# 快速入门

维护人：木木(linqh@authine.com)

# 前言

内部 npm 仓提供的规则包已经内置好对应的 parser及调整的规则，各位大佬只要继承即可。

非特殊情况下不动其他的，只允许在rules 里面去覆盖规则

{
  "extends": [
    "@h3/eslint-config-standard",
    "@h3/eslint-config-vue",
    "@h3/eslint-config-typescript"
  ],
  "rules": {}
}
1
2
3
4
5
6
7
8

eslint 内的 extends 继承规则,若是以eslint-config-*开头的 npm 包，

eslint-config可以忽略，以下等同于上面的写法

{
  "extends": [
    "@h3/standard",
    "@h3/vue",
    "@h3/typescript"
  ],
  "rules": {}
}
1
2
3
4
5
6
7
8

# 规则处理

选项 介绍
0或'off' 关闭规则
1或'warn' 打开规则，并且作为一个警告（并不会导致检查不通过）
2或'error' 打开规则，并且作为一个错误 (退出码为 1，检查不通过)

标准姿势"@typescript-eslint/prefer-regexp-exec": 0,

还有更高级的配置，数组形式的，一般适用于有多种可选配置的，比如

"@typescript-eslint/typedef": [
      "error",
      {
        "arrayDestructuring": false,
        "arrowParameter":  false,
        "objectDestructuring": false,
        "propertyDeclaration": false,
        "arrowParameter": false,
        "parameter":  true,
        "memberVariableDeclaration":  true,
        "variableDeclaration": true
      }
]
1
2
3
4
5
6
7
8
9
10
11
12
13

# 项目引入

  • @h3/eslint-config-standard: 这是针对 JS 的基础库
  • @h3/eslint-config-vue: 这是针对 Vue 的基础规则库
  • @h3/eslint-config-typescript: 这是针对 Typescript 的基础规则库

项目内的技术栈构成需要调整部分选项，也就是.eslintrc.js需要额外配置

# Vue+JS

"extends": [
  "@h3/standard",
  "@h3/vue",
]
1
2
3
4

# Vue+TS

"extends": [
  "@h3/standard",
  "@h3/vue",
  "@h3/typescript"
],
1
2
3
4
5

# JS

"extends": [
  "@h3/standard",
],
1
2
3

# TS

"extends": [
  "@h3/standard",
  "@h3/typescript",
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
  "project": "./tsconfig.json",
  "tsconfigRootDir": __dirname,
}
1
2
3
4
5
6
7
8
9

# 额外定制

只继承规则，是不需要以下这些的。

有部分情况下，你们开启了某部分规则，需要引入对应的parser才能定制

调整开发项目下的.eslintrc.js

// vue+js
"parser": "vue-eslint-parser",
"parserOptions": {
  "parser": "babel-eslint",
}

// vue + ts
"parser": "vue-eslint-parser",
"parserOptions": {
  "parser": '@typescript-eslint/parser',
}
1
2
3
4
5
6
7
8
9
10
11

# FAQ

# 为什么不考虑 TS Lint 来规范 TS

TSLint 维护团队放弃了 TSLint,转而投向了 ESLint,也就说去加强 ESLint,让其也支持 TS 的规范。

我们可以减少依赖及学习成本，他们也能降低维护成本，让规范推进更加快速。

# ESLint 的好处

若是真正落实到位，可以规避很多常规性的错误，代码的可阅读性也会加强很多，团队协作的成本会有所降低。

# 相关资源

eslint-config-standard →