React + TypeScript에 eslint, prettier Setting

먼지·2022년 6월 14일
0
post-thumbnail

create-react-app & Typescript 에 eslint, prettier 세팅을 하면서 계속 에러->구글링->수정 3일차.. 지금 나는 프로젝트를 만드는 것이 더 중요한 상태라 제대로는 아니어도 조금은 파악하고 넘어가야겠다고 느꼈다ㅜㅜ

eslint vs Prettier

코드 컨벤션을 잡아주는 아이들로 eslint는 코드 퀄리티를, prettier은 코드 스타일을 깔끔하게 보장함

ESLint 설치 초기화

# 설치
npm i -D eslint

# 파일 생성
npx eslint --init

파일 변경

// .prettier

{
  "printWidth": 100,
  "useTabs": false,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "auto"
}
  • printWidth : 줄 바꿈 할 폭 길이
  • useTabs : 탭 사용 여부
  • trailingComma : 여러 줄을 사용할 때 후행 콤마 사용 방식
  • singleQuote : single 쿼테이션 사용 여부
  • tabWidth : 탭 너비
  • semi : 세미콜론 사용 여부
  • singleQuote : single 쿼테이션 사용 여부
  • endOfLine : EoF 방식, OS별로 처리 방식이 다름
// .eslintrc.json

{
  // 사전 정의된 전역 변수 사용을 정의. 자주사용되는 설정으로는 brower, node가 있음
  // node 환경인 워크스페이스면 `node:true` 추가
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
    
  // ESLint는 서드파티 플러그인 사용을 지원함
  // 주의해야 할 점이 plugins와 extends에서 prettier 설정을 맨 마지막에 해야한다?
  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
    
  // 추가한 플러그인에서 사용할 규칙을 설정함.
  "extends": [
    "airbnb",
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
    
  // 각 코드 파일 검사. ESLint는 구문 분석을 위해 기본적으로 Espree 파서를 사용함
  "parser": "@typescript-eslint/parser", // ts 구문 분석을 위해 사용
    
  // ESLint 사용을 위해 지원하려는 JavaScript 언어 옵션을 지정
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
    
  // ESLint 프로젝트에서 사용하는 규칙을 수정할 수 있음
  "rules": {
    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
    
  // 이건 tsx import 오류로 구글링하다 발견한 거 추가..
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}
  • parserOptions
    - ecmVersion : 사용할 ECMAScript 버전을 설정
    - sourceType : parser의 export 형태를 설정
    - ecmaFeatures : ECMAScript의 언어 확장 기능을 설정
    • jsx : ECMAScript 규격의 JSX 사용 여부

참고

ESLint 조금 더 잘 활용하기
ESLint 설정 살펴보기
ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.
Typescript eslint - Missing file extension "ts" import/extensions

https://triplexlab.tistory.com/40

profile
꾸준히 자유롭게 즐겁게

0개의 댓글