本文へ移動
cccskills
無料GitHub で公開

code-formatter-installer

Installs and configures Prettier, ESLint, EditorConfig, and other code quality tools to enforce consistent code style across the team. Generates config files, npm scripts, editor settings recommendations, and CI integration suggestions. Use when users request "setup prettier", "add eslint", "configure code formatting", or "enforce code style".

インストール方法を見る

含まれるファイル(1)

  • SKILL.md6.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Code Formatter & Linter Installer

Establish consistent code formatting and linting across your project.

Core Workflow

  1. Detect stack: Identify language/framework (JS/TS, Python, Go, Rust)
  2. Choose tools: Select appropriate formatters and linters
  3. Generate configs: Create config files with best-practice rules
  4. Add scripts: Include npm/package scripts for format/lint
  5. Configure editor: Provide VS Code, IntelliJ, Vim settings
  6. Setup pre-commit: Add git hooks for automatic formatting
  7. CI integration: Suggest GitHub Actions or CI config

Tool Selection by Stack

JavaScript/TypeScript

  • Formatter: Prettier
  • Linter: ESLint + typescript-eslint
  • Editor: EditorConfig
  • Hooks: Husky + lint-staged

Python

  • Formatter: Black + isort
  • Linter: Ruff or Flake8 + mypy
  • Hooks: pre-commit

Go

  • Formatter: gofmt + goimports
  • Linter: golangci-lint

Rust

  • Formatter: rustfmt
  • Linter: clippy

Configuration Templates

Prettier (.prettierrc.json)

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "avoid"
}

ESLint (.eslintrc.json)

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "rules": {
    "no-console": "warn",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

EditorConfig (.editorconfig)

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.py]
indent_size = 4

[*.md]
trim_trailing_whitespace = false

Python (pyproject.toml)

[tool.black]
line-length = 100
target-version = ['py311']

[tool.isort]
profile = "black"
line_length = 100

[tool.mypy]
strict = true
warn_return_any = true

Package Scripts

JavaScript/TypeScript (package.json)

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
    "typecheck": "tsc --noEmit"
  }
}

Python

# Makefile or scripts
format:
	black .
	isort .

lint:
	ruff check .
	mypy .

format-check:
	black --check .
	isort --check .

Git Hooks Setup

Husky + lint-staged (Node.js)

  1. Install dependencies:
npm install --save-dev husky lint-staged
npx husky init
  1. Configure lint-staged (.lintstagedrc.json):
{
  "*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"],
  "*.{json,md,yml}": ["prettier --write"]
}
  1. Add pre-commit hook (.husky/pre-commit):
#!/bin/sh
npx lint-staged

pre-commit (Python)

  1. Create .pre-commit-config.yaml:
repos:
  - repo: https://github.com/psf/black
    rev: 24.1.1
    hooks:
      - id: black

  - repo: https://github.com/pycqa/isort
    rev: 5.13.2
    hooks:
      - id: isort

  - repo: https://github.com/astral-sh/ruff-pre-commit
    rev: v0.2.0
    hooks:
      - id: ruff
        args: [--fix]

  - repo: https://github.com/pre-commit/mirrors-mypy
    rev: v1.8.0
    hooks:
      - id: mypy
  1. Install:
pip install pre-commit
pre-commit install

Editor Configuration

VS Code (settings.json)

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  }
}

VS Code Extensions (.vscode/extensions.json)

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig",
    "ms-python.black-formatter"
  ]
}

IntelliJ/WebStorm

  • Enable: Settings → Languages & Frameworks → JavaScript → Prettier → On save
  • Enable: Settings → Tools → Actions on Save → Reformat code

CI Integration

GitHub Actions (.github/workflows/lint.yml)

name: Lint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run format:check
      - run: npm run lint
      - run: npm run typecheck

Pre-merge checks

# .github/workflows/pr-checks.yml
- name: Check formatting
  run: |
    npm run format:check || {
      echo "Code is not formatted. Run 'npm run format' locally."
      exit 1
    }

Installation Checklist

For every setup, provide:

  • Config files (.prettierrc, .eslintrc, .editorconfig, etc.)
  • Ignore files (.prettierignore, .eslintignore)
  • Package scripts (format, lint, format:check, lint:fix)
  • Git hooks (husky/pre-commit)
  • Editor settings (.vscode/settings.json)
  • CI workflow (.github/workflows/lint.yml)
  • Documentation (README section on running lint/format)

Best Practices

  1. Run formatter last: Prettier should override other formatting rules
  2. Extend configs: Use popular presets (Airbnb, Standard, etc.)
  3. Ignore generated files: Add build outputs to ignore files
  4. Make hooks skippable: Allow git commit --no-verify for emergencies
  5. Document process: Add "Code Style" section to CONTRIBUTING.md
  6. Test on clean install: Ensure configs work without local editor setup
  7. Keep rules minimal: Start strict, relax if needed

Common Configurations

See assets/configs/ for ready-to-use config files:

  • Next.js + TypeScript
  • React + TypeScript
  • Node.js + TypeScript
  • Python FastAPI
  • Python Django

Bypass Instructions (Emergencies)

# Skip pre-commit hooks
git commit --no-verify

# Skip CI checks (not recommended)
git push --no-verify

Document when bypass is acceptable (hotfixes, emergencies only).

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Audits and implements web accessibility (a11y) following WCAG 2.1 guidelines with ARIA patterns, keyboard navigation, screen reader support, and contrast checking. Use when users request "accessibility audit", "a11y review", "WCAG compliance", "screen reader support", or "keyboard navigation".

日本語の概要は準備中です。原文の説明を表示しています。

sathishssj3/Stereix-Engine22026年10月4日 更新

Creates Architecture Decision Records documenting key technical decisions with context, alternatives considered, tradeoffs, consequences, and decision owners. Use when documenting "architecture decisions", "technical choices", "design decisions", or "ADRs".

日本語の概要は準備中です。原文の説明を表示しています。

sathishssj3/Stereix-Engine22026年10月4日 更新

Designs multi-step agent workflows with tool usage, retry logic, state management, and budget controls. Provides orchestration diagrams, tool execution order, fallback strategies, and cost limits. Use for "AI agents", "agentic workflows", "multi-step AI", or "autonomous systems".

日本語の概要は準備中です。原文の説明を表示しています。

sathishssj3/Stereix-Engine22026年10月4日 更新

MUST USE when user wants to 调研/research/搜索/search/查/找/look up anything on the internet — e.g. 全网调研 X / 帮我调研一下 X / 查一下 X / 搜搜 X / 看看大家怎么评价 X / X 上有什么讨论 / research this topic。 Also MUST USE when user mentions any platform or shares any URL/链接: 小红书/xiaohongshu/xhs, Twitter/推特/X, B站/bilibili, Reddit, Facebook, Instagram, V2EX, LinkedIn/领英/招聘/求职/jobs, YouTube, GitHub code search, 小宇宙播客, 雪球/股票行情, RSS feeds, or any web URL. 15 platforms, multi-backend routing (OpenCLI / per-platform CLIs / APIs). Zero config for 6 channels. Run `agent-reach doctor --json` to see which backend serves each platform right now. NOT for: 写报告/数据分析/翻译等内容加工(本 skill 只负责从互联网获取内容); 发帖/评论/点赞等写操作;已有专门 skill 的平台(先用专门 skill)。 【路由方式】SKILL.md 包含路由表和常用命令,复杂场景需按需阅读对应分类的 references/*.md。 分类:search / social (小红书/推特/B站/V2EX/Reddit/Facebook/Instagram) / career(LinkedIn) / dev(github) / web(网页/文章/RSS) / video(YouTube/B站/播客) / finance(雪球/股票)。

日本語の概要は準備中です。原文の説明を表示しています。

sathishssj3/Stereix-Engine22026年10月4日 更新

Orchestrates multi-agent AI systems with task delegation, agent communication, shared memory, and workflow coordination. Use when users request "multi-agent system", "agent orchestration", "AI agents", "agent coordination", or "autonomous agents".

日本語の概要は準備中です。原文の説明を表示しています。

sathishssj3/Stereix-Engine22026年10月4日 更新

Creates SLO-based alerts and operational dashboards with key charts, alert thresholds, and runbook links. Use for "alerting", "dashboards", "SLO", or "monitoring".

日本語の概要は準備中です。原文の説明を表示しています。

sathishssj3/Stereix-Engine22026年10月4日 更新

sathishssj3 のスキルをすべて見る

このスキルの問題を報告する