编辑器

首选 Visual Studio Code ，其次 WebStorm

代码规范

ESLint

安装并初始化 ESLint

  1. # 全局安装
  2. npm install -g eslint
  4. # cd到项目根目录下
  5. # 强制初始化package.json
  6. npm init -force
  8. # 初始化ESLint
  9. eslint --init

使用方式

注释

例如在当前文件中禁止使用 console 关键字

  1. /* eslint no-console: "error" */

文件

ESLint 支持 eslint.js ， eslintrc.yaml ， eslintrc.json 类型的配置文件。
例如 eslint.js 配置文件

  1. module.exports = {
  2.     root: true,
  3.     parser: "@typescript-eslint/parser", // 解析器，本解析器支持Ts
  4.     parserOptions: {
  5.         ecmaVersion: 2018, // 指定es版本
  6.         sourceType: "module", // 代码支持es6，使用module
  7.     },
  8.     env: {
  9.         // 环境
  10.         es6: true,
  11.         node: true,
  12.         browser: true,
  13.     },
  14.     plugins: [
  15.         // 插件
  16.         "@typescript-eslint",
  17.     ],
  18.     extends: [
  19.         // 拓展
  20.         "eslint:recommended",
  21.         "plugin:@typescript-eslint/recommended",
  22.     ],
  23.     globals: {
  24.         __WEEX__: true,
  25.         WXEnvironment: true,
  26.     },
  27.     rules: {
  28.         // 规则
  29.         "no-console": process.env.NODE_ENV !== "production" ? 0 : 2,
  30.         "no-useless-escape": 0,
  31.         "no-empty": 0,
  32.     },
  33. };

配置项

  • parser - 解析器
  • parserOptions - 解析器选项
  • env 和 globals - 环境和全局变量
  • rules - 规则
    • off或0，关闭规则
    • warn或1，开启规则
    • error或2，开启规则，并会出错阻止代码运行
  • plugins - 插件
  • extends - 拓展

    配置优先级

    规则是使用离要检测的文件最近的 .eslintrc文件作为最高优先级。
  1. 行内配置
  2. 命令行选项
  3. 项目级配置
  4. IDE环境配置

    EditorConfig

    ```bash

    http://editorconfig.org

    告诉 EditorConfig 插件，这是根文件，不用继续往上查找

    root = true

匹配全部文件

[*]

缩进风格，可选 space、tab

indent_style = space indent_size = 2

结尾换行符，可选 lf、cr、crlf

end_of_line = lf

设置字符集

charset = utf-8

删除一行中的前后空格

trim_trailing_whitespace = true

在文件结尾插入新行

insert_final_newline = true

匹配md结尾的文件

[*.md] trim_trailing_whitespace = false

[Makefile] indent_style = tab

editorconfig-tools is unable to ignore longs strings or urls

max_line_length = null

  1. <a name="RQs0Y"></a>
  2. ## prettier
  3. > [https://prettier.io/docs/en/install.html](https://prettier.io/docs/en/install.html)
  5. <a name="lGKey"></a>
  6. ### 安装
  7. ```bash
  8. $ yarn add --dev --exact prettier

新建文件

  1. $ echo {}> .prettierrc
  3. # 新建不需要格式化文件
  4. $ echo {}> .prettierignore
  1. // .prettierrc
  2. // https://prettier.io/docs/en/options.html
  4. {
  5.   "printWidth": 120,                             // 单行宽度限制
  6.   "tabWidth": 2,                                     // tab 使用两个空格
  7.   "useTabs": false,                             // 不使用制表符缩进，使用空格缩进
  8.   "semi": false,                                     // 代码需要分号结尾
  9.   "singleQuote": true,                         // 使用单引号
  10.   "jsxSingleQuote": true,                 // 在JSX中使用单引号而不是双引号
  11.   "bracketSpacing": true,                 // 对象左右两侧需要空格
  12.   "jsxBracketSameLine": false,         // html 关闭标签换行
  13.   "arrowParens": "avoid",                 // 单参数的箭头函数参数不需要括号
  14.   "proseWrap": "never",                     // 参考 https://prettier.io/docs/en/options.html#prose-wrap
  15.   "trailingComma": "none"                 // 参考 https://prettier.io/docs/en/options.html#trailing-commas
  16. };

自动化格式

https://prettier.io/docs/en/precommit.html

  1. $ npx mrm lint-staged
  2. # or
  3. $ npx mrm@2 lint-staged
  1. // package.json
  2. {
  3.   // ...
  4.   "config": {
  5.     "commitizen": {
  6.       "path": "node_modules/cz-customizable"
  7.     }
  8.   },
  9.   "gitHooks": {
  10.     "pre-commit": "lint-staged"
  11.   },
  12.   "lint-staged": {
  13.     "src/**/*.{js,css,md,ts,tsx,vue}": [
  14.       "eslint --fix",
  15.       "git add"
  16.     ]
  17.   }
  18. }

Git Hooks

详细的 HOOKS介绍 可点击这里查看 整体的 hooks 非常多，当时我们其中用的比较多的其实只有两个：

简单来说这两个钩子：

  1. commit-msg：可以用来规范化标准格式，并且可以按需指定是否要拒绝本次提交
  2. pre-commit：会在提交前被调用，并且可以按需指定是否要拒绝本次提交 | Git Hook | 调用时机 | 说明 | | —- | —- | —- | | pre-commit | git commit执行前
    它不接受任何参数，并且在获取提交日志消息并进行提交之前被调用。脚本git commit以非零状态退出会导致命令在创建提交之前中止。 | 可以用git commit —no-verify绕过 | | commit-msg | git commit执行前
    可用于将消息规范化为某种项目标准格式。
    还可用于在检查消息文件后拒绝提交。 | 可以用git commit —no-verify绕过 |

husky（git hooks）

1. 安装依赖

  1. $ yarn add husky --dev

2. 启动 hooks ， 生成 .husky 文件夹

  1. $ npx husky install

3. 配置 script 命令并且执行

  1. $ npm set-script prepare "husky install"

4. 添加 commitlint 的 hook 到 husky中

  1. $ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
  3. # win上的终端有时候不能正确的识别，可以分成两个步骤来操作：
  4. $ npx husky add .husky/commit-msg
  5. $ npx --no-install commitlint --edit $1

commitlint（用于检查提交信息）

1. 安装依赖

  1. $ yarn add @commitlint/cli @commitlint/config-conventional

2. 创建 commitlint.config.js

增加配置项（ config-conventional 默认配置点击可查看 ） 注：确保保存为 UTF-8 的编码格式

  1. $ echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
  2. # 完整的文件
  3. # module.exports = {
  4. #   // 继承的规则
  5. #   extends: ['@commitlint/config-conventional'],
  6. #   // 定义规则类型
  7. #   rules: {
  8. #     // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
  9. #     'type-enum': [
  10. #       2,
  11. #       'always',
  12. #       [
  13. #         'feat',     // 新功能 feature
  14. #         'fix',      // 修复 bug
  15. #         'docs',     // 文档注释
  16. #         'style',    // 代码格式(不影响代码运行的变动)
  17. #         'refactor', // 重构(既不增加新功能，也不是修复bug)
  18. #         'perf',     // 性能优化
  19. #         'test',     // 增加测试
  20. #         'chore',    // 构建过程或辅助工具的变动
  21. #         'revert',   // 回退
  22. #         'build'     // 打包
  23. #       ]
  24. #     ],
  25. #     // subject 大小写不做校验
  26. #     'subject-case': [0]
  27. #   }
  28. # }