在开发视频直播app源码时引入工具辅助,可以强制性地实现编码书写和提交过程中的 lint 校验。下面以当前流行的 Git Hook 方案举例供参考。
一、开发编辑器及 lint 工具配置
我们在视频直播app源码中配置 TSLint 插件以校验 typeScript;配置 styleLint 插件以校验 CSS/LESS。
我们约定团队开发均采用 vscode 编辑器,并至少安装以下插件辅助开发:
TSLint
stylelint
Document This
EditorConfig for VS Code
Prettier - Code formatter
Debugger for Chrome
二、添加 .editorconfig 文件
由于不同开发者可能使用的编辑器不同,但各种编辑器基本都支持 .editorconfig, 故每个项目都应当包含 .editorconfig,用来统一配置编辑器的换行、缩进存储格式。
配置参考:
```dart # 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 文件不去掉每行末尾的空格 ```
三、配置 Git Hook 强制执行编码风格检测与修正
借助 Git Hook,可以在提交视频直播app源码时执行风格检测与修正,当存在无法通过的内容时,提交会被 block,从而实现编码规范的强制性执行。
可以利用以下几个工具来实现这个流程:
husky 它会安装一系列 git hook 到项目的 .git/hook 目录中,这些钩子可以检测 package.json 中的 scripts 脚本命令配置,并在代码提交时执行它(我们这里利用 pre-commit 钩子)
lint-staged 可以取得所有被提交的文件并依次执行配置好的任务命令
styleLint/TSLint/ESlint 各种 lint 校验工具,可以配置到 lint-staged 的任务中
prettier 配置到 lint-staged 的任务中,可以实现修正可自动格式化的视频直播app源码风格
package.json 中的相关配置信息参考:
```dart { "scripts": { "precommit": "lint-staged", }, "lint-staged": { "*.ts": [ "tslint --fix", "prettier --parser typescript --single-quote --print-width 120 --write", "git add" ], "*.less": [ "stylelint --fix", "prettier --parser less --print-width 120 --write", "git add" ] }, "devDependencies": { "husky": "^0.14.3", "prettier": "^1.13.5", "prettier-stylelint": "^0.4.2", "stylelint-config-standard": "^18.2.0", "stylelint": "^9.4.0", "stylelint-config-prettier": "^4.0.0" } } ```
.prettierrc 配置文件参考:
```dart { "singleQuote": true, "trailingComma": "es5", "printWidth": 120, "overrides": [ { "files": ".prettierrc", "options": { "parser": "json" } } ] } ```
.stylelintrc 配置配置参考:
```dart { "extends": [ "stylelint-config-prettier", "stylelint-config-standard", "./node_modules/prettier-stylelint/config.js" ], "rules": { // 定义一些适合团队约定的规则 } } ```
通过以上配置,当代码提交时,会在 pre-commit 阶段执行 .git/hook/precommit 钩子,该钩子会查找并执行 scrpits 中的 precommit 命令,于是 lint-staged 定义的任务会被逐个执行。这套方案也是当前比较流行的做法,在很多视频直播app源码开发时有所应用。
标签:配置,stylelint,--,app,lint,源码,prettier From: https://www.cnblogs.com/yunbaomengnan/p/17891077.html