a做片手机免费网站,网站建设策略,网站设计的技能,广州网页设计模板开发规范
创建项目的时候#xff0c;配置下 ESlint#xff0c;stylelint#xff0c; prettier#xff0c; commitlint 等; ESLint
主要功能#xff1a; ESLint 是一个静态代码检查工具#xff0c;用于在 JavaScript 代码中识别和报告模式。它的目标是提供一个插件化的 …开发规范
创建项目的时候配置下 ESlintstylelint prettier commitlint 等; ESLint
主要功能 ESLint 是一个静态代码检查工具用于在 JavaScript 代码中识别和报告模式。它的目标是提供一个插件化的 JavaScript 代码质量工具。
应用场景 在前端开发过程中ESLint 能够帮助开发者发现代码中的错误、不符合规范的地方从而提高代码质量。
配置方法
全局安装 ESLint在命令行中执行 npm install -g eslint。初始化 ESLint 配置在项目根目录下执行 eslint --init然后根据提示选择需要的配置。配置文件在项目的根目录下创建一个 .eslintrc 文件可以是 JSON、YAML 或 JS 格式并在其中指定规则、插件、解析器等。例如指定使用 Babel 解析器{ parser: babel-eslint }。
常见问题解决方法
如果遇到 ESLint 报错首先检查是否安装了正确的依赖并查看报错信息以确定具体问题。可以根据报错信息修改代码或配置 ESLint 规则来解决问题。
Stylelint
主要功能 Stylelint 是一个强大的、现代化的 CSS/SCSS/Less 检查工具可以帮助开发者遵循一致的代码风格和最佳实践。
应用场景 在前端开发过程中Stylelint 能够确保 CSS 代码的风格一致性和可读性。
配置方法
安装 Stylelint在项目中执行 npm install --save-dev stylelint。配置文件在项目的根目录下创建一个 .stylelintrc 文件可以是 JSON 或 YAML 格式并在其中指定规则、插件等。例如指定一个规则禁止在数字前加零number-leading-zero: never。
常见问题解决方法
如果遇到 Stylelint 报错首先检查是否安装了正确的依赖并查看报错信息以确定具体问题。可以根据报错信息修改 CSS 代码或配置 Stylelint 规则来解决问题。
Prettier 主要功能 Prettier 是一个代码格式化工具支持多种语言包括 JavaScript、CSS、HTML 等。它可以帮助开发者自动调整代码格式使其符合一致的样式。
应用场景 在前端开发过程中Prettier 可以自动格式化代码节省开发者手动调整代码格式的时间。
配置方法
安装 Prettier在项目中执行 npm install --save-dev --save-exact prettier。配置文件在项目的根目录下创建一个 .prettierrc 文件可以是 JSON、YAML 或 JS 格式并在其中指定格式化规则。Prettier 的配置相对简单主要指定一些基本的格式化选项如缩进大小、换行符等。集成到编辑器将 Prettier 集成到编辑器中如 VS Code以便在保存文件时自动格式化代码。
常见问题解决方法
如果 Prettier 没有按预期格式化代码首先检查是否安装了正确的依赖并查看 Prettier 的配置文件以确定配置是否正确。可以尝试在编辑器中手动触发格式化操作来查看效果。
Commitlint 主要功能 Commitlint 是一个帮助你编写更规范 git commit message 的工具。它基于一组可配置的规则来检查 commit message 的格式和内容。
应用场景 在团队协作中Commitlint 可以确保每个开发者都遵循一致的 commit message 规范从而提高代码的可读性和可维护性。
配置方法
安装 Commitlint在项目中执行 npm install --save-dev commitlint/{cli,config-conventional}。配置文件在项目的根目录下创建一个 commitlint.config.js 文件并在其中指定要使用的规则集。例如使用常规提交规范module.exports { extends: [commitlint/config-conventional] }。集成到 Git 钩子将 Commitlint 集成到 Git 钩子中以便在每次提交时自动检查 commit message。可以使用 Husky 等工具来实现这一功能。
常见问题解决方法
如果 Commitlint 报错首先检查是否安装了正确的依赖并查看报错信息以确定具体问题。报错信息通常会指出 commit message 不符合哪个规则。可以根据报错信息修改 commit message 或配置 Commitlint 规则来解决问题。
前端监控 前端监控简单来说就是我们在前端程序中记录一些信息并上报一般是错误信息来方便我们及时发现问题并解决问题。除此之外也会有性能监控用户行为的监控埋点等。
对于错误监控: 可以了解一下 Sentry原理简单来说就是通过 window.onerror 和 window.addEventListener(unhandledrejection, ...) 去分别捕获同步和异步错误然后通过错误信息和 sourceMap 来定位到源码。
对于性能监控: 可以通过 window.performance、PerformanceObserver 等 API 收集页面性能相关的指标除此之外还需要关注接口的响应时间。
收集到信息之后还要考虑数据上报的方案: 比如使用 navigator.sendBeacon 还是 Fetch、AJAX是批量上报实时上报还是延迟上报上报的数据格式等等。
CI/CD 一、定义 持续集成Continuous Integration, CI和 持续部署Continuous Deployment, CD主要包括版本控制代码合并构建单测部署等一系列前端工作流。
CIContinuous Integration持续集成是一种软件开发实践它要求开发人员频繁地将代码集成到共享的主干上。每次集成后都会通过自动化的构建和测试来验证新代码的正确性。这有助于尽早发现错误减少后期修复的成本。CDContinuous Delivery/Continuous Deployment持续交付/持续部署是CI的后续步骤。持续交付指的是频繁地将软件的新版本交付给质量团队或用户以供评审而持续部署则是指在评审通过后自动将代码部署到生产环境。
二、功能
提高开发效率通过自动化的构建、测试和部署CI/CD可以大大缩短开发周期提高开发效率。保证代码质量每次代码集成后都会进行自动化测试确保新代码的正确性从而减少潜在的错误和缺陷。快速响应市场变化由于CI/CD可以加快软件的发布频率因此可以更快地响应市场变化和用户需求。降低风险通过频繁的集成和测试可以尽早发现问题并进行修复从而降低单次发布的风险。
三、应用场景
大型企业在大型企业中由于团队规模较大代码库复杂因此需要使用CI/CD来确保代码的正确性和可维护性。创业公司对于创业公司来说快速迭代和响应市场变化至关重要。CI/CD可以帮助他们加快开发速度并确保软件质量。跨团队协作当多个团队共同参与一个项目时CI/CD可以确保不同团队之间的代码能够顺利集成并避免潜在的冲突和错误。 场景的工作流有 Jenkins、 Gitlab CI 等。我们可以配置在合并代码时自动打包部署在提交代码时自动构建并发布包等。 这里可以了解下比如在 Gitlab CI 中 Pipeline 、 Stage 和 Job 分别是什么怎么配置如何在不同环境配置不同工作流等。
四、作用
实现快速反馈CI/CD可以在代码提交后立即进行构建和测试从而快速发现错误并提供反馈。自动化流程通过自动化构建、测试和部署流程可以减少人工干预和手动操作降低出错的可能性。提高团队协作效率CI/CD可以确保不同团队之间的代码能够顺利集成从而提高团队协作效率。快速响应市场变化CI/CD可以加快软件的发布频率使团队能够更快地响应市场变化和用户需求。
总之前端CI/CD是一种重要的软件开发实践它可以通过自动化的构建、测试和部署流程来提高开发效率、保证代码质量、快速响应市场变化和降低风险。在大型企业、创业公司和跨团队协作等场景中都有广泛的应用。
