Sanity Vercel 部署插件项目启动与配置教程

一、项目目录结构及介绍

sanity-plugin-vercel-deploy 项目目录结构如下：

sanity-plugin-vercel-deploy/
├── components/              # 存放 React 组件
│   ├── DeployButton.js       # 部署按钮组件
│   └── DeployForm.js         # 部署表单组件
├── dist/                    # 构建产物目录
├── src/                     # 源代码目录
│   ├── __tests__            # 测试文件目录
│   ├── components/          # 同 components 目录
│   ├── SanityVercelDeploy.js # 插件主体文件
│   └── utils/               # 工具函数目录
├── .eslintrc.js             # ESLint 配置文件
├── .gitignore               # Git 忽略文件
├── .prettierrc              # Prettier 配置文件
├── package.json             # 项目依赖和脚本
├── README.md                # 项目说明文件
└── vercel.json              # Vercel 部署配置文件

• components/：包含项目中使用的 React 组件。
• dist/：构建后的文件存放目录。
• src/：源代码目录，包含插件的核心逻辑和组件。
• .eslintrc.js：ESLint 配置文件，用于代码质量检查。
• .gitignore：指定 Git 忽略的文件和目录。
• .prettierrc：Prettier 配置文件，用于代码格式化。
• package.json：定义项目的依赖和可执行脚本。
• README.md：项目的说明文件。
• vercel.json：Vercel 部署配置文件。

二、项目的启动文件介绍

项目的启动主要通过 src/SanityVercelDeploy.js 文件进行。该文件导出一个 React 组件，该组件是插件的主要界面，包含部署按钮和部署表单。

import React from 'react';
import DeployButton from './components/DeployButton';
import DeployForm from './components/DeployForm';

const SanityVercelDeploy = () => {
  return (
    <div>
      <DeployButton />
      <DeployForm />
    </div>
  );
};

export default SanityVercelDeploy;

三、项目的配置文件介绍

项目的配置文件主要包括以下三个：

1. .eslintrc.js：ESLint 配置文件，确保代码质量和风格一致性。

module.exports = {
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    indent: ['error', 2],
    linebreak-style: ['error', 'unix'],
    quotes: ['error', 'double'],
    semi: ['error', 'always'],
    'react/display-name': ['error'],
    'react/jsx-uses-react': ['error'],
    'react/react-in-jsx-scope': ['error'],
  },
};

2. .prettierrc：Prettier 配置文件，用于统一代码格式。

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true
}

3. vercel.json：Vercel 部署配置文件，用于定义部署参数。

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/node",
      "config": { "distDir": "dist" }
    }
  ]
}

以上是 sanity-plugin-vercel-deploy 开源项目的启动和配置文档，希望对您有所帮助。