前端规范化

# 配置eslint

vite创建ts项目 yarn create vite
项目安装依赖 yarn
eslint安装 yarn add eslint -D
eslint初始化 npx eslint --init
得到eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard-with-typescript'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

生成的这个standard-with-typescript非常难用，一直报各种错误，可能比较严格，我们换成plugin:@typescript-eslint/recommended，顺便我们也把vue的也换成recommended

  extends: [
    //  'plugin:vue/vue3-essential',
    //  'standard-with-typescript'
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended"
  ],

1
2
3
4
5
6

执行eslint src，把开始报的错，全都禁止掉说这两个@typescript-eslint/no-explicit-any、@typescript-eslint/ban-types规则没找到，我们点error跳进去,发现代码里面确实用了。报错原因是因为我们引入的规则，已经将这两个规则用off取消掉了，但我们这个文件里还局部用了一下，规则不存在了，还用，当然报错了，把局部使用删掉就可以了。
继续执行eslint src
还报错，直接把这两个规则off取消

  rules: {
    "@typescript-eslint/ban-types":"off",
    "@typescript-eslint/no-explicit-any":"off"
  }

1
2
3
4

执行eslint src 恢复正常，我们去package.json配置scripts，

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
  },

1
2
3
4
5
6

执行yarn lint
不能正常解析vue，这里很有可能引入的extends两个冲突，将parser覆盖掉了，我们去查找原因。首先顺着plugin:vue/vue3-recommended查找，顺着内部的导入，最终引入了node_modules/eslint-plugin-vue/lib/configs/base.js,我们看到parser解析器用了parser: require.resolve('vue-eslint-parser') 同样的方式，找到了plugin:@typescript-eslint/recommended，最终使用了parser: '@typescript-eslint/parser' 所以问题找到了，eslint不能正常解析vue的原因，是因为vue的parser解析器被覆盖了，那我们将两个extend调换下顺序。

  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended"
],

1
2
3
4

执行yarn lint
因为这样解析typescript的parser解析器又被覆盖了，所以又报typescript相关的错误了因为我们vue项目用的是ts，所以要手动指定parserOptions.parser，至于为什么，文章工具->eslint中有写到。

parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
+ parser: "@typescript-eslint/parser"
},

1
2
3
4
5

再次执行yarn lint，都恢复正常了

# 配置prettier

yarn add -D prettier eslint-config-prettier安装
创建.prettierrc配置,下面是element-plus配置

{
  "semi": false,
  "singleQuote": true,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12

执行npx prettier --write src，无报错，配置成功

# husky

yarn add husky -D
package.json配置scripts，增加"prepare": "husky install"

# lint-staged

yarn add -D lint-staged
package.json增加配置

"lint-staged": {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
  "package.json": ["prettier --write"],
  "*.vue": ["eslint --fix", "prettier --write"],
  "*.{scss,less,styl,html}": ["prettier --write"],
  "*.md": ["prettier --write"]
}

1
2
3
4
5
6
7
8

配置git hooks yarn husky add .husky/pre-commit "npx lint-staged"
执行git add、git commit成功✌️

# commitlint

yarn add @commitlint/cli -D
添加git hooks npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
安装 commitizen yarn add commitizen -D
commitizen初始化,执行 npx --no-install commitizen init cz-conventional-changelog --save-dev --save-exact
自定义commitlint规则,执行yarn add commitlint-config-cz cz-customizable -D
创建.cz-config.js

module.exports = {
  types: [
    { value: "feat", name: "feat: 一个新的特性" },
    { value: "fix", name: "fix: 修复一个Bug" },
    { value: "docs", name: "docs: 变更的只有文档" },
    { value: "style", name: "style: 代码风格,格式修复" },
    { value: "refactor", name: "refactor: 代码重构，注意和feat、fix区分开" },
    { value: "perf", name: "perf: 码优化,改善性能" },
    { value: "test", name: "test: 测试" },
    { alue: "chore", name: "chore: 变更构建流程或辅助工具" },
    { value: "revert", name: "revert: 代码回退" },
    { value: "init", name: "init: 项目初始化" },
    { value: "build", name: "build: 变更项目构建或外部依赖" },
    { value: "WIP", name: "WIP: 进行中的工作" },
  ],
  scopes: [],
  allowTicketNumber: false,
  isTicketNumberRequired: false,
  ticketNumberPrefix: "TICKET-",
  ticketNumberRegExp: "\\d{1,5}",
  // it needs to match the value for field type. Eg.: 'fix'
  /*
  scopeOverrides: {
    fix: [
      {name: 'merge'},
      {name: 'style'},
      {name: 'e2eTest'},
      {name: 'unitTest'}
    ]
  },
  */
  // override the messages, defaults are as follows
  messages: {
    type: "选择一种你的提交类型:",
    scope: "选择一个scope (可选):",
    // used if allowCustomScopes is true
    customScope: "Denote the SCOPE of this change:",
    subject: "简短说明(最多40个字):",
    body: '长说明，使用"|"换行(可选)：\n',
    breaking: "非兼容性说明 (可选):\n",
    footer: "关联关闭的issue，例如：#12, #34(可选):\n",
    confirmCommit: "确定提交?",
  },
  allowCustomScopes: true,
  allowBreakingChanges: ["feat", "fix"],
  // skip any questions you want
  skipQuestions: ["scope", "body", "breaking"],
  // limit subject length
  subjectLimit: 100,
  // breaklineChar: '|', // It is supported for fields body and footer.
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true, // default is false
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

package.json,将 config.commitizen.path 更改为"node_modules/cz-customizable"

// package.json
// ...
{
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }
}
// ...

1
2
3
4
5
6
7
8
9
10

创建commitlint.config.js，为commitlint添加解析规则

module.exports = {
  extends: ["cz"],
};

1
2
3

vite创建的项目，package.json中指定了"type": "module"，说明js文件默认使用ESM模块规范，不支持commonjs规范，但是我们刚刚创建的几个配置文件.cz-config.js、commitlint.config.js都使用了module.exports语法。 img_pUP3n2 所以在运行 npx cz时报错了 img_1_u6wcaF 我们要将这两个配置文件后缀改为.cjs，再次执行npx cz，还是报错了 img_2_AVn6nt 由于我们改了.cz-config.js后缀，cz-customizable找不到配置文件了，我们需要在package.json手动加入

  "config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    },
    + "cz-customizable": {
    +   "config": ".cz-config.cjs"
    +  }
  }

1
2
3
4
5
6
7
8

再次执行npx cz，成功了。完结撒花！！！🌸🌸🌸

编辑

上次更新: 2022/09/04

← 银行卡号验证二维码与条形码→