技术周刊第35期：使用 AI 自动生成 Commit Message

前端爱好者周刊 (Github: shfshanyue/weekly)，每周记录关于前端的开源工具、优秀文章、重大库版本发布记录等等，周刊中优秀文章会在公众号全栈成长之路逐一推送。每周一发布，订阅平台如下，欢迎订阅。

小技巧

Go：Go语言支持并发编程，goroutine 和 channel 是 Go 语言并发的核心。
Rust：Rust严格的所有权规则使得我们无须手动做内存管理，同时编译器还会避免出现数据竞争等并发问题。
Rust：match语句是Rust的重要特性，它可以匹配各种模式，包括结构体、元组、枚举等，使得复杂的逻辑表达更简洁。
JavaScript：理解异步编程和Promise、async/await是Javascript开发中的重要一环。
CSS：CSS Flexbox和Grid提供了更加现代和强大的布局方式。
使用 Ctrl + T 可以快速打开新的浏览器标签页。
使用 Ctrl + Shift + T 可以重新打开最近关闭的标签页。
使用 Ctrl + F 可以在当前页面内进行搜索。

文章推荐

一、 DevTools Tips & Tricks

文章介绍了使用开发者工具的技巧，以提升前端开发的效率。包括：

在 Chromium 浏览器检查悬停弹出元素
使用 logpoints 替代 console.log 调试代码
在 Chromium 中模拟可折叠设备
自动完成样式输入
切换颜色格式
在 DevTools 中捕捉高分辨率屏幕截图
查看和复制页面上发生更改的样式
利用实时表达式简化经常使用的 JavaScript 表达式输入过程
调试导致水平滚动条的溢出元素

还提供了相关资源链接，比如 DevTools Tips 和 Dev Tips，供读者进一步学习。

开源与库

一、 pragmatic-drag-and-drop: 一个灵活的拖放库

该项目是 Atlassian 开发的低级别拖放工具链，它允许使用浏览器内建的拖放功能，并支持任何视图层。此工具链已应用于 Trello、Jira 和 Confluence 等大型产品。

Pragmatic drag and drop 提供了一系列可重用的包，以便开发人员创建定制的拖放体验，包括：

核心功能包：无视觉语言或便捷性依赖，灵活创建拖放体验。
视觉输出：提供快速构建一致性用户体验的可选视觉输出。
辅助技术控制：提供工具链用于辅助技术用户的友好拖放体验。

js 复制代码

import React, { useEffect, useRef } from "react";
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

function DropTarget() {
  const ref = (useRef < HTMLDivElement) | (null > null);

  useEffect(() => {
    const el = ref.current;
    if (!el) {
      throw new Error("ref not set correctly");
    }

    return dropTargetForElements({
      element: el,
    });
  }, []);

  return <div ref={ref}>Drop elements on me!</div>;
}

npm: next-intl

开发利器

一、 aicommits：AI 自动生成 Git 提交信息的 CLI 工具

AI Commits 是一个命令行界面（CLI）工具，使用 OpenAI 的 GPT 模型生成适用于 Git 提交的信息。使用方法如下：

安装 aicommits：通过 npm 安装此工具。
设置 API 密钥：获取并设置 OpenAI 平台的 API 密钥。
配置和使用：通过 aicommits config set 命令进行配置，可设定包括本地化、提交信息类型等选项。使用时，运行 aicommits 生成提交信息。

该工具还支持生成遵循 Conventional Commits 规范的提交信息，并可以集成到 Git 钩子，以自动产生和编辑提交信息。

代码示例：

bash 复制代码

# 安装 aicommits
npm install -g aicommits

# 设置 OpenAI API 密钥
aicommits config set OPENAI_KEY=<your token>

# 生成提交信息
aicommits

# 生成 Conventional Commits 规范的提交信息
aicommits --type conventional # or -t conventional

二、 plandex：在终端中构建复杂任务的 AI 编程引擎

Plandex 利用 AI 助力编写代码，支持终端中高效管理任务。需设置 OPENAI_API_KEY 环境变量，提供快速安装脚本和源代码编译指令。

作为命令行工具，Plandex 通过拆分大型任务、管理上下文和版本控制助力软件开发。

bash 复制代码

# 快速安装 Plandex
curl -sL https://plandex.ai/install.sh | bash

使用前需配置环境变量并运行 plandex new 来创建新计划。以下是我通过它重构页面组件 app.tsx 的截图。