ESLint와 Prettier에서 마이그레이션

Biome는 ESLint 및 Prettier에서의 마이그레이션을 용이하게 하기 위해 특별한 명령어를 제공합니다.

세부 사항을 알고 싶지 않다면 다음 명령어만 실행하면 됩니다:

1
biome migrate eslint --write
2
biome migrate prettier --write

ESLint에서 마이그레이션

Biome 라이터의 많은 규칙은 ESLint 또는 ESLint 플러그인의 규칙에서 영감을 받거나 동일합니다.
우리는 TypeScript ESLint, ESLint JSX A11y, ESLint React, 그리고 ESLint Unicorn 같은 일부 ESLint 플러그인을 지원합니다.
그러나 Biome는 자체적인 규칙 이름 규칙을 사용합니다.
Biome는 camelCaseRuleName을 사용하는 반면, ESLint는 kebab-case-rule-name을 사용합니다.
또한, Biome는 규칙의 의도를 더 잘 전달하기 위해 이름을 다르게 선택하는 경우가 많습니다.
규칙의 출처는 해당 규칙을 설명하는 페이지에 있습니다.
또한, ESLint 규칙에서 대응되는 Biome 규칙을 찾으려면 전용 페이지를 사용할 수 있습니다.

마이그레이션을 쉽게 하기 위해, Biome는 biome migrate eslint라는 서브커맨드를 제공합니다.
이 서브커맨드는 ESLint 설정을 읽고, 해당 설정을 Biome로 포팅하려 시도합니다.
이 서브커맨드는 전통적인 구성 파일과 평면 구성 파일 모두를 처리할 수 있습니다.
기존 설정의 extends 필드를 지원하며, 공유 설정과 플러그인 설정을 함께 로드합니다.
평면 구성 파일의 경우, 서브커맨드는 단지 자바스크립트 확장자(js, cjs, mjs) 파일만 찾고, 노드 환경에서 로드하려 합니다.
서브커맨드는 노드가 비어 있지 않은 모든 플러그인과 extends 설정을 로드하고 해결해야 합니다.
또한, .eslintignore 파일도 마이그레이션합니다.

다음과 같은 ESLint 구성이 있다고 가정해봅시다:

1
{
2
  "extends": ["plugin:unicorn/recommended"],
3
  "plugins": ["unicorn"],
4
  "ignore_patterns": ["dist/**"],
5
  "globals": {
6
    "Global1": "readonly"
7
  },
8
  "rules": {
9
    "eqeqeq": "error"
10
  },
11
  "overrides": [
12
    {
13
      "files": ["tests/**"],
14
      "rules": {
15
        "eqeqeq": "off"
16
      }
17
    }
18
  ]
19
}

그리고 다음은 초기의 Biome 구성입니다:

1
{
2
  "linter": {
3
    "enabled": true,
4
    "rules": {
5
      "recommended": true
6
    }
7
  }
8
}

다음 명령어를 실행하여 ESLint 구성 정보를 Biome로 마이그레이션합니다.

1
npx @biomejs/biome migrate eslint --write

1
pnpx @biomejs/biome migrate eslint --write

1
bunx --bun @biomejs/biome migrate eslint --write

1
deno run -A npm:@biomejs/biome migrate eslint --write

1
yarn exec biome migrate eslint --write

이 서브커맨드는 초기의 Biome 구성 정보를 덮어씁니다.
예를 들어, recommended를 비활성화합니다.
결과적으로 다음과 같은 새로운 구성이 생성됩니다:

1
{
2
  "organizeImports": { "enabled": true },
3
  "linter": {
4
    "enabled": true,
5
    "rules": {
6
      "recommended": false,
7
      "complexity": {
8
        "noForEach": "error",
9
        "noStaticOnlyClass": "error",
10
        "noUselessSwitchCase": "error",
11
        "useFlatMap": "error"
12
      },
13
      "style": {
14
        "noNegationElse": "off",
15
        "useForOf": "error",
16
        "useNodejsImportProtocol": "error",
17
        "useNumberNamespace": "error"
18
      },
19
      "suspicious": {
20
        "noDoubleEquals": "error",
21
        "noThenProperty": "error",
22
        "useIsArray": "error"
23
      }
24
    }
25
  },
26
  "javascript": { "globals": ["Global1"] },
27
  "overrides": [
28
    {
29
      "include": ["tests/**"],
30
      "linter": { "rules": { "suspicious": { "noDoubleEquals": "off" } } }
31
    }
32
  ]
33
}

현재 biome migrate eslint는 YAML로 작성된 구성은 지원하지 않습니다.

기본적으로, Biome는 영감을 받은 규칙은 마이그레이션하지 않습니다.
영감을 받은 규칙까지 마이그레이션하려면 명령줄 옵션 --include-inspired을 사용하세요.

1
npx @biomejs/biome migrate eslint --write --include-inspired

1
pnpx @biomejs/biome migrate eslint --write --include-inspired

1
bunx --bun @biomejs/biome migrate eslint --write --include-inspired

1
deno run -A npm:@biomejs/biome migrate eslint --write --include-inspired

1
yarn exec biome migrate eslint --write --include-inspired

주의할 점은, 일부 규칙 옵션이 구현되지 않았거나 원래 구현과 약간 다를 수 있기 때문에, 정확히 ESLint와 동일한 동작을 얻는 것은 거의 불가능하다는 점입니다.

ESLint는 버전 관리 시스템의 무시 파일을 고려하기 때문에, 우리는 보다 효과적으로 작동하도록 버전 관리 시스템 통합을 활성화할 것을 권장합니다.

Prettier에서 마이그레이션

Biome는 가능한 한 최대한으로 Prettier 포맷터와 일치하도록 설계되었습니다.
그러나 기본값이 다릅니다. 예를 들어, 들여쓰기로 공백 대신 탭을 사용합니다.
biome migrate prettier --write 명령어를 실행함으로써 쉽게 이동할 수 있습니다.

다음은 현재의 Prettier 구성입니다:

1
{
2
  "useTabs": false,
3
  "singleQuote": true,
4
  "overrides": [
5
    {
6
      "files": ["*.json"],
7
      "options": { "tabWidth": 2 }
8
    }
9
  ]
10
}

다음 명령어를 실행하여 당신의 Prettier 구성 정보를 Biome로 마이그레이션합니다.

1
npx @biomejs/biome migrate prettier --write

1
pnpx @biomejs/biome migrate prettier --write

1
bunx --bun @biomejs/biome migrate prettier --write

1
deno run -A npm:@biomejs/biome migrate prettier --write

1
yarn exec biome migrate prettier --write

결과로 나타나는 다음은 기존의 Biome 구성입니다:

1
{
2
  "formatter": {
3
    "enabled": true,
4
    "formatWithErrors": false,
5
    "indentStyle": "space",
6
    "indentWidth": 2,
7
    "lineEnding": "lf",
8
    "lineWidth": 80,
9
    "attributePosition": "auto"
10
  },
11
  "organizeImports": { "enabled": true },
12
  "linter": { "enabled": true, "rules": { "recommended": true } },
13
  "javascript": {
14
    "formatter": {
15
      "jsxQuoteStyle": "double",
16
      "quoteProperties": "asNeeded",
17
      "trailingCommas": "all",
18
      "semicolons": "asNeeded",
19
      "arrowParentheses": "always",
20
      "bracketSpacing": true,
21
      "bracketSameLine": false,
22
      "quoteStyle": "single",
23
      "attributePosition": "auto"
24
    }
25
  },
26
  "overrides": [
27
    {
28
      "include": ["*.json"],
29
      "formatter": {
30
        "indentWidth": 2
31
      }
32
    }
33
  ]
34
}

이 서브커맨드는 .prettierrc.js와 같은 자바스크립트 구성 파일을 로드하기 위해 노드 환경이 필요합니다.
biome migrate prettier는 JSON5, TOML 또는 YAML로 작성된 구성은 지원하지 않습니다.

Prettier도 버전 관리 시스템의 무시 파일을 고려하기 때문에, 우리는 보다 효과적으로 작동하도록 버전 관리 시스템 통합을 활성화할 것을 권장합니다.