open-index/open-npm huggingface dataset:
npm package: @pvfhv/eslint-config-base
Description: 仅使用eslint自动格式化js,html,ts,json,md文件
Author: pvfhv
Latest version: 1.0.1

# @pvfhv/eslint-config-base

- 仅使用eslint自动格式化js,html,ts,json,md文件
- 使用简单无需繁琐的添加配置

## 安装

```base
pnpm add -D @pvfhv/eslint-config-base
```

## 配置.eslintrc

```base
{
  "extends": ["@pvfhv/eslint-config-base"]
}
```

## 添加命令

```base
{
  "lint:fix": "eslint . --fix"
}
```

## VS Code 自动修复

```base
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

```
npm package: @pvfhv/eslint-config-react
Description: 使用eslint对react组件自动修复格式化
Author: pvfhv
Latest version: 1.0.3

# @pvfhv/eslint-config-react

- 使用eslint对react组件自动修复格式化
- 使用简单无需繁琐的添加配置

## 安装

```base
pnpm add -D @pvfhv/eslint-config-react
```

## 配置.eslintrc

```base
{
  "extends": ["@pvfhv/eslint-config-react"]
}
```

## 添加命令

```base
{
  "lint:fix": "eslint . --fix",
  "tsc": "tsc --noEmit --skipLibCheck",
}
```

## VS Code 自动修复

```base
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

```
npm package: @pvfhv/eslint-config-ts
Description: 使用eslint对ts格式文件自动修复格式化
Author: pvfhv
Latest version: 1.0.2

# @pvfhv/eslint-config-ts

- 使用eslint对ts格式文件自动修复格式化
- 使用简单无需繁琐的添加配置

## 安装

```base
pnpm add -D @pvfhv/eslint-config-ts
```

## 配置.eslintrc

```base
{
  "extends": ["@pvfhv/eslint-config-ts"]
}
```

## 添加命令

```base
{
  "lint:fix": "eslint . --fix",
  "tsc": "tsc --noEmit --skipLibCheck"
}
```

## VS Code 自动修复

```base
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

```
npm package: @pvfhv/magic-box
Description: 开发工具包
Author: pvfhv
Latest version: 1.0.7

# @pvfhv/magic-box

- 日常开发工具包

## 安装

```base
pnpm add -S @pvfhv/magic-box
```

## 使用

```typescript
import { treeUtils, commonUtils } from '@pvfhv/magic-box';

// 树相关方法
const { 
  copyNode, // 复制节点
  findParentNode // 查找父节点
} = treeUtils

// 公共方法
const { 
  downloadFile, // 下载文件
  checkDivice // 检查当前设备分辨是否正常
} = commonUtils
```

## 手工更新npm
[淘宝源](https://npmmirror.com/package/@pvfhv/magic-box/home)
npm package: @pvfhv/react-query-extend
Description: react-query的扩展包
Author: pvfhv
Latest version: 1.0.16

# @pvfhv/react-query-extend

- react-query扩展插件

## 安装

```base
pnpm add -S @pvfhv/react-query-extend
```

## 使用

```typescript
import { ReactQueryContainer, ReactQueryClientProvider, ReactQueryHooks } from '@pvfhv/react-query-extend';

// 入口文件
function App() {
  return (
    <ReactQueryClientProvider>
      <div>项目入口</div>
    </ReactQueryClientProvider>
  );
}

// 使用useQuery等类的组件
function QueryComponent() {
  const result = useQuery({
    queryKey: ['xxxxxx'],
    queryFn: () => fetchData(),
    staleTime: 1000 * 60 * 5,
  });
  return (
    <ReactQueryContainer result={result}>
      <div>使用useQuery类的组件</div>
    </ReactQueryContainer>
  )
}

// hooks
const { useObserverData, useScroll } = ReactQueryHooks;

function ObserverComponent() {
  const queryClient = useQueryClient()
  const containerRef = React.useRef<HTMLDivElement>(null)
  const timeRef = React.useRef<ITimeRef>({
    timer: null,
    span: 0,
    mouseEnter: false,
  })

  const [domainList, setDomainList] = React.useState<Pick<{
    personList: Array<{name: string; age: number}>
    total: number
  }, 'personList'>>(() => {
    // ['personsData']返回的数据结构
    // {
    //   personList: Array<{name: string; age: number}>
    //   total: number
    // }
    const viewData = queryClient.getQueryData(['personsData']) as any
    if (viewData) {
      return viewData
    }

    return {
      personList: [],
    }
  })

  useObserverData(['personsData'], setDomainList)
  useScroll(timeRef, containerRef)


  // 容器基本样式
  // .high-clues-container {
  //   width: 468px;
  //   height: 360px;
  //   overflow: hidden auto;

  //   > div > div:last-child {
  //     margin-bottom: 0;
  //   }
  // }

  return (
    <div>
      <div>年龄({domainList.personList.reduce((pre, cur) => pre + cur.age, 0)})</div>
      <div
        className="high-clues-container"
        ref={containerRef}
        onMouseEnter={() => {
          timeRef.current.mouseEnter = true
        }}
        onMouseLeave={() => {
          timeRef.current.mouseEnter = false
        }}
      >
          {xxList.length === 0 && <Empty />}
          {xxList.length > 0 && (<div style={{ overflow: 'hidden' }}>
            {xxList.map((item, index) => (
              <CardLi data={item} />
            )}
            </div>)
          }
      </div>
    </div>
  )
}
```

## 手工更新npm

[淘宝源](https://npmmirror.com/package/@pvfhv/react-query-extend/home)