리액트 프로젝트 생성

1. 리액트 프로젝트를 cra로 생성한다.

▶ npx create-react-app [project_name]  --template=typescript
or
▶ yarn create react-app [project_name] --template typescript

그리고 cra로 프로젝트를 생성한다면 eslint도 탑재되어있기 때문에 따로 설정할 필요는 없다.

prettier 설정

우선 prettier를 설치한다.

▶ npm i -D prettier
or
▶ yarn add -D prettier

그리고 아무런 조치도 하지 않고 eslint와 prettier를 같이 사용한다면 충돌이 일어난다.
왜냐하면 eslint도 코드 포매터의 기능을 하기 때문이다.
그래서 eslint-config-prettier, eslint-plugin-prettier를 설치해 충돌을 방지한다.

▶ npm i -D eslint-config-prettier eslint-plugin-prettier
or
▶ yarn add -D eslint-config-prettier eslint-plugin-prettier

설치를 했으면 package.json을 아래처럼 수정한다.

{
  ...
  
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:react/recommended",
      "plugin:prettier/recommended",
      "plugin:@typescript-eslint/recommended"
    ],
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/*.ts?(x)"
        ],
        "rules": {
          "prettier/prettier": ["error"],
          "react/react-in-jsx-scope": "off",
          "react/jsx-filename-extension": [2,{"extensions": [".ts",".tsx"]}]
        }
      }
    ]
  },
  
  ...
}

vscode extension 설치

이제 vscode에서 사용하기 위해선 extension을 설치해야한다.
eslint와 prettier extension을 각각 설치해준다.

settings.json 수정

루트폴더에 .vscode 폴더를 생성한 후에 settings.json 파일을 추가해준다.
그 후 아래 내용을 입력한다.

{
  // Set the default
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // js
  "[javascript]": {
    "editor.formatOnSave": true
  },  
  // ts
  "[typescript]": {
    "editor.formatOnSave": true
  },
  // jsx
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
}

prettier 설정

루트경로에 .prettierrc파일을 만든 후 설정을 진행한다.
옵션은 prettier 공식 홈페이지에서 확인할 수 있다.