X CLI

https://github.com/wh131462/x-cli
Admin
X CLI is a frontend project scaffolding and development tool manager CLI that supports Vue, React,...
Tokens:22,475
Snippets:221
Trust Score:7.9
Update:7 months ago
Show doc for...
Tokens:
Raw
### Post-Creation Project Commands

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/vanilla.md

Essential commands to run after creating a Vanilla project. Includes installing dependencies, starting the development server, and building the production version.

```bash
cd my-app

# 安装依赖
xi

# 启动开发服务器
xr dev

# 构建生产版本
xr build
```

--------------------------------

### Install Recommended Development Tools with X-CLI Plugins

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/vue.md

Command to install recommended development tools like ESLint, Prettier, Husky, and commitLint using X-CLI plugins. This can be done during project creation or manually configured afterward.

```bash
x plugin install eslint prettier husky commitLint lint-staged
```

--------------------------------

### Post-Creation Commands for Vue Projects

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/vue.md

Essential commands to run after creating a Vue project with X-CLI. Includes changing directory, installing dependencies, starting the development server, and building for production.

```bash
cd my-vue-app

# Install dependencies
xi

# Start development server
xr dev

# Build production version
xr build
```

--------------------------------

### Equivalent Commands for Dependency Installation

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xi.md

Provides a comparison of 'xi' commands with their equivalents across popular package managers (npm, yarn, pnpm, bun) for various installation scenarios, including all dependencies, specific packages, devDependencies, and global installations.

```bash
# Install all dependencies
xi
npm install
yarn
pnpm install
bun install

# Install specific package
xi lodash
npm install lodash
yarn add lodash
pnpm add lodash
bun add lodash

# Install as devDependency
xi lodash -D
npm install lodash -D
yarn add lodash -D
pnpm add lodash -D
bun add lodash -d

# Global install
xi lodash -g
npm install lodash -g
yarn global add lodash
pnpm add lodash -g
bun add lodash -g
```

--------------------------------

### Install and Use X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/docs/index.md

This snippet shows how to globally install X-CLI using npm, create a new project, manage packages with unified commands (xi, xu, xr), and launch the AI workspace.

```bash
# Global installation
npm install -g @eternalheart/x-cli

# Create a new project
x new my-project

# Use package manager commands
xi lodash        # Install dependencies
xu lodash        # Uninstall dependencies
xr dev           # Run script

# Launch AI workspace
xa
```

--------------------------------

### UniApp Vue Component Example

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/uniapp.md

An example of a simple UniApp Vue component using the Composition API with `<script setup>`. It demonstrates basic state management with `ref` and a button to increment a counter.

```vue
<!-- src/pages/index/index.vue -->
<template>
  <view class="container">
    <text class="title">Hello, UniApp!</text>
    <text>Count: {{ count }}</text>
    <button @click="increment">+1</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}
</style>
```

--------------------------------

### Simplified AI-Assisted Development with X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/docs/guide/why.md

Explains the challenges of integrating AI into the development workflow, including selecting and configuring AI services, managing API keys, and setting up the development environment. X-CLI provides a streamlined approach with `xa --config` for guided setup and `xa` to directly launch the AI workspace.

```bash
xa --config  # 配置向导
xa           # 直接启动 AI 工作区
```

--------------------------------

### UniApp Development and Build Commands

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/uniapp.md

This section details the essential commands for developing and building UniApp projects for various platforms. It includes commands for installing dependencies, running development servers, and creating production builds.

```bash
cd my-uniapp

# 安装依赖
xi

# 开发 H5
xr dev:h5

# 开发微信小程序
xr dev:mp-weixin

# 构建 H5
xr build:h5

# 构建微信小程序
xr build:mp-weixin
```

--------------------------------

### Vanilla Project Main Entry Point (main.ts)

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/vanilla.md

The main TypeScript file for a Vanilla Vite project. It sets up the HTML content, imports CSS, and initializes the counter component.

```typescript
import './style.css'
import { setupCounter } from './counter'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <h1>Hello Vite!</h1>
    <button id="counter" type="button"></button>
  </div>
`

setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
```

--------------------------------

### Post-Creation Commands for React Projects

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/react.md

These commands are executed after a React project has been created using X-CLI. They cover navigating into the project directory, installing dependencies with 'xi', starting the development server with 'xr dev', and building the production version with 'xr build'.

```bash
cd my-react-app

# Install dependencies
xi

# Start development server
xr dev

# Build production version
xr build
```

--------------------------------

### Example package.json Scripts Section

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xr.md

This JSON snippet shows a typical 'scripts' section within a package.json file. These scripts define various tasks that can be executed using the xr command, such as starting a development server, building the project, previewing builds, running tests, or performing linting.

```json
{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "test": "vitest",
        "lint": "eslint ."
    }
}
```

--------------------------------

### Install X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/readme.md

Installs the X-CLI globally using npm. This command makes the X-CLI available system-wide for use in any project directory.

```bash
npm install @eternalheart/x-cli -g
```

--------------------------------

### Install All Dependencies with xi

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xi.md

Installs all project dependencies using the detected package manager. If no package name is provided, 'xi' assumes the intention is to install all dependencies listed in the project's configuration.

```bash
xi
```

--------------------------------

### Automatic Configuration Validation and Repair Example

Source: https://github.com/wh131462/x-cli/blob/master/CLAUDE.md

An example demonstrating X-CLI's automatic configuration validation upon startup. It shows how the system detects incomplete provider configurations (auth-only) and prompts the user for automatic repair, including interactive collection of necessary details.

```bash
$ xa

[配置警告]
  ⚠ 以下 Provider 只在 auth.json 中存在，配置不完整:
    - tron

  说明: 这些 Provider 的 API Key 已保存，但缺少完整配置
  建议: 立即修复以确保正常使用

? 是否立即修复这些 Provider 配置? (Y/n) Y

[自动修复配置]
检测到 1 个不完整的 Provider 配置

正在修复: tron
  ? 显示名称 (留空使用 "tron"): Tron (Anthropic 兼容)
  ? API 类型: Anthropic 兼容 (Claude)
  ? API 地址 (留空使用默认): https://openapi.troncode.cn
  ? 是否添加模型列表? (Y/n) Y
  输入模型名称 (每行一个，输入空行结束):
    模型 1: claude-3-5-sonnet-20241022
    模型 2: claude-3-5-haiku-20241022
    模型 3: 
✓ tron 配置已补全

✓ 已修复 1 个 Provider 配置

✓ 配置修复完成，现在可以正常使用了
```

--------------------------------

### Unified Package Installation with X-CLI

Source: https://context7.com/wh131462/x-cli/llms.txt

Provides a unified command for installing packages. It automatically detects the project's package manager (npm, yarn, pnpm, bun) and executes the corresponding installation command. Supports installing single or multiple packages, dev dependencies, and global packages.

```bash
# 安装所有依赖（等同于 npm install / pnpm install / yarn）
xi

# 安装指定包
xi lodash

# 安装多个包
xi lodash axios vue-router

# 安装开发依赖（-D 或 --save-dev）
xi typescript -D
xi @types/node --save-dev

# 全局安装（-g 或 --global）
xi typescript -g

# 传递额外参数
xi some-package --legacy-peer-deps

# 包管理器自动检测优先级:
# 1. package.json 的 packageManager 字段
# 2. 锁文件检测 (pnpm-lock.yaml > yarn.lock > bun.lockb > package-lock.json)
# 3. 全局安装的包管理器 (pnpm > yarn > bun > npm)
# 4. npm 兜底
```

--------------------------------

### Create UniApp Project with Vue3+Vite+TS

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/uniapp.md

This command initiates a new UniApp project using the Vue3, Vite, and TypeScript template. It's the recommended setup for new projects, offering a modern development experience.

```bash
x new my-uniapp
# 选择 UniApp → Vue3 + Vite + TS (recommended)
```

--------------------------------

### Install Multiple Packages with xi

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xi.md

Installs multiple specified packages and their dependencies simultaneously using the detected package manager. This allows for efficient batch installation of related libraries.

```bash
xi lodash dayjs axios
```

--------------------------------

### Create Vanilla Project with Vite CLI

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/vanilla.md

Command to create a new Vanilla (JS/TS) project using the Vite build tool via the x-cli. This is the initial step for setting up a framework-agnostic project.

```bash
x new my-app
# 选择 Vanilla (JS/TS) → Vite
```

--------------------------------

### Configure Vite for Library Development

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/vanilla.md

Configuration to adapt a Vanilla Vite project for building a library. It involves installing the `vite-plugin-dts` for TypeScript declaration file generation and updating `vite.config.ts`.

```bash
# 添加构建库的配置
xi vite-plugin-dts -D
```

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyLib',
      fileName: 'my-lib'
    }
  },
  plugins: [dts()]
})
```

--------------------------------

### Streamlined Development Tool Configuration with X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/docs/guide/why.md

Highlights the intricate process of configuring development tools like ESLint, Prettier, Husky, and CommitLint, which involves installing multiple packages, creating configuration files, and setting up Git hooks. X-CLI's `x plugin init` command offers an interactive, one-click solution that handles dependencies and compatibility.

```bash
x plugin init
# 交互式一键配置，自动处理依赖和兼容性
```

--------------------------------

### Global Install with xi

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xi.md

Installs a package globally using the detected package manager. The '-g' flag indicates that the package should be available system-wide, typically for command-line tools.

```bash
xi typescript -g
```

--------------------------------

### Create Taro App with React

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/taro.md

This command initializes a new Taro project using React. It prompts the user to select a template, with Taro + React being the recommended option. This setup leverages React syntax and TypeScript for cross-platform mini-program development.

```bash
x new my-taro-app
# 选择 Taro → Taro + React (recommended)
```

--------------------------------

### Taro Project Development Commands

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/taro.md

These commands are used after creating a Taro project. They cover installing dependencies, starting development servers for different platforms (like WeChat mini-program and H5), and building the project for deployment.

```bash
cd my-taro-app

# 安装依赖
xi

# 开发微信小程序
xr dev:weapp

# 开发 H5
xr dev:h5

# 构建微信小程序
xr build:weapp

# 构建 H5
xr build:h5
```

--------------------------------

### Install Specific Package with xi

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xi.md

Installs a specified package and its dependencies using the detected package manager. This command is useful for adding new libraries or tools to the project.

```bash
xi lodash
```

--------------------------------

### Auth.json Structure Example

Source: https://github.com/wh131462/x-cli/blob/master/CLAUDE.md

Illustrates the structure of the auth.json file, which stores API keys for different providers. Each provider entry includes a 'type' (e.g., 'api') and an 'key' for authentication.

```json
{
    "anthropic": {
        "type": "api",
        "key": "sk-ant-..."
    },
    "deepseek": {
        "type": "api",
        "key": "sk-..."
    }
}
```

--------------------------------

### Manage Development Tools with X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/readme.md

Manages development tools like ESLint, Prettier, Husky, and Commitlint. Supports initializing all tools, installing, uninstalling, and listing specific plugins.

```bash
# Initialize all development tools
x plugin init

# Install a specific plugin
x plugin install <pluginName>

# Uninstall a plugin
x plugin uninstall <pluginName>

# View plugin status
x plugin list
```

--------------------------------

### Unified Package Management with X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/docs/guide/why.md

Illustrates the complexity of managing different package managers (npm, yarn, pnpm, bun) with their distinct commands for installation, adding, removing packages, and running scripts. X-CLI simplifies this with commands like `xi`, `xu`, and `xr`, which automatically detect the package manager.

```bash
| 操作 | npm | yarn | pnpm | bun |
|------|-----|------|------|-----|
| 安装 | `npm install` | `yarn` | `pnpm install` | `bun install` |
| 添加包 | `npm install pkg` | `yarn add pkg` | `pnpm add pkg` | `bun add pkg` |
| 删除包 | `npm uninstall pkg` | `yarn remove pkg` | `pnpm remove pkg` | `bun remove pkg` |
| 运行脚本 | `npm run dev` | `yarn dev` | `pnpm dev` | `bun run dev` |
```

```bash
xi          # 自动检测包管理器并安装
xi pkg      # 添加包
xu pkg      # 删除包
xr dev      # 运行脚本
```

--------------------------------

### Create Vue Project with create-vue (Vite)

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/vue.md

Uses the recommended create-vue template, powered by Vite, for fast development server startup and official Vue version synchronization. Supports TypeScript, JSX, Vue Router, and Pinia.

```bash
x new my-vue-app
# Select Vue → create-vue (Vite, recommended)
```

--------------------------------

### Create Taro App with Vue3

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/taro.md

This command initializes a new Taro project using Vue 3. It guides the user to select the Taro + Vue3 template. This approach utilizes Vue 3 syntax and TypeScript for developing cross-platform mini-programs.

```bash
x new my-taro-app
# 选择 Taro → Taro + Vue3
```

--------------------------------

### Create UniApp Project with Vue3+Vite

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/uniapp.md

This command creates a new UniApp project using the Vue3 and Vite template with JavaScript. It's an alternative for those who prefer not to use TypeScript.

```bash
x new my-uniapp
# 选择 UniApp → Vue3 + Vite
```

--------------------------------

### Configure AI Providers via Environment Variables

Source: https://github.com/wh131462/x-cli/blob/master/readme.md

Allows configuration of AI providers by setting environment variables. This is an alternative to the interactive configuration wizard, useful for automated setups or when direct API keys need to be provided.

```bash
export ANTHROPIC_API_KEY=your-key
export OPENAI_API_KEY=your-key
```

--------------------------------

### Clean Configuration and Start Over

Source: https://github.com/wh131462/x-cli/blob/master/CLAUDE.md

Provides instructions for completely resetting X-CLI configurations. This involves deleting both the project-specific 'opencode.json' and the user's API keys from 'auth.json', followed by reconfiguring using 'xa --config'.

```bash
# 删除 provider 配置
rm <x-cli-root>/opencode.json

# 删除 API keys
rm ~/.local/share/opencode/auth.json

# 重新配置
xa --config
```

--------------------------------

### Create Vue Project with @vue/cli (Webpack)

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/vue.md

Utilizes the traditional @vue/cli template, built on Webpack, suitable for projects requiring complex Webpack configurations and leveraging its extensive plugin ecosystem.

```bash
x new my-vue-app
# Select Vue → @vue/cli (Webpack)
```

--------------------------------

### Husky Git Hooks Setup (Bash)

Source: https://context7.com/wh131462/x-cli/llms.txt

Configuration for Husky v9+ Git Hooks, including `pre-commit` and `commit-msg` hooks. The `pre-commit` hook runs `lint-staged` to format and lint staged files, while `commit-msg` uses `commitlint` to enforce commit message conventions.

```bash
# Auto-generated .husky/pre-commit
npx lint-staged

# Auto-generated .husky/commit-msg
npx --no -- commitlint --edit $1
```

--------------------------------

### UniApp Development Command Mapping

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/uniapp.md

A reference table mapping development and build commands for different UniApp target platforms. This helps developers quickly find the correct command for their desired platform.

```bash
| 平台 | 开发命令 | 构建命令 |
|------|----------|----------|
| H5 | `xr dev:h5` | `xr build:h5` |
| 微信小程序 | `xr dev:mp-weixin` | `xr build:mp-weixin` |
| 支付宝小程序 | `xr dev:mp-alipay` | `xr build:mp-alipay` |
| 百度小程序 | `xr dev:mp-baidu` | `xr build:mp-baidu` |
| 字节跳动小程序 | `xr dev:mp-toutiao` | `xr build:mp-toutiao` |
| QQ 小程序 | `xr dev:mp-qq` | `xr build:mp-qq` |
```

--------------------------------

### Unified Package Management with X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/readme.md

Provides a unified interface for package management operations (install, uninstall, run scripts) across different package managers (npm, yarn, pnpm, bun). It automatically detects the appropriate package manager based on project configuration or global availability.

```bash
# Install dependencies
xi [packageName] [-D] [-g]

# Uninstall dependencies
xu [packageName] [-g]

# Run scripts
xr [script]
```

--------------------------------

### Create Projects with X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/docs/guide/why.md

Compares traditional methods of creating projects for different frameworks (Vue, React, Angular, Taro) using their respective CLI commands with the simplified X-CLI command. X-CLI offers a unified entry point and interactive selection of frameworks and templates.

```bash
# Vue
npx create-vue my-vue-app
# 或
npx @vue/cli create my-vue-app

# React
npx create-react-app my-react-app
# 或
npx create-vite my-react-app --template react

# Angular
npx @angular/cli new my-angular-app

# 小程序
npx @tarojs/cli init my-taro-app
```

```bash
x new my-app
# 交互式选择框架和模板，统一入口
```

--------------------------------

### 使用 X-CLI 创建新项目

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/overview.md

通过 `x new` 命令可以快速创建一个新的项目。该命令会提供一个交互式菜单，让用户选择想要使用的框架。

```bash
# 创建项目，交互选择框架
x new my-app

# 示例输出
? Select framework (Use arrow keys)
❯ Vue
  React
  Angular
  Vanilla (JS/TS)
  Taro (小程序)
  UniApp (小程序)
```

--------------------------------

### Create New Project with X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/readme.md

Creates a new project using X-CLI. It prompts the user to select a framework (Vue, React, Angular, Vanilla) and tools, then automatically invokes the official CLI to generate the project structure.

```bash
x new <projectName>
```

--------------------------------

### Create New Project with X-CLI

Source: https://context7.com/wh131462/x-cli/llms.txt

Creates a new frontend project using X-CLI. It supports various frameworks like Vue, React, Angular, Taro, and UniApp through an interactive selection process. It also prompts to initialize development tools like ESLint and Prettier.

```bash
# 创建新项目（交互式选择框架）
x new my-project

# 示例输出:
# ? Select framework ›
#   ❯ Vue
#     React
#     Angular
#     Vanilla (JS/TS)
#     Taro (小程序)
#     UniApp (小程序)

# 选择 Vue 后:
# ? Select Vue project tool ›
#   ❯ create-vue (Vite, recommended)
#     @vue/cli (Webpack)

# 项目创建完成后询问是否初始化开发工具:
# ? Initialize dev tools (eslint, prettier, husky, commitlint)? › Yes
```

--------------------------------

### Install DevDependency with xi

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xi.md

Installs specified packages as development dependencies using the detected package manager. The '-D' flag is used to differentiate between production and development dependencies.

```bash
xi eslint -D
xi typescript @types/node -D
```

--------------------------------

### Taro React Page Example

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/taro.md

This is an example of a basic page component in a Taro React project. It demonstrates the use of React hooks like `useState` and Taro's built-in components such as `View`, `Text`, and `Button` for creating UI elements.

```tsx
// src/pages/index/index.tsx
import { View, Text, Button } from '@tarojs/components'
import { useState } from 'react'
import './index.scss'

export default function Index() {
  const [count, setCount] = useState(0)

  return (
    <View className="index">
      <Text>Hello, Taro!</Text>
      <Text>Count: {count}</Text>
      <Button onClick={() => setCount(count + 1)}>+1</Button>
    </View>
  )
}
```

--------------------------------

### Monorepo Detection

Source: https://context7.com/wh131462/x-cli/llms.txt

X-CLI automatically detects monorepo projects by looking for specific configuration files or fields. This allows it to apply appropriate configurations, for example, when initializing development tools.

```bash
# 支持检测的 Monorepo 标志:
# - pnpm-workspace.yaml
# - lerna.json
# - nx.json
# - rush.json
# - turbo.json
# - package.json 中的 workspaces 字段

# 初始化开发工具时的输出:
x plugin init
# [x] Project type: Monorepo
# ? Select dev tools to install: ...
```

--------------------------------

### Create Next.js App using X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/react.md

This command is used to bootstrap a new project with Next.js, a full-stack React framework, via X-CLI. Next.js supports server-side rendering (SSR), static site generation (SSG), API routes, and file-system routing.

```bash
x new my-next-app
# Select React → Next.js
```

--------------------------------

### Check X-CLI Current Version

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/update.md

This command displays the currently installed version of the X-CLI tool. It's useful for verifying if an update was successful or for reporting issues.

```bash
x --version
```

--------------------------------

### Vanilla Project Counter Component (counter.ts)

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/vanilla.md

A simple TypeScript module that sets up a click counter functionality for a button element. It manages the counter state and updates the button's text.

```typescript
export function setupCounter(element: HTMLButtonElement) {
  let counter = 0
  const setCounter = (count: number) => {
    counter = count
    element.innerHTML = `count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(counter + 1))
  setCounter(0)
}
```

--------------------------------

### Build and Publish X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/readme.md

Commands used for building the X-CLI project and publishing it. These are typically used by developers contributing to or maintaining the X-CLI.

```bash
npm run build
npm run cli:publish
```

--------------------------------

### Equivalent Commands for xr

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xr.md

This table illustrates the equivalence between xr commands and their corresponding commands in popular package managers like npm, yarn, pnpm, and bun. It demonstrates how xr provides a unified interface for running common project scripts across different environments.

```bash
# xr Command | npm             | yarn         | pnpm         | bun
# ---------- | --------------- | ------------ | ------------ | --------------
# xr dev     | npm run dev     | yarn dev     | pnpm dev     | bun run dev
# xr build   | npm run build   | yarn build   | pnpm build   | bun run build
# xr test    | npm run test    | yarn test    | pnpm test    | bun run test
```

--------------------------------

### Create React App with Vite using X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/docs/frameworks/react.md

This command initiates the creation of a new React project using the Vite template via X-CLI. Vite is recommended for its fast development server startup, default TypeScript support, and quick hot module replacement.

```bash
x new my-react-app
# Select React → Vite (recommended)
```

--------------------------------

### Share Provider Configuration Using Global Config

Source: https://github.com/wh131462/x-cli/blob/master/CLAUDE.md

Explains how to share provider configurations across multiple projects by utilizing the global configuration file. Editing '~/.config/opencode/opencode.json' allows all projects to inherit the defined provider settings.

```bash
# 编辑全局配置
vim ~/.config/opencode/opencode.json

# 添加 provider 配置，所有项目都会继承
```

--------------------------------

### View X-CLI Documentation

Source: https://context7.com/wh131462/x-cli/llms.txt

Displays the complete documentation for X-CLI directly within the terminal. This is a quick way to access help and usage information.

```bash
# 显示文档
x doc
```

--------------------------------

### ESLint Flat Config Generation (JavaScript)

Source: https://context7.com/wh131462/x-cli/llms.txt

Generates an ESLint Flat Config file (`eslint.config.mjs`) for single-project or Monorepo setups. It integrates TypeScript, Prettier, and unused-imports plugins, supporting Node.js and ES2021 globals. Ignores common build and dependency directories.

```javascript
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import eslintConfigPrettier from 'eslint-config-prettier';
import unusedImports from 'eslint-plugin-unused-imports';
import globals from 'globals';

export default tseslint.config(
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
    eslintConfigPrettier,
    {
        languageOptions: {
            globals: {
                ...globals.node,
                ...globals.es2021
            }
        },
        plugins: {
            'unused-imports': unusedImports
        },
        rules: {
            'no-case-declarations': 'off',
            'unused-imports/no-unused-imports': 'error',
            '@typescript-eslint/no-explicit-any': 'off',
            '@typescript-eslint/no-unused-vars': 'off'
        }
    },
    {
        ignores: ['node_modules/', 'dist/', 'build/']
    }
);
```

--------------------------------

### AI Workspace with X-CLI

Source: https://context7.com/wh131462/x-cli/llms.txt

Launches an AI workspace powered by OpenCode TUI. It supports multiple AI providers (Anthropic, OpenAI, DeepSeek, etc.) and offers features like multi-turn conversations, file I/O, and command execution. The first run initiates a configuration wizard.

```bash
# 启动 AI 工作区（首次运行自动进入配置向导）
xa

# 运行配置向导
xa --config
# 支持的 AI 提供商:
# - Anthropic (Claude)
# - OpenAI (GPT)
# - Google (Gemini)
# - DeepSeek
# - Groq (快速推理)
# - Azure OpenAI
# - Amazon Bedrock
# - Ollama (本地模型)
# - OpenAI 兼容 API

# 管理多个 Provider（添加/切换/修改/删除）
xa --manage

# 显示配置信息
xa --info
xa --info --verbose  # 显示详细配置

# 测试 Provider 连通性
xa --test
xa --test -p anthropic  # 测试单个 provider

# 交互式选择 Provider
xa -p
# ? 选择 Provider ›
#   Anthropic (当前)
#   OpenAI
#   DeepSeek

# 交互式选择模型
xa -m
# ? 选择模型 ›
#   claude-sonnet-4-5 (当前)
#   claude-3-5-haiku

# 直接指定 Provider 和模型
xa -p openai -m gpt-4o
xa --provider anthropic --model claude-sonnet-4-5
```

--------------------------------

### Package Manager Detection Logic for xr

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xr.md

xr determines which package manager to use based on a specific order of checks. It prioritizes the 'packageManager' field in package.json, then looks for lock files (pnpm-lock.yaml, yarn.lock, bun.lockb, package-lock.json), followed by global installation checks, and finally defaults to npm if none are found.

```bash
# xr detection order:
# 1. package.json 'packageManager' field
# 2. Lock files (pnpm-lock.yaml → yarn.lock → bun.lockb → package-lock.json)
# 3. Global installation detection (pnpm > yarn > bun > npm)
# 4. Defaults to npm
```

--------------------------------

### 创建新项目

Source: https://github.com/wh131462/x-cli/blob/master/docs/guide/getting-started.md

使用 X-CLI 创建一个新项目。该命令会引导用户选择框架、模板和开发工具配置。

```bash
x new my-app
```

--------------------------------

### Frontend Framework Support Overview (JavaScript)

Source: https://context7.com/wh131462/x-cli/llms.txt

A JavaScript object detailing the frontend frameworks and their associated tooling options supported by X-CLI. This includes Vue, React, Angular, Vanilla JS, Taro, and UniApp, with recommended tools for each.

```javascript
const frameworks = {
    vue: {
        tools: [
            'create-vue (Vite, recommended)',  // npx create-vue project-name
            '@vue/cli (Webpack)'               // npx @vue/cli create project-name
        ]
    },
    react: {
        tools: [
            'Vite (recommended)',              // npx create-vite project-name --template react-ts
            'create-react-app',                // npx create-react-app project-name --template typescript
            'Next.js'                          // npx create-next-app@latest project-name
        ]
    },
    angular: {
        tools: [
            '@angular/cli'                     // npx @angular/cli new project-name
        ]
    },
    vanilla: {
        tools: [
            'Vite'                             // npx create-vite project-name --template vanilla-ts
        ]
    },
    taro: {
        tools: [
            'Taro + React (recommended)',      // npx @tarojs/cli init project-name ...
            'Taro + Vue3'
        ]
    },
    uniapp: {
        tools: [
            'Vue3 + Vite + TS (recommended)',  // npx degit dcloudio/uni-preset-vue#vite-ts project-name
            'Vue3 + Vite'
        ]
    }
};

```

--------------------------------

### View Configuration Status with X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/CLAUDE.md

Commands to check the current configuration status of X-CLI. '--info' provides a summary, while '--info --verbose' displays detailed configuration, including all provider sources.

```bash
# 查看配置摘要
xa --info

# 查看详细配置(包括所有 Provider 来源)
xa --info --verbose
```

--------------------------------

### Launch AI Workspace with X-CLI

Source: https://github.com/wh131462/x-cli/blob/master/readme.md

Launches the AI TUI workspace powered by OpenCode. This feature integrates with AI providers like Claude and OpenAI for tasks such as file reading/writing and command execution. The first run initiates a configuration wizard.

```bash
# Start the AI workspace
xa

# Run the configuration wizard
xa --config

# Manage multiple providers (add/switch/modify/delete)
xa --manage

# Use a specific provider
xa --provider openai

# Use a specific model
xa --model gpt-4o
```

--------------------------------

### 管理 xa 提供商

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xa.md

运行 `xa --manage` 命令可以进入提供商管理界面，支持列出、添加、切换默认、修改配置和删除提供商等操作。

```bash
xa --manage
```

--------------------------------

### opencode.json 结构示例

Source: https://github.com/wh131462/x-cli/blob/master/docs/commands/xa.md

这是 X-CLI AI 功能中 `opencode.json` 文件的结构示例，用于配置 AI 提供商和默认模型。

```json
{
    "$schema": "https://opencode.ai/config.json",
    "provider": {
        "anthropic": {
            "npm": "@ai-sdk/anthropic",
            "name": "Anthropic (AI-in-One Proxy)",
            "options": {
                "baseURL": "https://ai-in.one"
            }
        },
        "deepseek": {
            "options": {
                "baseURL": "https://api.deepseek.com/v1"
            }
        }
    },
    "model": "anthropic/claude-sonnet-4-5"
}
```

--------------------------------

### 配置开发工具

Source: https://github.com/wh131462/x-cli/blob/master/docs/guide/getting-started.md

使用 X-CLI 初始化或安装 ESLint、Prettier、Husky 等开发工具。

```bash
# 交互式初始化所有工具
x plugin init

# 安装指定工具
x plugin install eslint prettier husky
```

--------------------------------

### 使用 X-CLI 管理依赖

Source: https://github.com/wh131462/x-cli/blob/master/docs/guide/getting-started.md

X-CLI 提供了统一的包管理器命令来安装、卸载依赖。它会自动检测项目使用的包管理器。

```bash
# 安装所有依赖
xi

# 安装指定包
xi lodash

# 安装为 devDependency
xi lodash -D

# 全局安装
xi lodash -g

# 卸载指定包
xu lodash

# 全局卸载
xu lodash -g
```
Tokens:
Raw