CRA에서 typescript 적용하기

빡기·2020년 4월 8일

Typesciprt를 react에 적용하는 2가지 방법
1. CRA에 적용하기(CRA공식문서)
2. 수동으로 webpack부터 전부 설정하기(공식문서참고,김정환블로그)
우선은 CRA에 적용하는 방법부터 살펴보기로 하자!

1. CRA 프로젝트 생성

npx create-react-app 프로젝트이름 --template typescript
npm i --save react react-dom
npm i --save-dev @types/react @types/react-dom

CRA는 착하게도 간단하게 저 명령어만 사용하면 typescript까지 지원을 해준다.

2. Eslint prettier 설정

eslint가 typescript를 lint 할 수 있도록 허용해주는 parser인 @typescript-eslint/parser
typescript에 구체화된 ESLINT rule들을 잔뜩 포함하는 플러그인 @typescript-eslint/eslint-plugin
react에서 타입스크립트를 사용하려면 eslint-plugin-react 의존성 필요
위의 3가지를 설치해보자
npm i --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react

2-1 위의 명령어를 실행한 뒤 `.eslint.rc`를 설정해주자

module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  extends: [
    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
    "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
  ],
  parserOptions: {
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
    ecmaFeatures: {
      jsx: true // Allows for the parsing of JSX
    }
  },
  rules: {
  },
  settings: {
    react: {
      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    }
  }
};

rules 부분에 Lint할 조건들을 적어주면 되기도 하지만 prettier config를 통해서 바로 formatting으로 해보자

2-2 prettier 설정

prettier와 prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config인 eslint-config-prettier
ESLint 규칙에 따라 작동하게 해주는 플러그인인 eslint-plugin-prettier

위의 2가지 설치
npm i --save-dev eslint-config-prettier eslint-plugin-prettier

pretter.rc 설정
본인이 원하는 스타일로 설정하고 싶으면 블로그참조, 공식문서

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 4
};

2-3 eslint.rc 다시 수정

module.exports =  {
    parser:  '@typescript-eslint/parser', 
    extends:  [
        'plugin:@typescript-eslint/recommended', 
        'prettier/@typescript-eslint', 
        'plugin:prettier/recommended',  
    ],
    parserOptions:  {
    ecmaVersion:  2018, 
    sourceType:  'module', 
    ecmaFeatures:  {
      jsx:  true,  
    },
    },
    rules:  {
    // 추후 .prettierrc.js 파일에서 설정해줄 예정
    },
    settings:  {
      react:  {
        version:  'detect', 
      },
    },
  };

수정된 부분만 바꿔주고 곂치지 않은 내용들은 그대로 유지

3. Vscode settings.json 설정

{
  "eslint.autoFixOnSave": true, // has been deprecated, use editor.codeActionsOnSave 								    // instead 라고 써있었지만 주석 처리를 하면 저장 시 										// formatting이 안되어서 주석을 풀었다.
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ],
  {
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false
  }
}