ts-formatter

Configure Prettier and ESLint for TypeScript and JavaScript projects.

1|1|Updated Nov 1, 2015
One-click install
npx skills add https://github.com/s4kr4/dotfiles --skill ts-formatter
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ts-formatter
Source: https://github.com/s4kr4/dotfiles/tree/main/.claude/skills/ts-formatter
Command: npx skills add https://github.com/s4kr4/dotfiles --skill ts-formatter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-to-use, standards-based TypeScript/JavaScript formatter and linter configuration guide to ensure consistent code style and quality across projects, especially when a project lacks local config files.

Core Features & Use Cases

  • Prettier-based formatting defaults that work for TS/JS projects with sensible options and minimal setup.
  • ESLint recommendations and modern flat config support (eslint.config.mjs/js) plus compatibility with legacy .eslintrc.json.
  • VSCode integration guidance and Lefthook pre-commit workflow to enforce formatting and linting before commits.

Quick Start

Install the recommended tooling if no project-specific config exists: npm install --save-dev prettier eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier; add eslint.config.mjs/js and .prettierrc.json with the provided defaults; set up VSCode to format on save using the Prettier extension; and run lint/format scripts as needed.

Frequently Asked Questions about ts-formatter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Prettier and ESLint for TypeScript projects?

Prettier and ESLint formatting standardizes code style in TypeScript projects. Install prettier, eslint, @typescript-eslint/parser, and @typescript-eslint/eslint-plugin as dev dependencies, then add eslint.config.mjs and .prettierrc.json with sensible defaults. VSCode's Prettier extension enforces formatting on save.

What's the difference between ESLint flat config and legacy .eslintrc format?

ESLint flat config (eslint.config.mjs/js) is the modern standard offering better composability and explicit module structure. Legacy .eslintrc.json still works but uses different syntax. This Skill covers both formats and recommends flat config for new projects.

Can I use Prettier with ESLint without conflicts?

Yes. ESLint and Prettier work together when eslint-config-prettier is installed to disable ESLint's formatting rules, letting Prettier handle formatting alone. This prevents contradictory rules and simplifies configuration.

How do I enforce formatting and linting before committing code?

Lefthook pre-commit hooks automate formatting and linting checks before commits. Configure Lefthook with npm scripts to run Prettier and ESLint on staged files, blocking commits that fail checks and ensuring code quality standards.

Do I need to configure formatting if my TypeScript project has no existing config?

No existing config means manual setup is required to enforce consistency. This Skill provides ready-to-use Prettier and ESLint defaults tailored for TypeScript/JavaScript projects, eliminating guesswork and establishing baseline standards immediately.

How do I integrate formatting tools into VSCode workflows?

VSCode integration uses the Prettier extension configured to format on save via .prettierrc.json and eslint.config.mjs. Settings sync formatting with your project's Prettier config, ensuring all editors apply identical rules automatically.