이전 포스팅에 이어서 적용을 해보겠다.
다음과 같은 eslint 실행 명령어로 실행을 해보면
npm eslint .
다음과 같이 굉장히 많은 에러 사항들이 뜨게 된다.
이를 하나하나 제거해가며 진행해 보자.
ESLint에서 설정된 규칙들은 굉장히 엄격한 것들도 있어서.
.eslintrc 파일의 "rule" 부분에 예외들을 추가해나가면서 작성해야 한다.
.eslintrc
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"airbnb-typescript",
"airbnb"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"@typescript-eslint/rule-name": "error",
"linebreak-style": 0
},
"env": {
"browser": true,
}
}
위의 에러 중 "Expected linebreaks to be 'LF' but found 'CRLF' " 는 "rules"에 "linebreak-style"을 추가하게 되면 에러가 사라진다.
해당 오류의 내용은 Window 운영체제를 사용할 때의 줄 바꿈은 일반적으로 캐리지 리턴(CR) 다음에 (LF) 줄 바꿈을 사용하여 (CRLF)를 만드는 반면에 Linux와 Unix는 단순 줄 바꿈을 사용한다. "\n"(LF용) "\r\n" (CRLF용)
"linebreak-style" 옵션을 명시하지 않으면 자동으로 개행을 체크할 때 ["error" , "unix"]가 사용되기 때문에 윈도에서 사용하면 에러를 발생시킨다.
1. ESLint 확장 프로그램 실행하기
vsCode 확장 프로그램 설치에서 ESLint를 설치하면 코드에 빨간 줄이 쳐져서 어떤 오류인지 알려주게 된다.
2. EsLint 오류 제거하기
.eslintrc 파일의 "rules"에 다음과 같이 설정을 추가해준다.
//..
"rules": {
"@typescript-eslint/rule-name": "error",
"linebreak-style": 0,
"react/jsx-filename-extension": [
"warn",
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
],
},
"react/jsx-filename-extension" 은 react 관련 파일의 확장자를 명시해주는 설정이다.. js,. jsx,. ts,. tsx를 허용해주는 설정이다.
앞에 "warn" , 이라고 들어가 있는 설정은 다음과 같이 있다.
- "off" : 규칙을 끔
- "warn" : 경고를 표시
- "error" : 에러를 띄움(실행불가)
숫자인 0,. 1, 2로도 표현이 가능하지만 가독성이 좋지 않아 문자로 썼다.
오류의 개수가 좀 줄었다.
2. 일단 prettier 설치 하기
prettier를 설치하는 방법에는 두 가지가 존재한다.
1. vsCode 확장 프로그램으로 다운로드하기
2. prettier 패키지 및 플러그인 설치 후. eslintrc에 세팅하기
확장 프로그램 설치 방법은 내 PC에 환경에서만 가능하니 나는 2번 방법을 통해 다운로드하겠다.
prettier 및 eslint-config-prettier를 다운로드한다. eslint-config-prettier는 eslint와 prettier 간의 충돌할 수 있는 규칙을 끄게 된다.
npm install -D prettier
npm install eslint-plugin-prettier@latest --save-dev
. prettierrc
파일을 만들고 기본적인 설정을 해주었다.
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}이 코드가 일반적이고 아래 사이트에서 추가적인 규칙들을 사용할 수 있다.
https://prettier.io/docs/en/options.html
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
prettier.io
. elintrc를 다음과 같이 변경해 준다.
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"airbnb-typescript",
"airbnb",
"plugin:prettier/recommended"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"@typescript-eslint/rule-name": "error",
"linebreak-style": 0,
"object-curly-newline": 0,
"react/jsx-filename-extension": [
"warn",
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
],
"prettier/prettier": ["error", { "endOfLine": "auto" }]
},
"env": {
"browser": true,
}
}prettier 관련 설정들을 추가해주고, "prettier/prettier" : ["error" , { "endOfLine" : "auto" }] 옵션은 error Delete `␍` 과 같은 오류 때문에 추가해주었다. "object-curly-newline" : 0 은 import를 3개 이상 할 시 줄 바꿈 해야 하는 규칙을 무시한다.
prettier를 설정하였지만 아직 27개의 오류가 남아있다..
3. 남은 오류 계속해서 제거하기
"Definition for rule '@typescript-eslint/rule-name" : "error"의 오류가 굉장히 많이 보였는데. eslintrc에 해당 코드가 읽히지 않아서 발생하는 문제였다 해당 코드를 주석으로 변경하였더니 해당 내용들이 사라졌다.
. eslintrc
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"airbnb-typescript",
"airbnb",
"plugin:prettier/recommended"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
// "@typescript-eslint/rule-name": "error",
"linebreak-style": 0,
"object-curly-newline": 0,
"react/jsx-filename-extension": [
"warn",
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
],
"prettier/prettier": ["error", { "endOfLine": "auto" }]
},
"env": {
"browser": true,
}
}
Missing file extension "ts", "tsx" for [file]과 같은 항목들이 많이 보였는데 다음과 같이 . eslintrc 파일의 rule에 추가해주었다.
.eslintrc
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
추가해 주었더니 오류가 현저히 줄게 되었다.
"'deleteTodo' is defined but never used" 에러는 deleteTodo를 사용하지 않는데 선언해주어서 에러가 나는 거여서
사용하지 않고 불러오기만 하는 코드를 지워주었고
App.test.tsx에서 난 오류는. eslintrc에 "env"부분에 jest를 추가해주었다.
"env": {
"browser": true,
"jest": true
}
모든 에러를 제거하니 정상적으로 잘 구동되는 것을 확인할 수 있다.
다음과 같은 명령으로도 실행 할 수 있다.
npx eslint . --ext js,jsx,ts,tsx
전체적인 .eslintrc 설정 파일
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"airbnb-typescript",
"airbnb",
"plugin:prettier/recommended"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
// "@typescript-eslint/rule-name": "error",
"linebreak-style": 0,
"object-curly-newline": 0,
"react/jsx-filename-extension": [
"warn",
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
],
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
},
"env": {
"browser": true,
"jest": true
}
}
eslint --init으로 설정하는 방법도 있는데 나중에 다시 정리해보며 설정을 해보아야겠다.
커스텀 설정으로 일단 해보자 하며 시작하였는데, 설정이 너무나도 방대하고 타입 스크립트 환경이다 보니 설정의 어려움이 많이 존재하였다. 또한 어떤 룰들을 제거해야 하는지에 대해서도 공부를 많이 해야겠다.
시행착오를 쓴 글이라 너무 이랬다 저랬다 삽질한것을 기록한 터라 가독성이 매우 안좋다
나중에 다시 깔끔하게 정리해야겠다.
'개발 공부 시리즈 > Redux-ToolKit' 카테고리의 다른 글
| [RTK] RTK-Query 공식문서보며 직접 사용해보기 (0) | 2022.11.07 |
|---|---|
| [RTK] Typescript todoList 만들기 (6) - webpack 적용해보기 (0) | 2022.11.02 |
| [RTK] Typescript todoList 만들기 (5) - eslint, prettier 적용해보기- 1 (0) | 2022.11.01 |
| [RTK] Typescript todoList 만들기 - (4) 컴포넌트 분리하기 (0) | 2022.10.28 |
| [RTK] Typescript todoList 만들기 - (3) 삭제 기능 만들기 (2) | 2022.10.27 |
댓글