패키지 목록

• @typescript-eslint/eslint-plugin : Typescript 관련 규칙을 설정하는 플러그인
• @typescript-eslint/parser : Typescript를 파싱하는 역할
• eslint-config-airbnb : airbnb 코딩규칙을 사용 (리액트 코딩규칙 포함)
• eslint-config-prettier : Prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 설정
• eslint-plugin-prettier : Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력
• eslint-plugin-react : React 관련 설정을 지원
• eslint-plugin-react-hooks : React Hooks의 규칙을 강제하도록 하는 플러그인
• eslint-plugin-jsx-a11y : JSX내의 접근성 문제에 대해 즉각적인 AST 린팅 피드백을 제공
• eslint-plugin-import : ES2015+의 import/export 구문을 지원하도록 함

아래 두 패키지는 CRA에서 자동 제공하므로 CRA 이용시 제외하고 설치

npm i -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks

yarn add eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks

ESLint 설정

• .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  extends: [
    'airbnb',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:prettier/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
  ],
  rules: {
    'linebreak-style': 0,
    'import/prefer-default-export': 0,
    'prettier/prettier': 0,
    'import/extensions': 0,
    'no-use-before-define': 0,
    'import/no-unresolved': 0,
    'import/no-extraneous-dependencies': 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
    'no-shadow': 0,
    'react/prop-types': 0,
    'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'jsx-a11y/no-noninteractive-element-interactions': 0,
  },
};

Prettier 설정

• .prettierrc.js

module.exports = {
  arrowParens: "avoid", // 화살표 함수 괄호 사용 방식
  bracketSpacing: true, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  endOfLine: "auto", // EoF 방식, OS별로 처리 방식이 다름 
  htmlWhitespaceSensitivity: "css", // HTML 공백 감도 설정
  jsxBracketSameLine: false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  jsxSingleQuote: false, // JSX에 singe 쿼테이션 사용 여부
  printWidth: 130, //  줄 바꿈 할 폭 길이
  semi: true, // 세미콜론 사용 여부
  singleQuote: true, // single 쿼테이션 사용 여부
  tabWidth: 2, // 탭 너비
  trailingComma: "none", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  overrides: [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
};

TS 설정

• CRA

npx create-react-app my-app --template typescript
or
yarn create react-app my-app --template typescript

• 기존 프로젝트에 TS 추가

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

• tsconfig.json

{
  "compilerOptions": {
    "target": "es6", //어떤버전의 js로 컴파일할지 정의
    "lib": [ //어떤 환경에서 사용하는지 정의(api자동완성 제공해줌)
      "dom", //브라우저
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./src", // 추가된 것 ./src를 절대 경로로 지정
    "allowJs": true, //ts안에서 js허용(js파일 import가능)
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [ //컴파일할 폴더 입력. src의 모든파일 확인함
    "src"
  ],
  "exclude": [
    "node_modules"   
  ],
}