create-react-app & Typescript 에 eslint, prettier 세팅을 하면서 계속 에러->구글링->수정 3일차.. 지금 나는 프로젝트를 만드는 것이 더 중요한 상태라 제대로는 아니어도 조금은 파악하고 넘어가야겠다고 느꼈다ㅜㅜ
코드 컨벤션을 잡아주는 아이들로 eslint는 코드 퀄리티를, prettier은 코드 스타일을 깔끔하게 보장함
# 설치
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"]
}
}
}
}
ecmVersion
: 사용할 ECMAScript 버전을 설정sourceType
: parser의 export 형태를 설정ecmaFeatures
: ECMAScript의 언어 확장 기능을 설정jsx
: ECMAScript 규격의 JSX 사용 여부ESLint 조금 더 잘 활용하기
ESLint 설정 살펴보기
ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.
Typescript eslint - Missing file extension "ts" import/extensions