chore(ci): blog sync

Author: coderPerseus

data/blog/post-71.mdx

@@ -0,0 +1,20 @@
+---
+title: Implement timeline view for posts
+date: 2025-06-11T06:10:52Z
+slug: post-71
+author: coderPerseus：https://github.com/coderPerseus
+tags: ["codex"]
+---
+
+## Summary
+- redesign `/posts` with a vertical timeline layout
+- add `TimelinePostItem` component for each post entry
+
+## Testing
+- `npm run lint` *(fails: ESLint couldn't find a config file)*
+
+------
+https://chatgpt.com/codex/tasks/task_b_68491893e9e4832db16f037c3244d625
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/pull/71" target="_blank">github issues</a>

data/blog/post-72.mdx

@@ -0,0 +1,81 @@
+---
+title: ESLint  + Prettier 太烦人？这次彻底搞定
+date: 2025-06-15T14:01:14Z
+slug: post-72
+author: coderPerseus：https://github.com/coderPerseus
+tags: ["前端工程化"]
+---
+
+众所周知，前端搭建项目的时候，如果是团队开发肯定需要配置 ESLint 和 Prettier 来保证代码风格统一。但是 ESLint 和 Prettier 如果配置不好，就会“打架”，并且它们的配置还比较麻烦，那怎么办呢？其实很简单，就是使用现成的，很多大厂都提供了现成的解决方案，下面就来看一下吧！
+
+下面，来看看社区提供的五套方案，让我们先看一下下面的表格，这里除了 @antfu/eslint-config ，其他都是出自大厂的开源
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/typora/20250615205800.png)
+
+下面让我们更加详细的看看它们的优缺点
+## @antfu/eslint-config
+这是 Vue 团队成员 Anthony Fu 开发的 ESLint 配置，特点是开箱即用，零配置，支持 JS, TS, JSX, Vue, JSON, YAML, Markdown，并可选择性支持 React, Svelte, UnoCSS, Astro, Solid 等。通过 `eslint-plugin-format`  支持 CSS, HTML, XML 等格式化，我觉得很好用，推荐。
+
+使用非常简单，既可以通过 CLI:
+
+`pnpm dlx @antfu/eslint-config@latest` 
+
+也可以通过手动安装到项目：
+
+`pnpm i -D eslint @antfu/eslint-config` 
+
+然后，需要在根目录下新建 `eslint.config.mjs` 并进行配置 
+
+如果你是 antfu 的粉丝，或者你不了解 ESLint 和 Prettier，那么这是一个好的选择
+
+## @umijs/fabric
+
+这是 蚂蚁集团 Umi 团队的规范，如果你使用 umi 框架，应该对它不陌生。但最近一次更新已经是在两年前
+
+它支持 JS, 适合在 React 和 TS 项目使用，包含 prettier，eslint，stylelint ,commitlint 的配置
+
+使用它，需要手动安装并配置：
+
+`npm i @umijs/fabric --save-dev`
+
+然后根据官方文档配置 `.eslintrc.js` , `.stylelintrc.js` 和 `.prettierrc.js`
+##  eslint-config-ali
+
+遵循阿里巴巴前端工程规范（F2E Guidelines）的配置，支持 JavaScript、TypeScript、React、Vue、Node.js 等多种项目类型，大厂出品，应该兼容性和质量比较高，也是我在使用的，推荐。
+
+推荐使用 CLI 方式接入，直接在项目根目录运行：
+
+`npx f2elint`
+
+选择你的配置，它会自动帮你进行安装依赖和生成对应的脚本和配置
+
+## eslint-config-airbnb 和 eslint-config-airbnb-base
+
+- eslint-config-airbnb：Airbnb 风格指南，适合 React 项目。
+- eslint-config-airbnb-base：Airbnb 基础 JS 配置，无 React 插件，适合非 React JS 项目。
+
+Airbnb 的 JavaScript 代码规范，业界最流行的规范之一。github star  147k。但是库的更新最近一次是 2021 年
+安装使用它，对于 React 项目：
+
+`npx install-peerdeps --dev eslint-config-airbnb`
+
+对于非 React 项目：
+
+`npx install-peerdeps --dev eslint-config-airbnb-base`
+
+然后配置 `.eslintrc.js` 
+
+## eslint-config-alloy
+
+腾讯 AlloyTeam 出品的 ESLint 配置，支持多种技术栈。适合 React, Vue, TypeScript 项目，特别适合需要高度定制的团队，腾讯 AlloyTeam 开发。
+使用它可以通过手动的方式：
+
+`npm install --save-dev eslint @babel/core @babel/eslint-parser eslint-config-alloy`
+
+
+## 最后
+
+ESLint + Prettier 依然是目前最主流的前端代码规范的工具，但是也有新星挑战者，`Biome` 和 `Oxlint`，它们的集成也比较简答，选择一个适合自己的项目代码格式化规范，这样以后就可以专注代码和其他事情上了！
+
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/72" target="_blank">github issues</a>