推荐一款前端提效工具

CodingDogY
321 阅读4分钟

🍕 提供前端研发提效工具插件，帮助开发人员更快开发前端应用 🍕

官方地址：marketplace.visualstudio.com/items?itemN…

# 在淘宝，我们是这样衡量代码质量的

官方自研插件说明：

  • Create Application —— 提供快速创建/打开项目的能力，支持快速创建一个项目脚手架。
  • CRUD Create —— 提供基于 API 接口信息，快速创建 CRUD 场景页面的能力。
  • Bee Utils —— 提供开发流程中与 Bee 前端工程平台相关交互的辅助工具，包括获取项目相关迭代，切换迭代，构建迭代等。
  • Snippets Utils —— 提供各种常用代码块的代码提示和快速插入能力，包括 javascript/typescript/css/ant design vue 等。
  • Api Manager ——— 提供管理接口的能力，支持手动录入或导入接口，进行接口的添加和管理。
  • Code Lint ——— 一键配置前端代码格式化，代码规范检查功能。
  • FE Doctor ———— 一键生成质量报告📃，分析代码质量问题。

第三方依赖插件

操作：

vscode 扩展中搜索FE Tools 回车安装

项目局部配置：

选中项目根目录，右键选择 前端代码规范一键配置

根据项目架构依次选择，Reat,Javascript, npm ; 点击一键配置

点击一键配置后默认在项目根目录下生成.husky和.vscode文件, 同时package.json 文件中也安装了相关依赖
注意：请务必不要删除

检查lint

执行 code-lint-all 命令检查本地eslint 如有报错，请在.vscod> code-lint-react.json 下修改

检查husky

插件默认安装的husky版本为7.0.4;因此npm 版本需要7.X及以上 ，如遇报错请参考yx-lint 解决方案yunxikeji.yuque.com/kktlil/cryb…

添加git hook

husky文件创建 pre-commit 及 commit-msg

  • 创建 pre-commit hook 执行 lint
npx husky add .husky/_/pre-commit "npm run code-lint-all"

创建 commit-msg hook 执行 commitlint

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
请注意$1为linux，在win环境下请分开执行

npx husky add .husky/commit-msg

具体pre-commit配置如下：

#!/bin/sh
###
 # @Author: 路飞
 # @Date: 2022-07-13 09:34:30
 # @LastEditors: 路飞
 # @LastEditTime: 2022-07-13 11:38:22
 # @Description: file content
 # @FilePath: \yx-tools\yx-docter.husky_\pre-commit
###

. "$(dirname "$0")/_/husky.sh"

# 这里就是唤醒lint-staged
npm run code-lint-all

具体commit-msg配置如下：

#!/bin/sh
###
 # @Author: 路飞
 # @Date: 2022-07-13 09:34:30
 # @LastEditors: 路飞
 # @LastEditTime: 2022-07-13 12:04:00
 # @Description: file content
 # @FilePath: \yx-tools\yx-docter.husky_\commit-msg
###

# commit-msg: 就是git commit msg的时候去触发对应的逻辑

# 一般我们在这里验证commit msg的验证

. "$(dirname "$0")/_/husky.sh"
# npx 是npm的一个免安装工具，
# 本质就是可以临时download执行某个二进制
# npx --no-install commitlint --edit $1


# 提交记录检查
yarn commitlint --edit $1
# 格式化检查
# yarn format:check
# eslint检查
# yarn lint:checkundefined

npx --no-install commitlint --edit $1

添加规范commitlint

安装：

npm install -D @commitlint/config-conventional @commitlint/cli
在项目根目录新建文件:commitlint.config.js

具体配置如下：

/*
 * @Author: 路飞
 * @Date: 2022-07-13 11:10:19
 * @LastEditors: 路飞
 * @LastEditTime: 2022-07-13 11:11:00
 * @Description: 手动配置添加规则
 * @FilePath: \yx-tools\yx-docter\commitlint.config.js
 */
module.exports = {
  extends: ['@commitlint/config-angular'],
  // 自定义规则匹配RX客户要求
  rules: {
    'subject-case': [0, 'never'],
    'type-enum': [
      2, // 代表必须输入
      'always',
      [
        'build', // 主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
        'ci', // 主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
        'docs', // 文档更新,仅仅修改了文档，比如README, CHANGELOG, CONTRIBUTE等等
        'feat', // 新增功能
        'fix', // bug 修复
        'style', // 不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
        'test', // 新增测试用例或是更新现有测试,测试用例，包括单元测试、集成测试等
        'merge', // 分支合并 Merge branch ? of ?
        'perf', // 性能, 体验优化,比如提升性能、体验
        'refactor', // 重构代码(既没有新增功能，也没有修复 bug)
        'revert', // 回滚到上一个版本 ,或某个更早之前的提交
        'chore' // 不属于以上类型的其他类型,改变构建流程、或者增加依赖库、工具等
      ]
    ]
  }
}

测试

正确提交示例

如：feat: 增加产品分期类型（feat + 英文冒号 +空格+ 具体描述）

至此项目在提交前先执行静态检查，再执行提交规范

生成质量报告

项目根目录右键 选择-生成质量报告

总结：

虽然是拿来主义，但这类工具非常实用，代码静态检查，git提交规范，结合依赖可视化，在CI之前避免一些初级错误 codeReview阶段省去很多人工操作，让开发人员仅专注在业务层面的review

也是devops不可缺少个重要一环，

经过上述操作：review后合并代码，结合sonar扫描，再构建，灰度，发布

avatar
文章
阅读
粉丝