CRA, Eslint, Prettier로 React typescript 프로젝트 시작하기

개발에 들어가기 앞서 Eslint와 Prettier을 통해 코드 작성 스타일을 유지하고 대부분 개발자들이 사용하는 문법 규칙을 적용 하려고 한다. 개발하는데에 IDE는 VScode을 사용했으며 IDE에서의 Eslint와 Prettier 패키시 설치는 되어 있다는 가정하에 내용을 정리했다.

typescript CRA 프로젝트 생성

npx create-react-app myapp --template typescript

craco 설치 및 설정

절대경로 설정 및 이번 프로젝트에서 사용되는 ant-design(antd)의 less 옵션 설정 등을 수정하기 위해서는 webpack의 module alias을 수정해야 한다. CRA의 기본 설정으로는 수정이 어려워 craco을 설치하여 설정했다.

yarn add carco craco-alias --dev

그리고 아래와 같이 craco.config.js 파일을 만든다

const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
};

절대 경로 설정의 경우 tsconfig.paths.json파일을 따로 만들어 지정해 주었다.

//tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@pages/*": ["src/pages/*"],
      ...
    }
  }
}

마지막으로 package.json의 스크립트 명령어를 바꿔주면 된다

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

eslint 설정하기

이전 내용에서는 eslint설치 후 필요한 dependencies 패키지들을 yarn list 명령어를 통해 일일이 설치했지만 해당 명령어를 통해 설정을 입력 받는다.

npm init @eslint/config

이 명령어를 통해 이전에 package.json의 eslintConfig 영역에 설정해 주었던 내용들을 .eslintrc 파일을 만들어 설정해 준다. ex) browser: true (document, window 따위의 브라우저 객체들을 사용하기 위해)

eslint 절대경로 규칙 설정

eslint 규칙 수정할 경우 VScode내에서 절대경로 설정을 무시하고 상대경로로 수정이 된다. 따라서 패키지를 추가로 설치하여 .eslintrc 파일을 수정해 주면 된다.

yarn add eslint-plugin-preferred-import --dev

설치 후 .eslintrc파일의 plugins 부분에 preferred-import을 추가하면 된다.

eslint와 prettier 같이 사용하기

eslint와 prettier을 같이 사용하기 위해서는 추가적인 패키지 설치와 .eslintrc파일 수정이 필요하다. eslint에서 문법 규칙을 prettier에서 수정하는 내용들을 제외해야 하기 때문이다.

yarn add eslint-config-prettier eslint-plugin-prettier

패키지 설치 후 .eslintrc 파일의 extends 영역에 prettier을 추가했다

extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier'],

마지막 .eslintrc파일 구조이다

/* eslint-disable */

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json'],
  },
  plugins: ['react', 'prettier', 'preferred-import'],
  rules: {
    semi: 0,
    '@typescript-eslint/explicit-function-return-type': 0,
    '@typescript-eslint/no-unused-vars': 'warn',
    '@typescript-eslint/no-misused-promises': 'warn',
    '@typescript-eslint/strict-boolean-expressions': 0,
  },
};

rules영역에 검사하지 않을 규칙들을 추가했다. 검사를 하지 않을 규칙들은 0, 경고만 받고 싶은 규칙들을 warn을 통해 처리했다.

추가로, eslint와 prettier모두 파일 저장시 수정되도록 설정이 가능하다. 이번 프로젝트에서는 prettier는 설정했지만, eslint는 설정하지 않았다. 자동 수정을 적용하는 방법은 이렇다.

prettier 자동수정

VScode에서 Preference => settings으로 들어가 format on save을 체크해 주면 된다. 자동 수정이 않을 경우 F1 키를 눌러 Format Document을 적용하면 수정이 된다.

eslint 자동수정

프로젝트 폴터 내에 .vscode/settings.json을 생성하고 아래 설정을 추가하면 된다.

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }
}

모든 eslint와 prettier 설정이 끝났다. 개발하는동안 불필요한 규칙들은 rules에 추가하며 개발을 할 예정이다.