AI TOOLS RADAR
모든 Skills / TERMINALSKILLS
TerminalSkills/skills

eslint

ESLint is the standard linting tool for JavaScript and TypeScript projects.

소스 보기

사용 방법

  1. 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
  2. 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
  3. 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/TerminalSkills/skills --skill eslint

시작 전 확인

  • 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
  • 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

ESLint — JavaScript and TypeScript Linting

Overview

ESLint reads your source code, applies a set of rules, and reports problems ranging from stylistic inconsistencies to genuine bugs. It catches unused variables, missing return statements, inconsistent naming, accessibility violations, and hundreds of other issues that slip past even careful code review.

This skill covers flat config, which works in ESLint 9 and 10. ESLint 10 (current, 10.13) requires Node.js 20.19+, 22.13+ or 24+ and no longer reads .eslintrc* files. Migrating an old project: npx @eslint/migrate-config .eslintrc.json writes a starting eslint.config.mjs; review it by hand.

Instructions

Installing ESLint

The fastest start is the wizard, which asks about your framework and installs the right packages: npm init @eslint/config@latest. To install by hand for a TypeScript project:

bash
npm install --save-dev eslint @eslint/js typescript-eslint
# React projects also need the hooks plugin; add eslint-plugin-react if you want its JSX rules
npm install --save-dev eslint-plugin-react-hooks

Two compatibility traps as of October 2026:

  • typescript-eslint 8.x supports TypeScript below 6.1 only, so a TypeScript 7 project must keep the linter on an older typescript for now.
  • eslint-plugin-react 7.37.5 declares ESLint ^9.7 at most, so npm install fails on ESLint 10 with an ERESOLVE error. Either pin eslint@9 (the config below works unchanged) or leave that plugin out; eslint-plugin-react-hooks 7 already supports 10.

Flat Config Basics

The flat config lives in eslint.config.js (or .mjs, .ts) at your project root. Instead of deeply nested JSON with extends and overrides, flat config uses an array of configuration objects. Each object applies to files matching its files glob pattern.

The examples use import syntax, so a file named eslint.config.js needs "type": "module" in package.json (otherwise ESLint stops with "Cannot use import statement outside a module"); eslint.config.mjs works without it. The same applies to the custom rule file below.

javascript
// eslint.config.js — Flat config for a TypeScript project
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import { defineConfig, globalIgnores } from 'eslint/config';

export default defineConfig([
  // Ignore build output (a block with only `ignores` is global)
  globalIgnores(['dist/', 'coverage/']),

  js.configs.recommended,
  tseslint.configs.recommended,

  {
    files: ['src/**/*.{ts,tsx}'],
    rules: {
      // Warn on console.log left in code
      'no-console': ['warn', { allow: ['warn', 'error'] }],

      // Unused variables are errors unless prefixed with an underscore
      '@typescript-eslint/no-unused-vars': ['error', {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      }],
    },
  },
]);

node_modules/ is ignored by default. For rules that need type information (no-floating-promises, no-unsafe-*), use tseslint.configs.recommendedTypeChecked and turn on the project service, which finds your tsconfig.json by itself:

javascript
// Added to the array above
{
  files: ['**/*.{ts,tsx}'],
  languageOptions: {
    parserOptions: { projectService: true, tsconfigRootDir: import.meta.dirname },
  },
},
// Plain JS files such as eslint.config.js are not in a tsconfig; skip type-aware rules there
{ files: ['**/*.js'], extends: [tseslint.configs.disableTypeChecked] },

The flat config is plain JavaScript: each array element is a config object, merged in order.

Adding React Support

React projects need JSX parsing and rules for hooks. The flat config makes it straightforward to layer these on top of your base configuration.

javascript
// eslint.config.js — React TypeScript project
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react'; // needs ESLint 9, see the install notes
import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig, globalIgnores } from 'eslint/config';

export default defineConfig([
  globalIgnores(['dist/', '.next/']),
  js.configs.recommended,
  tseslint.configs.recommended,
  reactHooks.configs.flat.recommended,

  {
    files: ['src/**/*.{jsx,tsx}'],
    plugins: { react },
    languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
    settings: { react: { version: 'detect' } },
    rules: {
      'react/jsx-no-target-blank': 'error',
    },
  },
]);

reactHooks.configs.flat.recommended enables rules-of-hooks and exhaustive-deps. Version 7 of the plugin also ships React Compiler based rules in that preset (for example react-hooks/set-state-in-effect), which flag code that older versions accepted. Without eslint-plugin-react, drop the react lines and keep the rest.

Understanding Rules

Rule severities are 'off' (0), 'warn' (1) and 'error' (2); errors fail the run, warnings do not. Options go in an array: [severity, ...options].

javascript
// eslint.config.js — Examples of rule configuration patterns
export default [
  {
    files: ['src/**/*.ts'],
    rules: {
      // Simple on/off
      'no-debugger': 'error',

      // Rule with options
      'no-restricted-imports': ['error', {
        patterns: [{
          group: ['../../*'],
          message: 'Use path aliases (@/) instead of relative imports above two levels.',
        }],
      }],

      // Naming conventions via TypeScript plugin
      '@typescript-eslint/naming-convention': ['error',
        { selector: 'interface', format: ['PascalCase'] },
        { selector: 'typeAlias', format: ['PascalCase'] },
      ],

    },
  },
];

Writing Custom Rules

When the built-in rules and plugins don't cover your team's specific conventions, you can write custom rules. ESLint rules are functions that receive an AST node and report problems.

javascript
// eslint-rules/no-hardcoded-urls.js — Custom rule to prevent hardcoded API URLs
export default {
  meta: {
    type: 'problem',
    docs: {
      description: 'Disallow hardcoded API URLs in source files',
    },
    schema: [], // required in ESLint 9+ if the rule takes options; [] means none
    messages: {
      hardcodedUrl: 'Use environment variables instead of hardcoded URLs. Found: "{{url}}"',
    },
  },
  create(context) {
    const urlPattern = /^https?:\/\/(api|staging|prod)\./;

    return {
      Literal(node) {
        if (typeof node.value === 'string' && urlPattern.test(node.value)) {
          context.report({
            node,
            messageId: 'hardcodedUrl',
            data: { url: node.value },
          });
        }
      },
    };
  },
};

Register the custom rule in your flat config using the plugins field.

javascript
// eslint.config.js — Registering a custom rule
import noHardcodedUrls from './eslint-rules/no-hardcoded-urls.js';

export default [
  {
    files: ['src/**/*.ts'],
    plugins: {
      custom: {
        rules: {
          'no-hardcoded-urls': noHardcodedUrls,
        },
      },
    },
    rules: {
      'custom/no-hardcoded-urls': 'error',
    },
  },
];

Auto-Fix

--fix rewrites files to resolve fixable violations.

bash
# Fix all auto-fixable issues
npx eslint --fix src/

# Apply only some kinds of fix (directive, problem, suggestion, layout)
npx eslint --fix --fix-type problem,suggestion src/

# Preview without writing: npx eslint --fix-dry-run -f json src/

In VS Code, the ESLint extension can fix on save:

jsonc
// .vscode/settings.json — Auto-fix ESLint issues on save
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Running ESLint in CI

In continuous integration, ESLint should run as a blocking check. Any error-level violation fails the pipeline, preventing the code from being merged.

yaml
# .github/workflows/lint.yml — ESLint as a required CI check
name: Lint
on: [push, pull_request]

jobs:
  eslint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm

      - run: npm ci
      - run: npx eslint src/ --max-warnings 0

The --max-warnings 0 flag treats warnings as errors in CI. This prevents warning count from growing unbounded while still letting developers see warnings in their editors during development.

Examples

Example 1: "Add ESLint to my Vite React TypeScript app"

bash
npm install --save-dev eslint @eslint/js typescript-eslint eslint-plugin-react-hooks
# create eslint.config.js from the React section above, then:
npx eslint src/

Result: src/a.tsx 4:9 error 'unused' is assigned a value but never used @typescript-eslint/no-unused-vars and a react-hooks/exhaustive-deps warning for a missing effect dependency; exit code 1 on errors.

Example 2: "We have 3,000 errors after enabling the strict preset"

Bulk suppressions (ESLint 9.24+) record current violations in eslint-suppressions.json, so CI fails only on new ones:

bash
npx eslint --suppress-all src/        # writes eslint-suppressions.json
npx eslint --prune-suppressions src/  # after fixing some, drop entries that no longer apply

Commit the file and shrink it over time. Running npx eslint src/ afterwards exits 0.

Guidelines

  • Run npx eslint --print-config src/index.ts to see the exact merged config for one file when a rule does not behave as expected; npx eslint --inspect-config opens a visual inspector.
  • Later config objects override earlier ones: put your rules after presets.
  • Use // eslint-disable-next-line rule-name -- reason for one line, not file-wide disables.
  • Leave formatting to a formatter such as Prettier.
같은 저장소의 Skills

더 많은 Skills

모든 Skills
TerminalSkills
커뮤니티

3dsmax-rendering

Scripts and configures production rendering in Autodesk 3ds Max with the V-Ray and Corona renderers: output size and files, render elements, denoising, light mix, batch and command-line rendering, and network rendering. Use when a user asks to set up a production render, render several cameras in one batch, render from the command line or on a render farm, add render passes for compositing, or cut render time for archviz and product shots.

설치 수
0
GitHub Stars
180
업데이트
10월 25일
Apache-2.02 파일
상세 보기 →
TerminalSkills
커뮤니티

3dsmax-scripting

Covers scripting Autodesk 3ds Max, the 3D modeling and rendering application, with MAXScript and Python (pymxs): scene manipulation, object creation, material assignment, camera and light setup, batch operations, and file I/O. Use when tasks involve automating repetitive 3ds Max workflows, batch processing scenes, running scripts headless with 3dsmaxbatch, creating custom tools, or scripting scene setup for archviz, product visualization, or VFX.

설치 수
0
GitHub Stars
180
업데이트
10월 25일
Apache-2.02 파일
상세 보기 →
TerminalSkills
커뮤니티

3proxy

3proxy is a small open-source proxy server that runs HTTP/HTTPS, SOCKS4/5, SNI and TCP/UDP port-mapping proxies from one config file. Use when a user asks to set up an HTTP or SOCKS5 proxy, add proxy users and passwords, write 3proxy access rules, chain or rotate upstream (parent) proxies, limit bandwidth, connections or monthly traffic per user, run 3proxy in Docker, or fix a 3proxy.cfg that will not start.

설치 수
0
GitHub Stars
180
업데이트
10월 25일
Apache-2.02 파일
상세 보기 →
TerminalSkills
커뮤니티

a2a-protocol

Builds Agent2Agent (A2A) servers and clients, the open protocol (originally from Google, now under the Linux Foundation) that lets AI agents from different frameworks call each other. Use when the user wants to create an A2A-compliant agent, build an Agent Card, implement task management, connect agents across frameworks, set up agent discovery, handle streaming responses, implement push notifications, or orchestrate multi-agent workflows. Trigger words: a2a, agent to agent, agent2agent, a2a pro

설치 수
0
GitHub Stars
180
업데이트
10월 25일
Apache-2.02 파일
상세 보기 →