frontier/skills/ts-linting/SKILL.md
Use when setting up ESLint and/or Prettier in a TypeScript project, adding linting to an existing TypeScript codebase, or configuring typescript-eslint, eslint-config-prettier, or related packages.
npx skillsauth add jon23d/skillz ts-lintingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
ESLint v9+ with flat config (eslint.config.ts) and Prettier as a separate formatter. TypeScript projects must use type-aware rules.
Always install these exact packages:
npm install --save-dev \
eslint \
@eslint/js \
typescript-eslint \
prettier \
eslint-config-prettier
typescript-eslint — the modern unified package (replaces the old @typescript-eslint/parser + @typescript-eslint/eslint-plugin split)eslint-config-prettier — disables ESLint formatting rules that conflict with Prettiereslint-plugin-prettier — running Prettier as an ESLint rule is slow and conflates two tools; run them as separate scripts insteadeslint.config.tsAlways use TypeScript for the config file — not .js, not .mjs. ESLint v9 supports .ts configs natively with typescript-eslint.
// eslint.config.ts
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import prettier from "eslint-config-prettier";
export default tseslint.config(
// Ignore build artifacts — replaces .eslintignore in flat config
{ ignores: ["dist/", "node_modules/", "coverage/"] },
js.configs.recommended,
// Type-checked rules — requires project: true
...tseslint.configs.recommendedTypeChecked,
{
languageOptions: {
parserOptions: {
project: true,
tsconfigRootDir: import.meta.dirname,
},
},
rules: {
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-unused-vars": [
"error",
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
],
},
},
// Must be last: disables ESLint style rules that conflict with Prettier
prettier,
);
Key points:
recommendedTypeChecked (not just recommended) — enables type-aware rules like no-floating-promises, no-misused-promises, await-thenableproject: true in parserOptions is required for type-aware rules{ ignores: [...] } must be a standalone object at the top — not nested inside another config objectprettier spread must be last.prettierrc{
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100,
"tabWidth": 2
}
Add .prettierignore:
dist/
node_modules/
coverage/
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier --write .",
"format:check": "prettier --check ."
}
Do not use --ext .ts,.tsx — that flag is v8-only and not valid in ESLint v9 flat config.
.eslintrc.json / .eslintrc.js — legacy format, removed in ESLint v9. Always use flat config.eslint.config.js or .mjs — use .ts in TypeScript projects for type-safe config.tseslint.configs.recommended without type checking — use recommendedTypeChecked instead; it catches real runtime bugs.@typescript-eslint/parser + @typescript-eslint/eslint-plugin — the unified typescript-eslint package replaces both.eslint-plugin-prettier — don't; use eslint-config-prettier only.ignores — flat config has no .eslintignore; ignores go inside eslint.config.ts.prettier is last — if prettier isn't the final config entry, style rules conflict.development
Use when adding or modifying environment variable handling in TypeScript projects or monorepos — especially when using process.env directly, missing startup validation, sharing env schemas across packages, or encountering "undefined is not a string" errors at runtime from missing env vars.
testing
Use when creating a new skill, editing an existing skill, writing a SKILL.md, or verifying a skill works before deployment.
development
React UI design principles and conventions. Load when building or modifying any user interface or React components. Covers application type detection, visual standards, component design and structure, Mantine (business apps) and Tailwind (consumer apps), accessibility, responsiveness, state management, data fetching, testing, and in-app help patterns.
development
Use when setting up ESLint and/or Prettier in a TypeScript project, adding linting to an existing TypeScript codebase, or configuring typescript-eslint, eslint-config-prettier, or related packages.