--- slug: "javascript-skills-paid" name: "javascript-skills-paid" version: 1.0.1 displayName: "JavaScript规范工具(专业版)" summary: "面向团队与企业的全量JavaScript规范套件,含性能优化、安全审查与CI/CD集成。。JavaScript规范工具(专业版)面向团队与企业,提供全量JavaScript代码风格规范、性能" summary_zh: "面向团队与企业的全量JavaScript规范套件,含性能优化、安全审查与CI/CD集成。。JavaScript规范工具(专业版)面向团队与企业,提供全量JavaScript代码风格规范、性能" license: "MIT" edition: "pro" description: |- JavaScript规范工具(专业版)面向团队与企业,提供全量JavaScript代码风格规范、性能优化策略、安全审查清单与CI/CD自动化集成方案。核心能力: - 覆盖28+全量风格规则,含迭代器、生成器、标准库等进阶主题 - 完整异步并发模型与错误链路优秀实践 - 团队级Lint规则定制与预提交钩子集成 - 性能优化与安全审查清单 - TypeScript深度兼容与混用规范 适用场景: - 企业级前端工程规范统一 - 大型团队代码审查与质量门禁 - 性能敏感场景的代码优化 - 安全合规要求的项目交付 tags: - Development - Frontend - JavaScript - 代码规范 - 企业级 - 性能优化 - 安全审查 - 工具 - 效率 - 安全 - 加密 - run - npm - item - error - const tools: - read - exec - write homepage: "" category: "Automation" --- # JavaScript规范工具(专业版) ## 付费版专享能力 | 能力 | 免费版 | 付费版 | |---|---|---| | 基础功能 | 支持 | 支持 | | 深度漏洞扫描与CVE关联 | 不支持 | 支持 | | 安全基线合规审计 | 不支持 | 支持 | | 批量资产风险评分 | 不支持 | 支持 | | 威胁情报实时订阅与告警 | 不支持 | 支持 | | 零日漏洞检测与防护规则下发 | 不支持 | 支持 | ## 核心能力 | 能力模块 | 说明 | 与免费版差异 | |:-----|:-----|:-----| | 全量风格规则 | 28+规则,含迭代器、生成器、标准库等进阶主题 | 免费版仅核心规则集 | | 异步并发模型 | Promise.all / allSettled / 错误链路 / 取消令牌 | 免费版仅基础 async/await | | 性能优化 | 内存管理、事件循环、渲染性能、打包优化 | 免费版无 | | 安全审查 | XSS / 原型污染 / 依赖审计 / 密钥处理 | 免费版无 | | TypeScript兼容 | 混用规范、类型推导、声明文件 | 免费版仅基础建议 | | CI/CD集成 | 流水线模板、预提交钩子、自定义规则 | 免费版仅基础配置示例 | | 团队治理 | 规则分级、豁免机制、迁移指南 | 免费版无 | ### 能力模块 针对能力模块,自动解析输入参数、调度任务队列、格式化输出,返回结构化响应. **输入**: 用户提供能力模块相关的配置参数、输入数据和处理选项. **输出**: 返回能力模块的处理结果。- 验证返回数据的完整性和格式正确性 - 参考`能力模块`的配置文档进行参数调优 ### 全量风格规则 针对全量风格规则,自动解析输入参数、调度任务队列、格式化输出,返回结构化响应. **输入**: 用户提供全量风格规则相关的配置参数、输入数据和处理选项. **输出**: 返回全量风格规则的处理结果。- 验证返回数据的完整性和格式正确性 - 参考`全量风格规则`的配置文档进行参数调优 ### 异步并发模型 针对异步并发模型,自动解析输入参数、调度任务队列、格式化输出,返回结构化响应. **输入**: 用户提供异步并发模型相关的配置参数、输入数据和处理选项. **输出**: 返回异步并发模型的处理结果。- 验证返回数据的完整性和格式正确性 - 参考`异步并发模型`的配置文档进行参数调优 # ## 快速开始 1. 确认运行环境满足依赖说明中的要求 2. 在AI Agent对话中调用本技能,提供必要的输入参数 3. 检查输出结果,根据需要进行后续处理 > 详细的输入输出格式请参考下方章节说明。 ## 适用场景 ### 场景一:企业级前端工程规范统一 团队需要为多个前端项目统一规范,并接入CI门禁。工具输出完整的规则配置与流水线模板. ```yaml # .github/workflows/lint.yml 企业级Lint流水线 name: Code Quality Gate on: pull_request: branches: [main, release/*] jobs: lint: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20' cache: 'npm' - run: npm ci - run: npm run lint:strict - run: npm run type-check - run: npm run test:coverage - name: 阻止覆盖率下降 run: npx codecov || exit 1 ``` ### 场景二:性能敏感场景的代码优化 某仪表盘页面滚动卡顿,工具分析后给出符合规范的重构方案. ```javascript // 优化前:每次滚动都创建新闭包并触发重排 list.addEventListener('scroll', () => { items.forEach((item) => { item.style.top = `${window.scrollY + item.offsetTop}px`; }); }); // ... // 优化后:使用 requestAnimationFrame + transform 走合成层 let ticking = false; const updateLayout = () => { items.forEach((item) => { item.style.transform = `translateY(${window.scrollY}px)`; }); ticking = false; }; // ... list.addEventListener('scroll', () => { if (!ticking) { window.requestAnimationFrame(updateLayout); ticking = true; } }, { passive: true }); ``` ### 场景三:安全合规审查 金融项目要求对所有用户输入做防XSS处理,工具输出符合规范的安全工具函数. ```javascript const ESCAPE_MAP = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', '`': '`', }; // ... const escapeHtml = (input) => String(input).replace(/[&<>"'`]/g, (ch) => ESCAPE_MAP[ch]); // ... // 防止原型污染的安全合并 const safeMerge = (target, ...sources) => { for (const source of sources) { if (source === null || typeof source !== 'object') continue; for (const [key, value] of Object.entries(source)) { if (key === '__proto__' || key === 'constructor' || key === 'prototype') continue; target[key] = typeof value === 'object' && value !== null ? safeMerge(Array.isArray(value) ? [] : {}, value) : value; } } return target; }; // ... export { escapeHtml, safeMerge }; ``` ## 使用流程 ### 1. 平滑升级 如果你已使用免费版,直接替换Skill文件即可。核心规则完全兼容,新增能力按需启用. ```bash # 项目根目录初始化企业级配置 npx eslint --init npm i -D prettier eslint-config-prettier eslint-plugin-security eslint-plugin-import ``` ### 2. 接入预提交钩子 ```bash npm i -D husky lint-staged npx husky init echo 'npx lint-staged' > .husky/pre-commit ``` ```json // package.json { "lint-staged": { "*.{js,jsx,ts,tsx}": [ "eslint --fix --max-warnings=0", "prettier --write", "git add" ] } } ``` ### 3. 团队规则分级 ```javascript // .eslintrc.enterprise.js 企业级规则分级 module.exports = { extends: [ 'eslint:recommended', 'plugin:import/recommended', 'plugin:security/recommended', 'prettier', ], rules: { // 阻断级:必须修复才能合并 'no-eval': 'error', 'no-implied-eval': 'error', 'security/detect-object-injection': 'error', 'no-var': 'error', 'prefer-const': 'error', 'eqeqeq': ['error', 'always'], // ... // 警告级:建议修复,不阻断 'no-unused-vars': 'warn', 'prefer-template': 'warn', 'no-console': ['warn', { allow: ['warn', 'error'] }], // ... // 提示级:风格建议 'prefer-arrow-callback': 'off', 'arrow-body-style': 'off', }, overrides: [ { files: ['**/*.ts', '**/*.tsx'], extends: ['plugin:@typescript-eslint/recommended'], rules: { 'no-unused-vars': 'off' }, }, ], }; ``` # ## 输入格式 | 参数名 | 类型 | 必填 | 说明 | |---:|---:|---:|---:| | content | string | 否 | javascript-skills处理的内容输入 |, 默认: 全部维度 | | strict_level | string | 否 | 审查严格度, 可选: strict/normal/loose, 默认: normal | ## 输出格式 ```json { "success": true, "data": { "overall_grade": "A", "total_score": 92, "max_score": 100, "summary": "处理完成", "details": [ { "item": "代码风格", "status": "pass", "score": 95, "comment": "符合规范" }, { "item": "安全合规", "status": "warn", "score": 80, "comment": "符合规范" } ], "improvements": [ { "priority": "high", "suggestion": "建议优化", "expected_gain": "+5分" }, { "priority": "medium", "suggestion": "建议优化", "expected_gain": "+3分" } ] }, "error": null } ``` ## 异常处理 | 错误场景 | 原因 | 处理方式 | |:---:|:---:|:---:| | 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 | | 运行时错误 | 运行环境不满足 | 确认运行环境符合依赖说明 | | 网络错误 | 连接超时或不可达 | ## 依赖说明 ### 运行环境 - **Agent平台**: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等) - **操作系统**: Windows / macOS / Linux - **Node.js版本**: 建议 20 LTS 及以上(用于支持最新ESLint与原生ES模块) - **包管理器**: npm / pnpm / yarn 任一(推荐 pnpm 用于Monorepo) ### 依赖说明(补充) | 依赖项 | 类型 | 是否必需 | 获取方式 | |:------|------:|:------|:------| | LLM API | API | 必需 | 由Agent内置LLM提供 | | ESLint | npm包 | 推荐 | `npm i -D eslint` | | Prettier | npm包 | 推荐 | `npm i -D prettier` | | eslint-config-prettier | npm包 | 推荐 | `npm i -D eslint-config-prettier` | | eslint-plugin-security | npm包 | 推荐 | `npm i -D eslint-plugin-security` | | eslint-plugin-import | npm包 | 可选 | `npm i -D eslint-plugin-import` | | husky | npm包 | 推荐 | `npm i -D husky` | | lint-staged | npm包 | 推荐 | `npm i -D lint-staged` | | TypeScript | npm包 | 可选 | `npm i -D typescript` | | Node.js | 运行时 | 推荐 | nodejs.org 下载 | ### API Key 配置 - . - 若CI/CD流水线需上传覆盖率或安全扫描结果,请按对应服务(Codecov / Snyk 等)文档配置令牌环境变量. ### 可用性分类 - **分类**: MD+EXEC() - **说明**: 基于Markdown的AI Skill,。PRO版面向团队与企业,提供全量规则、性能优化、安全审查与CI/CD集成方案,完全兼容免费版核心规则. ## 案例展示 ### 全量Prettier企业配置 ```json { "singleQuote": true, "semi": true, "tabWidth": 2, "trailingComma": "all", "printWidth": 100, "arrowParens": "always", "endOfLine": "lf", "overrides": [ { "files": "*.json5", "options": { "singleQuote": false } } ] } ``` ### 自定义ESLint规则开发 ```javascript // eslint-plugin-enterprise/rules/no-magic-number.js 自定义规则 module.exports = { meta: { type: 'suggestion', docs: { description: '禁止魔法数字,要求提取为命名常量' }, schema: [ { type: 'object', properties: { ignore: { type: 'array', items: { type: 'number' } } }, additionalProperties: false, }, ], }, create(context) { const ignored = (context.options[0] && context.options[0].ignore) || [0, 1, -1]; return { Literal(node) { if (typeof node.value === 'number' && !ignored.includes(node.value)) { context.report({ node, message: '魔法数字 "skills_result" 应提取为命名常量', data: { value: node.value }, }); } }, }; }, }; ``` ## 常见问题 ### Q1:PRO版与免费版如何共存? 两者规则完全兼容,PRO版包含免费版全部能力。建议团队统一使用PRO版,个人项目可继续使用免费版。迁移时直接替换Skill文件,无需改动业务代码. ### Q2:如何为已有项目渐进式接入? 参考"团队迁移指南"五阶段方案。先用警告级跑通全量扫描,统计问题分布;再按模块逐步提升为阻断级,避免一次性阻塞所有提交. ### Q3:PRO版是否支持Monorepo? 支持。建议在根目录放置基础配置,各子包通过 `extends` 继承并按需覆盖。配合 `eslint-plugin-import` 的 `no-extraneous-dependencies` 规则可强制依赖边界. ### Q4:性能优化建议是否覆盖框架场景? 工具提供框架无关的性能原则(事件循环、合成层、内存)。对React/Vue等框架,工具会结合其渲染模型给出符合规范的写法,但深度框架调优建议结合对应专用工具. ### Q5:安全审查覆盖哪些漏洞? 覆盖常见前端漏洞:XSS、原型污染、不安全反序列化、敏感信息硬编码、危险动态执行、依赖审计。不覆盖服务端安全,如需服务端审查请配合后端专用工具. ### Q6:自定义规则开发支持哪些能力? 支持标准的ESLint规则开发模式,可访问AST节点、配置schema、提供自动修复建议。详见"配置示例"中的自定义规则模板. ## 错误处理 | 错误场景(续)| 原因 | 处理方式 | |----:|:----|----:| | LLM响应超时或无响应 | 网络延迟或模型负载过高 | ，请求；确认Agent平台LLM服务正常 | | 输入内容格式不正确 | 用户输入不符合skill预期格式 | 检查输入是否符合skill使用说明中的格式要求，参考示例章节 | | 执行结果与预期不符 | 指令描述不够明确或上下文不足 | 提供更详细的指令描述，补充必要的上下文信息 | | 命令执行失败 | 运行环境不满足要求或权限不足 | 确认运行环境符合依赖说明中的要求；检查命令权限设置 |