Mantine oxc config

Mantine 프로젝트에서 사용하는 oxc 설정 묶음이에요. oxlint(린터)과 oxfmt(포매터)용 설정이에요. 이 설정을 프로젝트에 적용하면 코드가 Mantine과 동일한 스타일과 컨벤션을 따르도록 보장할 수 있어요.

출처: 문서

본문

설치 (Installation)

oxlint 및 oxfmt와 함께 oxc-config-mantine을 설치해요:

yarn add --dev oxlint oxfmt oxc-config-mantine

oxlint 설정 (oxlint configuration)

프로젝트 루트에 oxlint.config.ts 파일을 만들고 공유 설정을 확장해요:

import { defineConfig } from 'oxlint';
import { oxlint } from 'oxc-config-mantine';

export default defineConfig({
  extends: [oxlint],
  ignorePatterns: ['**/*.{mjs,cjs,js,d.ts,d.mts}'],
});

oxfmt 설정 (oxfmt configuration)

프로젝트 루트에 oxfmt.config.ts 파일을 만들어요:

import { defineConfig } from 'oxfmt';
import { oxfmt } from 'oxc-config-mantine';

export default defineConfig(oxfmt);

포매터를 커스터마이즈하려면 기본 설정을 펼쳐서(...oxfmt) 프로젝트별 설정을 추가하면 돼요. 예를 들어 추가적인 ignore 패턴을 넣으려면:

import { defineConfig } from 'oxfmt';
import { oxfmt } from 'oxc-config-mantine';

export default defineConfig({
  ...oxfmt,
  ignorePatterns: [...oxfmt.ignorePatterns, 'dist'],
});

oxlint과 oxfmt 실행 (Running oxlint and oxfmt)

코드를 린트하고 포맷할 수 있도록 package.json에 스크립트를 추가해요:

{
  "scripts": {
    "lint": "oxlint",
    "format": "oxfmt --write \"**/*.{ts,tsx,css}\""
  }
}

그런 다음 패키지 매니저로 실행해요:

npm run lint
npm run format

규칙과 소스 코드 (Rules and source code)

Mantine oxlint 설정은 권장되는 oxlint 규칙을 확장하고, react, typescript, jsx-a11y, jest 플러그인에 대한 커스텀 규칙과 설정을 추가해요. 전체 규칙 목록과 소스 코드는 oxc-config-mantine 저장소에서 확인할 수 있어요.

Mantine oxc config