h7ml
前端物语
前端物语
积微成著

editorconfig

gitattributes

gitignore

prettierrc

license

package.json

tsconfig_json

eslintrc

使用 husky、lint-staged、commitlint 构建前端工作流

作用

可以帮助我们在 commit 前，对代码和 commit messages 进行 lint

介绍

husky 是一个 Git Hooks 工具，让你操作 Git Hooks 变得更容易

lint-staged 可以只对 git 暂存文件运行 lint 从而提高速度

commitlint 检查 git commit messages 是否符合规范

commitizen 获得有关提交消息格式的即时反馈，并提示您输入必填字段。

安装

1yarn add -D husky lint-staged @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog

使用 commitlint

修改package.json

1{
2  "scripts": {
3    "commit": "git-cz"
4  },
5  "husky": {
6    "hooks": {
7      "pre-commit": "lint-staged",
8      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
9    }
10  },
11  "lint-staged": {
12    "src/**/*.{js,ts,tsx}": ["eslint --fix", "prettier --write", "git add"]
13  },
14  "config": {
15    "commitizen": {
16      "path": "cz-conventional-changelog"
17    }
18  }
19}
  • 根目录创建 commitlint.config.js
1module.exports = {
2  extends: ['@commitlint/config-conventional'],
3}

@commitlint/config-conventional type 说明

type 含义 feat 新功能 fix 修复 bug docs 修改文档 style 代码格式修改 refactor 重构（即不是新增功能，也不是修复 bug） perf 更改代码以提高性能 test 增加测试 build 构建过程或辅助工具的变动 ci 修改项目持续集成流程 chore 其他类型的提交 revert 恢复上一次提交

在项目中使用 ESLint 和 Prettier

全局安装依赖

1pnpm add -g eslint
1eslint --init

它会问你一些问题，你可以按照你的喜好进行配置，我选的是 popular 下面的 standard，生成的文件是 js 格式，那么就会创建出 eslintrc.js 文件

1module.exports = {
2  extends: 'standard',
3};

配置文件 .eslintrc.js 介绍

根目录新建 .eslintrc.js 文件 dgiot-dashboard .eslintrc.js

1module.exports = {
2  root: true,
3  globals: {
4    moment: true,
5    Vue: true,
6    axios: true,
7    $: true,
8    Cookies: true,
9    downLink: true,
10    downloadFile: true,
11    downloadByLink: true,
12    _: true,
13    options: true,
14    Konva: true,
15    bcrypt: true,
16    BeFull: true,
17    JSONEditor: true,
18    VueAMap: true,
19    topology: true,
20    konva: true,
21    VCharts: true,
22    CountTo: true,
23    VueKonva: true,
24    Mock: true,
25    md5: true,
26    Base64: true,
27    ace: true,
28    mqtt: true,
29    COS: true,
30    paho: true,
31    Sortable: true,
32    vuex: true,
33    VueRouter: true,
34    clipboard: true,
35    lodash: true,
36    VueI18n: true,
37    XLSX: true,
38    colors: true,
39    FileSaver: true,
40    VueBaiduMap: true,
41    echarts: true,
42    screenfull: true,
43    qs: true,
44    Qs: true,
45    jsplumb: true,
46    JSEncrypt: true,
47    CodeMirror: true,
48    nprogress: true,
49    vueCodemirror: true,
50    vuedraggable: true,
51    elementChinaAreaData: true,
52    vueFlvPlayer: true,
53    EZUIKit: true,
54    fuzzy: true,
55    VueAliplayerV2: true,
56  },
57  env: {
58    node: true,
59  },
60  extends: ['plugin:vue/recommended', 'eslint:recommended', '@vue/prettier'],
61  parser: 'vue-eslint-parser',
62  parserOptions: {
63    sourceType: 'module',
64    ecmaVersion: 2020,
65    ecmaFeatures: {
66      jsx: true,
67    },
68  },
69  rules: {
70    'no-unused-labels': 'off',
71    'no-unused-vars': 'off',
72    'no-undef': 'off',
73    'no-redeclare': 'off',
74    'no-unreachable': 'off',
75    'no-useless-escape': 'off',
76    'no-case-declarations': 'off',
77    'no-dupe-else-if': 'off',
78    'no-irregular-whitespace': 'off',
79    'no-prototype-builtins': 'off',
80    'no-empty': 'off',
81    'no-dupe-keys': 'off',
82    'no-self-assign': 'off',
83    'no-console': 'off',
84    'no-debugger': 'off',
85    'vue/no-unused-vars': 'off',
86    'vue/no-template-shadow': 'off',
87    'vue/no-unused-components': 'off',
88    'vue/no-useless-template-attributes': 'off',
89    'vue/multi-word-component-names': 'off',
90    'vue/no-v-html': 'off',
91    'vue/html-self-closing': [
92      'error',
93      {
94        html: {
95          void: 'any',
96          normal: 'any',
97          component: 'always',
98        },
99        svg: 'always',
100        math: 'always',
101      },
102    ],
103    // Vue.js风格指南(https://cn.vuejs.org/v2/style-guide/)
104    // Vue组件排序
105    'vue/order-in-components': [
106      'warn',
107      {
108        order: [
109          'el',
110          'name',
111          'key',
112          'parent',
113          'functional',
114          ['delimiters', 'comments'],
115          ['components', 'directives', 'filters'],
116          'extends',
117          'mixins',
118          ['provide', 'inject'],
119          'ROUTER_GUARDS',
120          'layout',
121          'middleware',
122          'validate',
123          'scrollToTop',
124          'transition',
125          'loading',
126          'inheritAttrs',
127          'model',
128          ['props', 'propsData'],
129          'emits',
130          'setup',
131          'fetch',
132          'asyncData',
133          'data',
134          'head',
135          'computed',
136          'watch',
137          'watchQuery',
138          'LIFECYCLE_HOOKS',
139          'methods',
140          ['template', 'render'],
141          'renderError',
142        ],
143      },
144    ],
145    // Vue属性排序
146    'vue/attributes-order': [
147      'warn',
148      {
149        order: [
150          'DEFINITION',
151          'LIST_RENDERING',
152          'CONDITIONALS',
153          'RENDER_MODIFIERS',
154          'GLOBAL',
155          'UNIQUE',
156          'TWO_WAY_BINDING',
157          'OTHER_DIRECTIVES',
158          'OTHER_ATTR',
159          'EVENTS',
160          'CONTENT',
161        ],
162        alphabetical: true, // 字母顺序
163      },
164    ],
165  },
166  overrides: [
167    {
168      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
169      env: {
170        jest: true,
171      },
172    },
173  ],
174}

.eslintrc.js 配置项说明

添加脚本命令

在 package.json 的 scripts 配置项中写入

1"lint": "vue-cli-service lint",
2"lint:fix": "vue-cli-service lint --fix",
3"lint:style": "stylelint **/*.{vue,scss} --fix",

使用 Prettier

Prettier 是一个代码格式化工具，它通过解析代码并使用自己的规则（考虑最大行长）重新格式化代码，从而实现一致的编码风格

安装

1yarn add -D prettier eslint-plugin-prettier @vue/eslint-config-prettier

修改 .eslintrc.js

eslint-config-prettier 8.0.0 之后版本

在 extends 配置项中增加 prettier 和 plugin:prettier/recommended

eslint-config-prettier 8.0.0 之前版本

在 extends 配置项中增加 prettier/@typescript-eslint 和 plugin:prettier/recommended

相关 CHANGELOG

自定义 Prettier 风格规则

在根目录创建 prettier.config.js 文件和 .prettierignore

.prettierrc dgiot-dashboard prettier

自定义 Prettier 风格规则

1module.exports = {
2  printWidth: 80,
3  tabWidth: 2,
4  useTabs: false,
5  semi: false,
6  singleQuote: true,
7  quoteProps: 'as-needed',
8  jsxSingleQuote: false,
9  trailingComma: 'es5',
10  bracketSpacing: true,
11  bracketSameLine: false,
12  arrowParens: 'always',
13  htmlWhitespaceSensitivity: 'ignore',
14  vueIndentScriptAndStyle: true,
15  endOfLine: 'lf',
16};

添加脚本命令

在 package.json 的 scripts 配置项中写入 "prettier": "prettier --write ./src"

ESLint Rules Prettier Options

语义化版本控制

语义化版本说明

  • 标准版本号表示: X.Y.Z

    * X: 表示主版本号，在有任何不兼容的修改时递增
    • Y: 表示次版本号，在有向下兼容的新功能出现时递增
    • Z: 表示修订版本号，在只做了向下兼容的修正时才递增

  • 先行版本号，在修订版本号使用连接号加上一连串以句点分隔的标识符来修饰。

    * 先行版本号则表示这个版本并非稳定而且可能无法满足预期的兼容性需求
    • 例子: 1.0.0-alpha 1.0.0-beta

  • 版本号优先级

    * 主版本号、次版本号及修订版本号以数值比较
    • 当主版本号、次版本号及修订版本号都相同时

版本号优先级排序

  1. 要将版本号拆分为主版本号、次版本号、修订版本号及先行版本号
  2. 由左到右依序比较每个标识符(主版本号、次版本号及修订版本号直接以数值比较)
  3. 当主版本号、次版本号及修订版本号都相同时，以先行版本号来判断
  4. 先行版本号判断通过由左到右的每个被句点分隔的标识符来比较，直到找到一个差异值后决定：只有数字的标识符以数值高低比较，有字母或连接号时则逐字以 ASCII 的排序来比较

🌰 1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1 < 1.0.0

使用 standard-version

standard-version 可以进行语义化版本发布和 CHANGELOG 生成

安装

1npm install -g standard-version
2# OR
3npm install --save-dev standard-version

使用

在 package.json 的 scripts 配置 "release": "standard-version"

1# 发布第一版
2npm run release -- --first-release
3
4# Pre-Release
5npm run release -- --prerelease
6
7# alpha / beta / rc
8npm run release -- --prerelease alpha
9
10# major minor patch
11npm run release -- --release-as major
12
13# 指定版本
14npm run release -- --release-as x.y.z