React & Typescript Setup (without CRA) - 3 (eslint & prettier 설정)

eslint & prettier 설정

이번에는 개발자가 코딩을 하기에 편리한 기능들을 지원해주는 eslint와 prettier를 셋업해보겠다.

1. eslint 및 eslint 패키지 설치

1) eslint 설치

$ npm install -D eslint

2) prettier와 react 관련된 패키지 설치

$ npm install -D eslint-config-prettier eslint-plugin-prettier eslint-plugin-react

3) typescript 관련 패키지 설치

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

2. prettier 설치

$ npm install -D prettier

3. eslint 설정 파일 생성 및 설정 (.eslintrc)

참고 url : https://velog.io/@kmlee95/React-Typescript-eslint-prettier설정

// .eslintre
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended", // 기본 eslint
    "plugin:react/recommended", // react eslint
    "plugin:@typescript-eslint/recommended", // typescript eslint
    "plugin:prettier/recommended", // prettier 사용하기 위해
    "eslint-config-prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "warn",
    "@typescript-eslint/no-var-requires": 0
  }
}

4. prettier 설정 파일 생성 및 설정 (.prettierrc)

// .prettierrc
{
  "printWidth": 100,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

5. eslint, prettier Extension 설치

vscode 좌측 탭의 Extensions에서 검색하여 설치.

6. vscode 설정하기

cmd + , 로 vscode setting을 열고 우측 상단의 open setting(JSON) 아이콘을 클릭하여 settings.json 파일을 열고 수정한다

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

그러면 저장할때마다 자동으로 코드가 이쁘게 바뀐다.

(Move to Github Repository)