[React-Native]Eslint, Prettier 설정(Typescript)

목적

코드 컨벤션(코드 스타일 규약) 및 린트(코드 스타일 검사)를 적용함으로써 개발 프로세스 수립.

정의

기본적인 코드 스타일은 Airbnb 스타일을 적용

https://airbnb.io/javascript/react/(원본)

https://github.com/apple77y/javascript/tree/master/react(한국어판)

추가적인 코드 스타일은 프리티어 적용

Typescript에 대한 컨벤션을 추가로 적용

Airbnb의 컨벤션은 자바스크립트 전용이기 때문에 타입스크립트에 대한 추가적인 컨벤션이 필요합니다.

@typescript-eslint/no-explicit-any

적용

린트, 프리티어 플러그인 설치

vscode에서 린트, 프리티어 플러그인 설치

린트 도구 설치

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

(--save-dev 옵션은 npm에서 사용되는 옵션 중 하나로, 개발 의존성(development dependencies)에 패키지를 추가할 때 사용됩니다. 이는 프로젝트의 개발 및 테스트 단계에서만 필요한 패키지들을 지정하는 데 유용합니다. 예를 들어, 테스트 프레임워크, 빌드 도구, 린터 등은 개발할 때 필요하지만 실제 프로덕션 코드에서는 필요하지 않습니다. 이러한 패키지들을 --save-dev 옵션을 사용하여 설치하면, package.json 파일의 devDependencies 섹션에 추가됩니다.)

타입스크립트용 린트 도구 설치

npm install --save-dev eslint-import-resolver-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

린트, 프리티어 파일설정

프로젝트 루트에 설정해준다.

린트(.eslintrc.js)

module.exports = {
  root: true,
  extends: ['airbnb', 'airbnb/hooks', 'prettier'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': ['error'],
    'no-console': 'off',
    'react-native/no-inline-styles': 'off',
    'import/extensions': 'off', // Disable for react-native imports
    'import/no-unresolved': 'off', // Disable for react-native imports
    'react/jsx-filename-extension': [1, {extensions: ['.tsx', '.jsx']}],
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-unused-vars': 'warn',
    '@typescript-eslint/no-explicit-any': 'error', // any 타입 사용 경고
  },
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true, // @types/* 모듈도 확인합니다
      },
    },
  },
};

프리티어(.prittierrc.js)

module.exports = {
    /**
     * @template: printWidth: <int>
     * @description: 코드 한줄의 개수
     * 추천) 가독성을 위해 80자 이상을 사용하지 않는 것이 좋습니다.
     * 추천) 코드 스타일 가이드에서 최대 줄 길이 규칙은 종종 100 또는 120으로 설정됩니다.
     */
    printWidth: 100,

    /**
     * @template: tabWidth: <int>
     * @description: 들여쓰기 너비 수(탭을 사용할 경우 몇칸을 띄워줄지)
     */
    tabWidth: 2,

    /**
     * @template: useTabs: <bool>
     * @description: 탭 사용 여부 (미사용 시 스페이스바로 간격조정을 해야함.)
     */
    useTabs: false,

    /**
     * @template: semi: <bool>
     * @description: 명령문의 끝에 세미콜론(;)을 인쇄합니다.
     * true: (;)를 추가함
     * false: (;)를 지움
     */
    semi: true,

    /**
     * @template: singleQuote: <bool>
     * @description: 큰따옴표("") 대신 작은따옴표('')를 사용여부
     * true: 홀따옴표로 사용
     * false: 큰따옴표로 사용
     */
    singleQuote: true,

    /**
     * @template: trailingComma: "<es5|none|all>"
     * @description: 객체나 배열을 작성하여 데이터를 넣을때, 마지막에 후행쉼표를 넣을지 여부
     * es5: 후행쉼표 제외
     * none: 후행쉼표 없음
     * all: 후행쉼표 포함
     */
    trailingComma: 'all',

    /**
     * @template: bracketSpacing: <bool>
     * @description: 개체 리터럴에서 대괄호 사이의 공백을 넣을지 여부
     * true: 공백을 넣음 { foo: bar }
     * false: 공백을 제외 {foo: bar}
     */
    bracketSpacing: false,

    /**
     * @template: bracketSpacing: <'always'| 'avoid'>
     * 화살표 함수가 하나의 매개변수를 받을 때 괄호 사용여부
     * always : 괄호 사용
     * avoid : 괄호 제거
     */
    // arrowParens: 'avoid',

    jsxSingleQuote: true,

    // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
    bracketSameLine: false,

    //단독 화살표 함수의 매개 변수 주위에 괄호를 자동으로 붙힘 (default: 'avoid')
    arrowParens: 'avoid',
};

린트이그노어(.eslintignore)

node_modules/
ios/
android/
build/

프리티어이그노어(.prettierignore)

node_modules/
ios/
android/
build/

eslint-config-prettier 설치

npm install --save-dev eslint-config-prettier

Prettier와 ESLint가 서로 충돌하지 않도록 하기 위해 eslint-config-prettier를 사용합니다. 이는 ESLint의 포맷팅 관련 규칙을 비활성화하여 Prettier가 포맷팅을 담당하도록 합니다.

tsconfig.json 파일 수정

tsconfig.json

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "jsx": "react",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".", // 프로젝트 루트 디렉토리를 baseUrl로 설정
    "paths": {
      "@/*": ["src/*"] // 예시: src 디렉토리를 @로 alias 설정
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build"]
}

사용

1. 스크립트 사용

npm run lint

2. VScode 환경설정 사용

환경설정에서 eslint 검색후 Edit in settings.json 클릭

settings.json

{
  "workbench.startupEditor": "none",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "git.autofetch": true,
  "workbench.colorTheme": "Default Light+",
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "eslint.codeActionsOnSave.rules": null,
  "prettier.requireConfig": true, // 프로젝트 루트에 Prettier 설정 파일이 있을 때만 Prettier 사용
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "typescript.tsdk": "node_modules/typescript/lib"
}

참조

https://eslint.org/docs/latest/

https://ui.toast.com/fe-guide/ko_CODING-CONVENTION

https://typescript-eslint.io/rules/

마무리

컨벤션은 추가 의견에 따라 변경될 수 있음.