@frontend/cli-tools

前端开发工具集，包含 ESLint、Stylelint 等配置。

安装

基础安装

npm install @frontend/cli-tools

使用 ESLint 配置（推荐）

如果你需要使用 ESLint 配置，需要安装相关依赖：

npm install @frontend/cli-tools
npm install -D eslint @vue/eslint-config-typescript eslint-plugin-vue @vue/eslint-config-prettier

使用 Stylelint 配置

如果你需要使用 Stylelint 配置，需要安装相关依赖：

npm install @frontend/cli-tools
npm install -D stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue stylelint-config-recess-order

完整安装（ESLint + Stylelint）

npm install @frontend/cli-tools
npm install -D eslint @vue/eslint-config-typescript eslint-plugin-vue @vue/eslint-config-prettier stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue stylelint-config-recess-order

ESLint 配置使用

正确的使用方式（重要！）

由于我们的配置使用了 defineConfigWithVueTs，在使用时需要重新包装：

// eslint.config.js
import { eslintConfig } from '@frontend/cli-tools/vue/eslint';
import { defineConfigWithVueTs } from '@vue/eslint-config-typescript';

export default defineConfigWithVueTs([eslintConfig]);

依赖检查

你可以使用提供的检查函数来验证依赖是否已正确安装：

// eslint.config.js
import { eslintConfig, checkEslintDependencies } from '@frontend/cli-tools/vue/eslint';
import { defineConfigWithVueTs } from '@vue/eslint-config-typescript';

// 检查依赖（可选）
checkEslintDependencies();

export default defineConfigWithVueTs([eslintConfig]);

扩展配置

// eslint.config.js
import { eslintConfig } from '@frontend/cli-tools/vue/eslint';
import { defineConfigWithVueTs } from '@vue/eslint-config-typescript';

export default defineConfigWithVueTs([
  eslintConfig,
  {
    rules: {
      // 你的自定义规则
      'vue/no-unused-vars': 'error',
    },
  },
]);

为什么需要这样使用？

我们的配置使用了 @vue/eslint-config-typescript 的 defineConfigWithVueTs 函数，这个函数返回一个特殊的配置对象，需要在最终使用时再次用 defineConfigWithVueTs 包装才能正确工作。

Stylelint 配置使用

// stylelint.config.js
import { stylelintConfig } from '@frontend/cli-tools/vue/stylelint';

export default stylelintConfig;

包含的配置

• Vue 3 支持
• TypeScript 支持
• Prettier 集成
• 推荐的 Vue 规则
• 推荐的 TypeScript 规则
• Stylelint 标准配置
• SCSS 支持
• CSS 属性排序

依赖说明

Peer Dependencies（对等依赖）

本包使用 peerDependencies 来管理 ESLint 和 Stylelint 相关依赖，这意味着：

1. 版本控制：使用者可以控制这些依赖的版本，避免版本冲突
2. 按需安装：只有需要使用相关功能时才需要安装对应依赖
3. 灵活性：使用者可以选择安装或不安装某些依赖

可选依赖

所有 ESLint 和 Stylelint 相关依赖都被标记为可选（optional: true），这意味着：

• 即使不安装这些依赖，包也能正常工作
• 只有在实际使用相关功能时才会需要这些依赖
• 不会因为缺少这些依赖而导致安装失败

注意事项

1. 依赖安装：根据你需要使用的功能，安装相应的依赖包

2. 版本兼容性：确保安装的依赖版本与 peerDependencies 中指定的版本范围兼容

3. 模块导入：如果遇到模块找不到的错误，请检查：

   • 包是否正确安装
   • 导入路径是否正确
   • 项目的 TypeScript 配置是否正确

4. 配置自动包含：ESLint 配置会自动包含 .gitignore 文件中的忽略规则（如果存在）

5. 重要：ESLint 配置必须使用 defineConfigWithVueTs 重新包装才能生效