yanyue404/blog

前端思考 —— 代码质量

Opened this issue · 0 comments

yanyue404 commented

前言

在 2019 前端工具调查-结果（译文）中，我们观察了前端工具的使用情况：

  • 开发人员在围绕一个工具进行整合。 例如，ESLint、 NPM Scripts 和 Webpack 分别用于 JavaScript 的 静态代码检查、任务运行和模块打包。
  • 使用 Babel（ JavaScript 从 ES6 转移到 ES5）有 81.56％的受访者在其工作流程中使用
  • 有 53.21% 的开发者使用 CSS linter，52.08% 的开发者使用 CSS 命名方案
  • 使用 Prettier 的受访者数量增加较多百分比

最佳的工具链：Webpack+ Babel+NPM Scripts+ESLint+Prettier+ CSS linter

我们可以选择跟进这些最佳实践，而不是停留在知道的层面~

流程化

前端开发转移到后端环境（得益于Node），意味着可以适用标准的软件工程流程:

  1. 本地开发（developing）

  2. 静态代码检查（linting）

  3. 单元测试（testing）

  4. 合并进入主干（merging）

  5. 自动构建（building）

  6. 自动发布（publishing）

现状

我们使用 Vue与React等主流框架构建应用（假设你有这样的经验），使用开源 cli 或者自定义的配置构建开发环境。

上面的最佳工具链已经有一定的集成：

Webpack + Babel+基本的 NPM Scripts

当然我们的关注点主要在于应用中。

为什么需要

  • ESLint: 开发阶段静态代码检查，及时开发阶段代码风格检查，可以自定义团队的风格校验配置，使用成本低，约束较大
  • Prettier: 漂亮的代码风格格式化，统一团队代码风格，可在提交代码时格式化，使用成本低，约束小
  • Stylelint: 与 ESLint类似，不过检查的是 CSS样式，使用成本低，约束较小
  • Jest: 测试我们的代码是否可以按预期工作，使用成本高，定位可选项，根据项目类型决定是否加入

需要更多？

  • Commitlint: 约束开发者提交符合规范的提交日志，使用成本低，约束小
  • editorconfig: 统一编辑器配置，使用成本低，没有约束

打开方式

配置

常用工具

  • husky：对 git 进行 hook，可以在 git 操作之前做一些操作；
  • lint-staged：对当前 git 提交的代码进行一些操作。

Commitlint

添加 commitlint 相关依赖：

yarn add husky @commitlint/cli @commitlint/config-conventional -D

新建 commitlint.config.js文件，写入如下内容:

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'build',
        'ci',
        'chore',
        'revert',
      ],
    ],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
  },
};

接着在 package.json 中配置 commitmsg 脚本

{
  "scripts": {
    "commitmsg": "commitlint -E HUSKY_GIT_PARAMS",
  }
}

Prettier

添加 prettier 相关依赖：

yarn add husky lint-staged prettier -D

新建.prettierrc.js，内容如下：

module.exports = {
  printWidth: 80,
  singleQuote: true,
  trailingComma: 'all',
};

接着在 package.json 中配置 pre-commit 脚本

{
  "scripts": {
    "pre-commit": "lint-staged",
    "prettier": "prettier --write \"./**/*.{js,jsx,css,html,scss,md,json}\"",
  },
   "lint-staged": {
    "**/*.{js,jsx}": [
      "prettier --write",
      "git add"
    ],
    "**/*.{css,html}": [
      "prettier --write",
      "git add"
    ],
    "**/*.{md,json}": [
      "prettier --write",
      "git add"
    ]
  },
}

editorconfig

编辑器配置添加.editorconfig文件于项目根目录，内容如下：

# http://editorconfig.org
root = true

[*]
indent_style = space                    # 输入的 tab 都用空格代替
indent_size = 2                         # 一个 tab 用 2 个空格代替
end_of_line = lf                        # 换行符使用 unix 的换行符 \n
charset = utf-8                         # 字符编码 utf-8
trim_trailing_whitespace = true         # 去掉每行末尾的空格
insert_final_newline = true             # 每个文件末尾都加一个空行

[*.md]
trim_trailing_whitespace = false        # .md 文件不去掉每行末尾的空格

参考链接