免费网站建设推荐,织梦如何做移动网站,网站开发有侵权吗,pc端好玩的大型网游1.引言 工业界一直都是#xff1a;能机器做的都交给机器#xff0c;因为人更容易犯错。所以关于代码语法检查、代码格式化、commit注释规范、代码编译等等这些工作量繁杂且巨大的苦力活#xff0c;除非你不想把人当马用#xff0c;那还是交给机器去做#xff0c;是吗能机器做的都交给机器因为人更容易犯错。所以关于代码语法检查、代码格式化、commit注释规范、代码编译等等这些工作量繁杂且巨大的苦力活除非你不想把人当马用那还是交给机器去做是吗 前端领域早已不是以前的纯js、jquery 时代模块化、工程化也成为了前端领域的追求这样才能保证前端程序的可读性可维护性健壮性等等 2.背景 前端工程化已经发展了有些年月了大量提高效率的包如雨后春笋般涌出。所以作为小前端的我也忍不住去探索一番毕竟谁也不想疯狂加班被当作马使也想下早班开启简单开心的生活 本文旨在记录探索前端基本工程化的实践过程方便自己以后翻阅请轻喷(ps: 这篇文章聚焦代码检查代码美化commit规范其中有借助chatgpt) 项目基本技术选型为react ts所以将以此为基础展开前端工程化基本配置 3.Git钩子husky husky 是一个用于在 Git 钩子中运行命令的工具它能够在代码提交或推送等特定事件中自动触发指定的命令。通过 husky你可以在代码提交前、提交后、推送前等场景下运行脚本以进行代码风格检查、单元测试、构建等操作 安装如下 下载husky的npm包初始化husky配置npm install时自动初始化husky 用快捷命令完成上面的安装步骤 # npm npx husky-init npm install# yarn yarn dlx husky-init --yarn2 yarn#pnpm pnpm dlx husky-init pnpm install4.文件过滤工具lint-staged lint-staged是一个用于在 git 暂存文件上运行指定命令的工具。它可以帮助你在提交代码前只对即将提交的文件进行代码风格检查、格式化、静态分析等操作以便在代码提交之前保持代码的质量和一致性 基本使用如下 安装依赖 # npm npm install lint-staged --save-dev#yarn yarn add lint-staged --dev#pnpm pnpm add lint-staged --save-dev修改package.json文件如下 {scripts: {lint: eslint src},lint-staged: {src/**/*.{ts,tsx}: [npm run lint, // 运行自定义的 lint 脚本git add // 添加修复后的文件到暂存区]} }以上配置表示对于 src 目录下的所有后缀为 ts 和 tsx 的文件在提交前会运行 npm run lint 命令来进行语法检查然后将修复后的文件添加到暂存区 实际开发时lint-staged 一般会配合 pre-commit 钩子进行 commit 之前的动作所以我们替换 pre-commit 钩子内容如下 #!/usr/bin/env sh . $(dirname -- $0)/_/husky.shnpx lint-staged5.commit注释规范commitlint commitlint 是一个用于规范化 Git 提交消息的工具。它帮助团队确保每个提交消息都符合统一的规范以提高代码仓库的可读性和可维护性 这里直接展示commitlint搭配husky一起使用 安装相关依赖 # npmnpm install commitlint/cli commitlint/config-conventional --save-dev# yarnyarn add commitlint/cli commitlint/config-conventional --dev# pnpmpnpm add commitlint/cli commitlint/config-conventional --save-dev使用 husky 增加 commit-msg 钩子 npx husky add .husky/commit-msg npx --no -- commitlint --edit $1在package.json文件里面commitlint信息默认使用commitlint提供的11注释类型(ps: 你可以自定义比如下方的ui、version) {commitlint: {extends: [commitlint/config-conventional],rules: {type-enum: [2,always,[build,chore,ci,docs,feat,fix,perf,refactor,revert,style,test,ui,version]]}} }commitlint提供的11注释类型解释如下 build: 编译相关的修改, 例如发布版本、项目构建工具改动等(例如glup、rollup、webpack、vite、turbo等工具)chore: 杂项修改(例如改变构建流程、增加依赖库等)ci: 持续集成相关修改(例如: github-action、gitlab-ci/cd等)docs: 文档修改feat: 新增功能fix: 修复bugperf: 优化(例如: 提升性能、体验等)refactor: 代码重构revert: 回滚版本style: 代码格式修改test: 测试用例修改 6.代码检查 代码检查借助了eslint, typescript-eslint eslint是一个用于检查和修复 JavaScript 代码错误、风格和质量问题的工具。它可以帮助开发人员和团队在编码过程中遵循一致的编码规范提高代码可读性、可维护性和质量 typescript-eslint是一个用于对 TypeScript 代码进行检查和修复的工具。它基于eslint提供了一套规则和插件可以检查和修复 TypeScript 代码中的错误、风格和质量问题 综上所诉需要开发环境下安装如下包 eslinteslint-plugin-react-hookseslint-plugin-react-refreshtypescript-eslint/parsertypescript-eslint/eslint-plugin # npm npm install eslint eslint-plugin-react-hooks eslint-plugin-react-refresh typescript-eslint/parser typescript-eslint/eslint-plugin --save-dev# yarn yarn add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh typescript-eslint/parser typescript-eslint/eslint-plugin --dev# pnpm pnpm add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh typescript-eslint/parser typescript-eslint/eslint-plugin --save-deveslint基本使用步骤如下 安装eslint在项目根目录下运行命令 npm install eslint --save-dev 或 yarn add eslint --dev 或 pnpm add eslint --save-dev将eslint作为开发依赖安装到项目中初始化eslint配置文件在项目根目录下运行命令 eslint --init根据提示选择配置选项配置文件通常为.eslintrc或.eslintrc.json将会自动生成添加规则和插件在生成的配置文件中可以根据项目需要添加或修改规则以及引入需要的插件运行eslint在命令行中运行 eslint yourfile.js 或 eslint . 其中yourfile.js为需要检查的文件名或目录。eslint将会根据配置文件对代码进行检查并输出错误或警告信息自动修复运行 eslint --fix yourfile.js 或 eslint --fix . 可以尝试自动修复一部分可修复的问题 typescript-eslint基本使用步骤如下 安装typescript-esLint在项目根目录下运行以下命令 #npm npm install typescript-eslint/parser typescript-eslint/eslint-plugin --save-dev# yarn yarn add typescript-eslint/parser typescript-eslint/eslint-plugin --dev#pnpm pnpm add typescript-eslint/parser typescript-eslint/eslint-plugin --save-dev配置eslint和typescript-eslint插件在生成的eslint配置文件中需要指定解析器为typescript-eslint/parser并使用typescript-eslint/eslint-plugin提供的规则和插件 eslint配置文件如下(以.eslintrc为例) module.exports {root: true,env: { browser: true, es2020: true },extends: [eslint:recommended,plugin:typescript-eslint/recommended,plugin:react-hooks/recommended,],ignorePatterns: [dist, .eslintrc.cjs],parser: typescript-eslint/parser,plugins: [react-refresh],rules: {react-refresh/only-export-components: [warn,{ allowConstantExport: true },],typescript-eslint/ban-ts-comment: off} }以下为结合 lint-staged 配置的代码检查命令 {scripts: {lint: eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0,lint:fix: eslint . --ext ts,tsx --fix,},lint-staged: {*.(ts|tsx): [eslint --quiet]} }7.代码美化prettier prettier是一个代码格式化工具它可以自动调整代码的格式使其符合统一的风格规范 基本使用如下 安装依赖 # npm npm install prettier --save-dev# yarn yarn add prettier --dev#pnpm pnpm add prettier --save-dev配置prettier可以使用 .prettierrc 文件或 package.json 文件中的 prettier 字段下面以 package.json 为例 {prettier: {trailingComma: all,arrowParens: always,printWidth: 120} }实际应用时会在 commit 之前进行美化代码以下为结合 lint-staged 配置的代码检查代码美化命令 {prettier: {trailingComma: all,arrowParens: always,printWidth: 120},lint-staged: {*.(ts|tsx): [eslint --quiet],*.(ts|tsx|json|html): [prettier --write]} }8.总结 介绍了前端基本工程化配置(代码健壮性、代码可读性、commit规范相关)以及相关工具介绍了husky使用介绍了lint-staged使用介绍了commitlint使用介绍了eslint、typescript-eslint使用介绍了prettier使用