构建统一的代码风格及代码检查工作流，提升前端应用质量与代码可维护性背景 对于多人参与的中大型前端项目，代码质量与代码风格的重要性不言而喻，对于开发者而言，当你重构或者接手别人工作时，都期望是一目了然的舒爽...那么，如何去保障团队代码质量和风格，或者说，通过一种友好，高效，不带来额外负担的自动化方式去落地，笔者在此分享一下自己的实践，可在代码保存时，代码提交时，代码打包时三个阶段去采用不同的手段进行检查/管控...", "eslint --fix" ] }, 通过husky和lint-staged配合，每次commit时对进行检查及自动格式化，如果有无法自动修复的错误，会停止commit...，目前流水线中是执行eslint检查并将结果输出上传到sonar平台进行展示，而没有采用sonar规则检查 3、实际上，提交代码能通过前两关，第三关是不会再有错误的，可以去掉了。...总结: 1、只要能实现1，2关的都应采用，高效优雅，且不用浪费CI资源。 2、无法实现的老旧项目，使用第三关行代码质量检测及管控。
：通过引入代码质量工具，在开发过程中能够时刻对自身代码质量进行约束，逐渐培养自身对代码质量有“洁癖”的开发观念，同时也会成为团队乃至自身对质量文化落地的一个抓手。...这样做的话，那么其他同学在pull代码并diff代码时可能会出现大段代码标红，同时在进行CI时又可能因为代码风格或规范问题被打回重改。...如何让大家在提交代码时需要确保本地的代码或Commit Message已经通过检查才能够push到代码仓库，从而更好的保障代码质量呢？...可以用 Husky + Commintlint + Lint-staged打造规范的Git检查工作流，确保我们的代码只有符合规范才能提交到代码仓库。...客户端钩子由诸如提交和合并这样的操作所调用服务器端钩子作用于诸如接收被推送的提交这样的联网操作客户端钩子我们可能用的比较多，客户端钩子通常包括了提交工作流钩子、电子邮件工作流钩子和其它钩子。
Prettier 和 ESLint 是两个互补的工具，它们共同确保代码的风格一致性和质量。Prettier 负责格式化代码，而 ESLint 则执行更复杂的静态分析和规则检查。...ESLint#### 作用：静态代码分析，检测潜在的错误、代码异味和不推荐的编程习惯。提供丰富的自定义规则，可以检查代码风格、变量使用、代码复杂度等。...配置IDE在Visual Studio Code、WebStorm或其他支持ESLint和Prettier的IDE中，安装对应的插件并配置自动格式化和检查。...使用--cache选项：ESLint将缓存已检查的文件，以加快后续运行速度。使用.eslintignore文件：排除不需要检查的文件和目录。...;部署到持续集成(CI)将ESLint和Prettier集成到持续集成流程中，确保所有提交的代码都符合标准。
CI 工具 commit-lint 接入 CI 工具自动化测试 Github 上 很多著名的开源软件都在使用 travis CI，这是一款优秀的 CI 工具，我们可以通过他来做一些事情。...例如 在 push 或者 merge_request 的时候进行 npm run test 代码检查 在我的仓库中，我的配置是这样的，我增加了一个eslint 的检查，其实在实际项目中我们一般会阻止 master...，例如各种 lint 检查，如果不符合相关规范，将会阻止代码的合并。...最终实现我们的通过工具来提升代码的质量。...然后，通过 commit-lint 进行 commit 信息检查 可以查看上面仓库中的 package.json和 commitlint 配置 "scripts": { "commitlint
约定速成的亲儿子脚本自然和其它第三方脚本不一样，如果需要执行它，直接使用 npm 前缀即可，如 npm start，那其它脚本呢？那就需要 npm run 前缀了。...在 CI 或前端托管平台 Vercel/Netlify 中，对于部署前端项目，最重要的一步就是打包。...{ "singleQuote": true, "printWidth": 100, "semi": false, "arrowParens": "avoid" } Lint: 代码格式化及质量检查...而 ESLint 之类对代码格式化外，还对代码进行「质量检查」，如 no-unused-vars, no-implicit-globals 等规则。...JS 与 TS 的质量检查，还是要看 eslint[8]。 { "scripts": { "lint": "eslint .", "lint:fix": "eslint .
解决这些问题，理论上讲，口头约定和代码审查都可以，但是这种方式无法实时反馈，而且沟通成本过高，不够灵活，更关键的是无法把控。不以规矩，不能成方圆，我们不得不在项目使用一些工具来约束代码规范。...其核心是通过对代码解析得到的 AST（Abstract Syntax Tree 抽象语法树）进行模式匹配，来分析代码达到检查代码质量和风格问题的能力。...正如前面我们提到的因团队成员之间编程能力和编码习惯不同所造成的代码质量问题，我们使用 ESLint 来解决，一边写代码一边查找问题，如果发现错误，就给出规则提示，并且自动修复，长期下去，可以促使团队成员往同一种编码风格靠拢...配置好以后，我们在 VSCode 或 WebStorm 等编辑器中开启 ESLin，写代码时，ESLint 就会按照我们配置的规则来进行实时代码检查，发现问题会给出对应错误提示和修复方案。...无论写代码还是做其他事情，都应该用长远的眼光来看，刚开始使用 ESint 的时候可能会有很多问题，改起来也很费时费力，只要坚持下去，代码质量和开发效率都会得到提升，前期的付出都是值得的。
为什么要做项目规范提高代码质量：项目开发规范能确保代码的一致性和可读性，使其他程序员能够更容易地理解和维护代码。同时，规范也能减少代码中的错误和缺陷，提高软件的整体质量。...工具介绍Eslint：一个静态代码分析工具，可以帮助开发者检查代码存在的语法问题，编码风格和潜在问题，并提供修复方式。...Stylelint：一个用于检测 CSS 代码中潜在问题和风格错误的工具。它可以帮助我们规避 CSS 上的一些错误和风格的统一。...Lint-staged：一个基于Node.js的库,它可以对Git仓库中的暂存区(staged)代码进行线性检测,从而确保代码质量。Commitlint：项目 commit 提交风格规范。...安装 Eslint 1、 Nuxt3 中是使用 @nuxt/eslint-config 进行代码检查和格式化，执行安装命令： pnpm add -D eslint @nuxt/eslint-config
---- lint-staged lint-staged 是一个在 git 暂存文件上（也就是被 git add 的文件）运行已配置的 linter（或其他）任务。...{js,vue}": ["prettier --write", "eslint --cache --fix", "git add"] } 在 commit 之前，将暂存区的内容做一次 代码检查 和 代码美化...从 v3.1 开始，您现在可以使用不同的方式进行 lint-staged 配置： lint-staged 在你的对象 package.json .lintstagedrc JSON或YML格式的文件 lint-staged.config.js...JS格式的文件 使用 —config 或 -c 标志传递配置文件 mrm mrm 是一个自动化工具。...推荐 它将根据 package.json 依赖项中的代码质量工具来安装和配置 husky 和 lint-staged，因此请确保在此之前安装并配置所有代码质量工具，如 Prettier 和 ESlint
这些 Hooks 在 git 操作 commit、push、merge 等得时候，可以做前置或者后置的操作，例如 pre-commit 在 git commit 前可以做代码校验，校验代码的时候使用的ESLint..."semi": ["error", "always"], // 强制使用一致的反勾号、双引号或单引号 "quotes": ["error", "double"] } } 新建src目录...，git commit -m 'test'就会发现 eslint 代码检查通过了，能正常提交了，以上实践能很好解释 commit 前怎么检验代码，但是有个缺点就是别人 pull 你的代码要执行git config...，git commit -m 'test'发现代码已经被拦截，没有提交，因为index.js代码不符合规范 遗留问题就是 git hooks 不会编写怎么办，下面 lint-staged 出来了 lint-staged...，git commit -m 'test'，可以发现调用了 eslint 去检查代码，检查不通过就退出commit 综上，代码检测规范有了，现在也需要规范一下提交规范； commitlint github
同时使用 Prettier 和 ESLint 从上面可以看出，在 JavaScript 及其衍生语言的格式化上，ESLint 和 Prettier 是有重合的。...提交时：Git hooks + lint-staged Git pre-commit hook 可以让我们在提交之前执行一些命令，利用这点，可以在提交前对代码执行代码的 lint 检查和格式化，自动修复一些可以修复的问题...可以通过 Gitlab-CI 或 Github Action 这类 CI 工具集成代码检查，在代码被 push 到远程仓库，或者 merge request 发起时，执行特定的任务对代码发起检查。...值得一提的是，CI 集成可以是整个代码仓库统一的，这样，可以实现公司层面的所有项目统一标准，而不只是基于团队和项目。 5....在使用中，要善于利用编辑器、git hooks、CI 工具来自动化执行代码检查和格式化。 最后，谨记，工具虽好，但不要一把梭，需要根据团队情况和项目情况选择必要的几个即可。
ESLint ESLint 背景 TypeScript 的代码检查工具主要有 TSLint 和 ESLint 两种。早期的 TypeScript 项目一般采用 TSLint 进行检查。...pre-commit 钩子在键入提交信息（运行 git commit 或 git cz）前运行，主要用于检查当前即将被提交的代码快照，例如提交遗漏、测试用例以及代码等。...当然该钩子最常用的操作还是用于检查是否有权限推送代码、非快速向前合并等。 post-receive：该钩子在推送代码成功后执行，适合用于发送邮件通知或者触发 CI 。...lint-staged 可以在用户提交代码之前（生成 Git Commit Message 信息之前）使用 ESLint 检查 Git 暂存区中的代码信息（git add 之后的修改代码），一旦存在 ?...需要注意的是 lint-staged 不会检查项目的全量代码（全量使用 ESLint 校验对于较大的项目可能会是一个相对耗时的过程），而只会检查添加到 Git 暂存区中的代码。
本文从两个方向出发：1、git 提交规范；2、代码风格统一 假如团队中的小伙伴在提交代码时没有遵循规范要求，例如只写了一个"修改"或"更新，这会给团队中其他小伙伴造成困扰呢，不得不花时间查看代码和推测逻辑...是一个代码检测工具，用于检测代码中潜在的问题和错误，作用提高代码质量和规范。...下一个章节会详细介绍 lint-staged的作用和使用步骤 # lint-staged 作用：lint-staged 可以让你在 Git 暂存（staged）区域中的文件上运行脚本，通常用于在提交前对代码进行格式化...prettier 与上述 husky 和 lint-staged 搭配使用，可以在提交代码之前自动格式化代码。...该规范定义了提交消息的格式和结构，并推荐了一些常用的提交类型和范围。 # 安装和使用步骤： 1、确保你的项目已经初始化并安装了 npm 或 yarn。
}, }, ], } ts-loader 为单进程执行类型检查和转译，因此效率有些慢，可以用多进程方案：即关闭ts-loader的类型检查，类型检查由 fork-ts-checker-webpack-plugin...在 babel7 之前，是需要同时使用 ts-loader 和 babel-loader 的，其编译过程 TS > TS 编译器 > JS > Babel > JS 。...代码规范 项目中代码规范集成了 EditorConfig， Prettier， ESLint， Husky， Lint-staged，以及如何解决 Prettier 和 ESLint 的冲突的问题，具体实现可以参考...构建部署 Travis CI Travis CI 是一款构建和测试的自动化工具，不仅可以提高效率，还能使开发流程更可靠和专业化，从而提高软件的价值。...详细介绍可以查看 阮一峰——《持续集成服务 Travis CI 教程》 首先，访问官方网站 travis-ci.org，点击右上角的个人头像，使用 Github 账户登入 Travis CI。
前端工程化，有很多方面，如代码提交规范、模块化、CI/CD等，通过方方面面的约束，让代码变得可读性强、易维护等，随着项目越来越大，工程化的优势日益凸显出来。...规则已经定好了，接下来就是自动检测代码是否合格。 然后就是几个关键的工具库 husky是Git hooks工具，可以防止一些不好的commit和push。...lint-staged是一个在git暂存文件上运行linters的工具。 pre-commit钩子在键入提交信息前运行，用于检查即将提交的快照。 prettier代码格式化工具。...在代码符合规范之后，我们再使用prettier对规定范围内的代码做格式化处理。...团队工作的额外操作 对于团队工作来说，一般是自己新开一个分支，push代码到该分支。 在合并分支之前，除了应该做的测试、规范检查之外，也要做Code Review，检查代码的逻辑问题等。
代码集成交付检查：该模块是方案落地执行的保障，将代码静态检查集成到持续交付工作流中。具体设计实现上，在保证交付质量的同时，也通过定制集成检查工具降低了开发者的应用执行成本。...代码交付检查：在代码交付（借助 CI 系统的交付流程功能）时，在代码检测平台中对代码进行 ESLint 检查，检测不通过则阻断交付。...在美团，我们使用自主开发的 CI 系统，并在独立部署的 Sonar 系统上定制化实现了相应规则，基本可以满足诉求，这里就不再赘述。...增加工程维度的代码质量趋势分析：目前代码检查策略是增量检查，可以对接入的工程定期全量检查，基于时间线分析工程的代码质量变化趋势。...进一步深入分析检查结果和统计数据，发现一些潜在问题，为推动开发质量提升提供辅助，如： 统计开发者在工程中关闭或调整的规则，分析占比较高的规则被关闭的原因，进而调整规则或推动规则的执行。
，即可运行全部的测试用例 高扩展性，支持插件开发 支持 ci 服务 执行速度快 支持远程控制以及支持调试 Mocha 学习成本比较高，但随之带来的是它能提供更好的灵活性和可扩展性 社区成熟，在社区上可以找到各种的特殊场景下可用的插件或者扩展...--Donald Knuth 众所周知，eslint 是一个开源的 JavaScript代码检查工具，可以用来校验我们的代码，给代码定义一个规范，团队成员按照这个代码规范进行开发，这保证了代码的规范。...使用 Git 钩子对提交的代码进行 lint 和测试 为了确保线上的代码不被污染，我们配置了eslint，所以在团队里每位成员push代码之前，都需要进行一次lint和test，这样才能确保线上代码的整洁性和有效性...持续集成状态 持续集成按照前面的模块推荐使用 Travis CI，在项目中添加一个 .travis.yml 配置文件，告诉 Travis CI 怎样对您的项目进行编译或测试，具体配置关注上一个模块。...，依赖人工去回归测试容易出错和遗漏，为了保证 mt-events 库的质量，以及实现自动化测试，我们引入了 Jest，因为它集成了 JSDOM，用它模拟我们的事件库在浏览器环境中执行的效果再合适不过了。
，通常与 Prettier 一起使用以确保代码质量。...在 CI/CD 中使用 Prettier在 CI/CD 管道中集成 Prettier，可以确保在代码被合并到主分支之前，所有代码都经过格式化检查。...可以通过以下方式优化：使用 --cache 选项：Prettier 目前没有内置缓存功能，但你可以使用 lint-staged 和 husky，在提交代码时只格式化变更的文件。...分目录运行：将 Prettier 运行在特定的目录或文件上，而不是整个项目。...总结Prettier 是一个强大的工具，可以帮助开发者自动化代码格式化，确保代码风格一致，减少争论，节省时间。通过合理配置和与其他工具集成，Prettier 可以显著提高开发效率和代码质量。
科赫雪花本质就由一条直线演化而成。 三等分画好的直线。 取中间线段，然后用夹角为 60° 的两条等长线段替代。 可在每一条线段上都采用如上方式进行迭代操作，便会构造出多层次的科赫雪花。...科赫微图形算法实现： 使用 Python 自带小海龟模块绘制，科赫雪花递归算法的出口的是画直线。...科赫雪花的绘制并不难，本质就是画直线、旋转、再画直线…… 2.2 康托三分集 由德国数学家格奥尔格·康托尔在1883年引入，是位于一条线段上的一些点的集合。...当点的数量增加后，如成千上万后，会看到谢尔宾斯基三角形跃然于画布上，不得不佩服数学家们天才般的大脑。 下图是点数量为 10000 时的谢尔宾斯基三角形，是不是很震撼。...，如上代码可以先仅画一个树干两个树丫。
1 前置准备 一个正常运行的前端项目 一个准备好的git仓库 2 规范 2.1 代码规范 2.1.1 eslint eslint乃老生常谈，配置上也较为简单 pnpm i eslint --save-dev...和.git不在同一目录，这是官方的解决方案： 补一手官网链接「typicode.github.io/husky」 2.2.1 pre-commit 在代码commit前运行，通过钩子函数，可以判断提交的代码是否符合规范...「juejin.cn/post/703910… 」 4 持续集成/持续部署CI/CD 目前已知CI/CD一般要用到Docker/k8s Jenkins，通过git action在git更新的时候向服务器做更新操作...嗯...图方便，并且由于前端这边只有静态界面，我这里没有使用服务器。而是通过腾讯静态托管（类似CDN）完成一键部署测试环境。...注意这样是有缺陷的，包括但不限于缺少回滚机制、在本地编包的风险 可能更多人的诉求是当代码合并到某个分支后，机器能自动帮我执行完打包和部署这两个步骤，如果是这样后边不用看了哈...周末要结束我要歇歇了有机会额外出
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
