首页 > 编程语言 >视频直播app源码,在开发时配置 lint 风格检查与修正

视频直播app源码,在开发时配置 lint 风格检查与修正

时间:2023-12-09 16:13:37浏览次数:42  
标签:配置 stylelint -- app lint 源码 prettier


在开发视频直播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

相关文章

  • 『江鸟中原』鸿蒙应用开发:实现新闻app
    大家好,我是中原工学院的张迅,以下是我的作业报告:   已知app主要为用户提供信息,使其能够实现信息流展示、页面跳转、搜索、评论等功能   这里主要以一款新闻类app为例,展开讲解,如图:一、观察页面所需要实现的效果:1.从本地后端获取新闻资讯Feed流 2.切换Teb页签 3.下拉......
  • 基于mysql、laravel、vue2框架开发的手术麻醉临床信息系统源码,自主版权
    手术麻醉系统源码技术架构:PHP、js、mysql、laravel、vue2手术麻醉临床信息管理系统是数字化手段应用于手术过程中的重要组成部分,用数字形式获取并存储手术相关信息,既便捷又高效。既然是管理系统,那就是一整套流程,管理患者手术、麻醉的申请、审批、安排以及术后有关各项数据的记录......
  • Spring Security 6.x 系列(10)—— SecurityConfigurer 配置器及其分支实现源码分析(二)
    一、前言在本系列文章:SpringSecurity6.x系列(4)——基于过滤器链的源码分析(一)中着重分析了SpringSecurity在SpringBoot自动配置、 DefaultSecurityFilterChain和FilterChainProxy 的构造过程。SpringSecurity6.x系列(7)——SecurityBuilder继承链源码分析中详细分析了......
  • javaScript/js 【call,apply,bind】
    在JavaScript中,call、apply和bind都是用于改变函数执行上下文(this的值)的方法。它们在不同的情境下有不同的用途。call方法:call方法允许你调用一个函数,并指定该函数内部的this值,以及将参数以单独的参数传递给函数。functiongreet(name){console.log(`Hello,${name}!Ia......
  • PACS医学影像报告管理系统源码带CT三维后处理技术
    从各种医学影像检查设备中获取、存储、处理影像数据,传输到体检信息系统中,生成图文并茂的体检报告,满足体检中心高水准、高效率影像处理的需要。自主知识产权:拥有完整知识产权,能够同其他模块无缝对接国际标准:按照国际规范DICON3.0标准处理医学影像数据无缝对接:无缝对接各种体检影......
  • Spring Boot学习随笔- @SpringBootApplication详解、加载绝对路径配置文件、工厂创建
    学习视频:【编程不良人】2021年SpringBoot最新最全教程3.5@SpringBootApplication详解这是一个组合注解,就是由多个注解组成。下列注解红框内称为元注解(jdk提供)@Target:指定注解作用范围@Retention:指定注解什么时候生效重要注解@SpringBootConfiguration:自动配置Spring......
  • Docker - Build an application to an image
    Dockerfile:#BuildstageFROMgolang:1.21.5-alpine3.18ASbuilderWORKDIR/appCOPY..RUNgoenv-wGOPROXY=https://goproxy.io,directRUNgobuild-omainmain.go#RunstageFROMalpine:3.18WORKDIR/appCOPY--from=builder/app/main.COPYapp.env......
  • 自用AI宝藏APP分享-非广告
    我发现了一款AI宝藏APP(豆包,抖音公司出品),我已经使用一周了,爱不释手,它是一个很好的顾问,可以免费咨询法律、医疗、养生、健身,规划等等方面的问题,回答的非常专业,而且有用。是很优秀的生活小助手,出谋划策。已经很多年没有被某一款APP震撼到了,豆包APP,挺让我惊喜的,需要的自取吧(非广告哈......
  • uniapp 微信小程序使用canvas
    微信小程序基础库大于2.9.0后,canvas(画布)支持一套新Canvas2D接口(需指定type属性),同时支持同层渲染,原有接口不再维护。在这种情况下使用原有接口会报错,报错例如:1、使用ctx.draw()会报错:drawisnotafunction,原因:新版Canvas2D接口没有draw方法2、使用ctx.setfillStyle......
  • mapping映射属性
    索引库就类似数据库表,mapping映射就类似表的结构。mapping是对索引库中文档的约束,常见的mapping属性包括:type:字段数据类型,常见的简单类型有:字符串:text(可分词的文本)、keyword(精确值,例如:品牌、国家、ip地址)数值:long、integer、short、byte、double、float、布尔:boolean......