React - Typescript eslint, prettier 개발 환경 구축

CRA Typescript Template eslint, prettier 개발 환경 구축

• CRA(create-react-app) 시작하기

• 절대경로 alias 설정

• ESLint와 Prettier

• ESLint airbnb style 적용

• Testing Library 설정

CRA(create-react-app) 시작하기

npm으로 시작하기

npx create-react-app {프로젝트이름} --template typescript

yarn으로 시작하기

yarn create react-app {프로젝트이름} --template typescript

절대경로 alias 설정

1. tsconfig.json의 compilerOptions > baseUrl, paths 속성 추가

// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"] // src/App.tsx는 @/App.tsx로 경로 설정
    },
    ...
  }
}

1. webpack 구성 커스터마이징 위해 craco 설치, craco.config.js에 alias 추가

웹팩 커스텀하지 않으면 IDE에서는 인식하지만 브라우저에서 인식못함.

# npm
npm install -D @craco/craco

# yarn
yarn add -D @craco/craco

// craco.config.js
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    },
  },
}

ESLint와 Prettier

1. ESLint, Prettier 설치

# npm
npm install -D eslint prettier

# yarn
yarn add -D eslint prettier

1. Prettier가 적용하는 코드 스타일과 중복되는 ESLint 규칙을 비활성화하여 충돌 방지

# npm
npm install -D eslint-config-prettier eslint-plugin-prettier

# yarn
yarn add -D eslint-config-prettier eslint-plugin-prettier

1. TypeScript ESLint parser & plugin

# npm
npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

# yarn
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

1. ESLint에서 TypeScript 모듈을 불러올 때 경로를 지정해주는 도구(default가 js이기 때문)

# npm
npm install -D eslint-import-resolver-typescript

# yarn
yarn add -D eslint-import-resolver-typescript

1. .eslintrc.json

{
  "env": { "node": true, "browser": true },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {},
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {}
    }
  }
}

1. .prettierrc.json

{
  "printWidth": 80,
  "singleQuote": true,
  "arrowParens": "avoid",
  "semi": true,
  "useTabs": false,
  "trailingComma": "all",
  "tabWidth": 2
}

* ESLint airbnb style 적용

1. 패키지 다운로드

# npm
npm install -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

# yarn
yarn add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

1. .eslintrc.json 수정

{
  "env": { "node": true, "browser": true },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "react/jsx-filename-extension": [
      "warn",
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "import/no-unresolved": "error",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {}
    }
  }
}

Testing Library 설정

Jest 기준으로 절대 경로 alias 반영

// craco.config.js
module.exports = {
    ...
    jest: {
        configure: {
          moduleNameMapper: {
            '^@/(.*)$': '<rootDir>/src/$1',
          },
        },
    },
    ...
}