-
[React Native] eslint 와 prettier 설정 (+타입스크립트)2/React Native 2023. 9. 13. 15:27
처음으로 자바스크립트를 사용하게 되면서 eslint 라는 것을 접하게 되었는데, 아직도 완벽하게 이해는 못하고 있지만 아는 만큼 정리를 해보고자 한다.
eslint 란?
코드에 문제가 있는지 알려주는 플러그인이라고 생각하면 되는 것 같은데, eslint 에 의해 나타나는 경고나 에러는 반드시 컴파일 시에 나타나는 에러와 관련이 있지는 않다.
eslint 라는 것은 그래서 프로젝트 내에서 지키고자 하는 규칙과 관련이 있다고 볼 수도 있다고 생각한다.
예를 들자면 리액트에서 함수를 function 으로 선언하도록 eslint 로 정함으로써 const 로 함수 선언 시 에러가 발생하여 규칙을 지키도록 할 수 있다.
prettier 란?
코드 포매터 (code formatter) 라고 일컫는 것 같은데, 말 그대로 들여쓰기는 어떤 방식으로 할지, 몇 칸으로 할지와 같은 포맷과 관련되어 규칙을 지키도록 하는 플러그인이다.
처음에는 왜 필요한지 몰랐으나, 왜 자바에는 이런게 없지? 싶을 정도로 편하다.
eslint 와 prettier 의 차이점
어떻게 보면 정말 닮은 두 플러그인이지만 차이점은 명확하다.
prettier 는 단순히 코드의 포맷에만 관여하지만
eslint 는 포맷뿐만 아니라 언어나 라이브러리의 문법에도 관여한다는 점이다.
eslint 도 포맷에 관여한다는 부분에서 prettier 와 eslint 는 겹치는 부분이 존재하게 되는데,
이 부분은 eslint 플러그인 중에서 코드 포맷팅 기능을 무시하는 플러그인이 있어서 설치하면 문제없이 사용가능하다.
근데 여기서 의문인 점은 이전에 vue 로 작업 시에는 prettier 는 사용하지 않고 eslint 만으로 설정해서 코드 포맷팅까지 설정했는데,
리액트는 왜 대부분의 블로그에서 eslint 와 prettier 를 같이 사용하도록 설명하고 있는지는 잘 모르겠다.
vue 는 <template> 태그를 이용함으로써 자바스크립트 문법과 달라서 그런 것인지, 확장자가 vue 라서 그런 것인지...
나중에 알아봐야겠다.
eslint 와 prettier 설정
여러 방법들이 있었지만, 나는 airbnb 에서 만든 eslint 설정을 사용하고자 한다.
플러그인 목록
1. eslint
- 말그대로 eslint 플러그인이다. 리액트 네이티브 프로젝트 만들 때 처음부터 설치되어 있지만 그냥 최신버전으로 설치한다.
2. @typescript-eslint/parser
- 타입스크립트에서 eslint 를 사용하도록 변환해 주는 parser 라고 한다. 필수.
3. @typescript-eslint/eslint-plugin
- 타입스크립트 사용 시 적용되는 rule 들이 포함되어 있는 플러그인이다. rule 은 아래에서 설명하겠다.
4. eslint-config-airbnb
- airbnb 에서 사용하는 eslint rule 이 설정되어 있는 플러그인이다.
- 설치 시 peerdependency 가 함께 설치되도록 한다. 포함된 플러그인으로는 이와 같은 것이 있다.
- eslint
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-react
- eslint-plugin-react-hooks
5. eslint-config-airbnb-typescript
- airbnb eslint 를 타입스크립트에서 사용하고자 할 때 필요한 플러그인이다.
6. prettier
- prettier 또한 처음에 설치되어 있지만 최신버전으로 다시 설치해 준다.
7. eslint-plugin-prettier
- prettier 에서 정한 rule 에 어긋난 것을 eslint 에러로서 나타나도록 해주는 플러그인이다.
8. eslint-config-prettier
- eslint 의 formatting rule 을 모두 꺼서 prettier 와의 충돌을 방지한다.
모두 개발 의존성으로 설치하고 prettier 는 --exact 명령어 없이 설치 시 beta 버전이 설치되는 경우가 있어서 반드시 붙여준다.
처음에 저걸 몰라서 한참 헤맸던 기억이...
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin npx install-peerdeps -D eslint-config-airbnb yarn add -D eslint-config-airbnb-typescript yarn add -D prettier --exact yarn add -D eslint-config-prettier eslint-plugin-prettier
설치만 해준다고 끝이 아니고 이제 설정을 해주어야 한다.
리액트 네이티브 프로젝트를 생성했다면 처음부터 .eslintrc.js 와 .prettierrc.js 파일이 존재할 텐데 없다면 만들어주면 된다.
나는 js 파일로 사용하면 eslint 에 걸리거나 하는 등 귀찮은 일들이 생겨서 그냥 json 으로 바꿔서 사용한다.
.eslintrc.js 와 .eslintrc.json 파일이 같이 존재한다면 js 파일이 우선순위가 높은 것으로 알고 있다.
.eslintrc.json
{ "parser": "@typescript-eslint/parser", "parserOptions": { "project": "./tsconfig.json" }, "env": { "node": true }, "extends": [ "plugin:@typescript-eslint/recommended", "airbnb", "airbnb/hooks", "airbnb-typescript", "plugin:prettier/recommended", "prettier/@typescript-eslint" ], "rules": { } }
eslintrc 파일 설정 때문에 블로그를 30개는 본 것 같은데 별별 설정들이 많이 있다.
하지만, 이 정도 설정으로도 문제없이 잘 사용하고 있다.
물론 rules 은 그때그때 불편하면 추가하면서 사용하고 있다.
여기서 extends 와 rule 의 차이와, 다른 글들을 참고하면 plugins 라는 항목에 이것저것 들어있는데 여기는 없음이 궁금할 수 있다.
1. plugins
- rules 의 목록을 정의해 놓은 것이라고 생각하면 된다.
2. extends
- rules 들에 대해서 규칙을 정의해 놓은 것을 상속? 받아서 이용한다고 생각하면 된다.
3. rules
- plugins 에 들어있는 규칙들에 대해서 무시할 건지, 경고를 나타낼 건지, 에러를 나타낼건지 혹은 더 세부적인 설정을 할 것인지를 작성하는 곳이다.
내 설정대로면 plugins 가 없는데 어떻게 rules 를 정의할 수가 있냐고 생각할 수 있는데, extends 를 넣게 되면 해당하는 extend 마다 사용하는 plugin 이 자동으로 입력이 되고, 해당하는 rules 가 정의가 된다고 생각하면 된다.
또한 extends 보다 rules 가 우선순위가 높기 때문에 사용하다가 불편한 rule 은 rules 에 정의함으로써 규칙을 덮어쓸 수 있다.
rules 예시
나와 같이 설정한다면 기본적으로 컴포넌트 선언 시 function 이 아닌 arrow function 이면 에러가 발생하도록 되어있다.
나는 arrow function 을 사용할 것이기 때문에 아래와 같이 rule 을 override 하였다.
"rules": { "react/function-component-definition": [ "error", { "namedComponents": "arrow-function" } ], }
사용하면서 불편한 규칙은 에러를 잘 보면 뒤에 규칙명이 나와있는데 해당 규칙을 검색해서 다른 사람들은 어떻게 설정했나 참고하면 된다.
.prettierrc.json
{ "arrowParens": "avoid", "singleQuote": true, "printWidth": 100, // default value "bracketSameLine": false, "semi": true, "bracketSpacing": true, "tabWidth": 2, "trailingComma": "all", "useTabs": false, "endOfLine": "lf" }
https://prettier.io/docs/en/options
주로 사용할 것 같은 설정만 작성해 놓았다. 모든 설정을 보고 싶으면 위에 들어가면 잘 설명되어 있다.
prettier 옵션 설명
더보기- arrowParens
- 화살표 함수 사용 시 파라미터가 하나인 경우 괄호 생략이 가능한지 설정
- 기본값 - always (생략 불가) / avoid (생략 가능)
- singleQuote
- 홑 따옴표 사용 여부
- 기본값 - false (쌍 따옴표 사용) / true (홑 따옴표 사용)
- printWidth
- 해당 넓이를 넘어가면 줄 바꿈 실행
- 기본값 - 80
- bracketSameLine
- 태그 속성 값이 길어져서 줄바꿈이 일어났을 때 닫는 괄호를 개행 후 작성되도록 설정
- semi
- 마지막에 무조건 세미콜론 작성
- bracketSpacing
- 중괄호 및 소괄호 맨 앞과 맨 뒤에 공백이 생기도록 설정
- tabWidth
- 탭 간격 설정
- useTabs
- 탭 간격을 스페이스 바에 의한 간격이 아닌 탭 간격으로 사용
- trailingComma
- 객체에서 마지막 항목 뒤에도 comma 가 항상 있도록 설정
- endOfLIne
- 기본 설정이 windows 는 crlf 이고 다른 os 는 lf 여서 통일시켜주기 위해 있는 설정으로 알고 있다.
package.json
{ ... "scripts": { ... "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'", "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'", ... } ... }
src 폴더 내부의 파일만 검사하도록 lint 명령어 설정
인텔리제이에서 저장 시 자동 적용되도록 하기
eslint 는 저장 시 실행되지 않도록 하고 사용해도 되지만 나는 이게 편해서 사용하고 있다.
경로를 src 내부로 지정하여 사용하면 더 좋을 것 같다.
prettier 는 안 사용하면 일일이 fix를 해줘야 하는 번거로움이 강하고 사용했을 때 편리함과 쾌감이 정말 좋기 때문에 꼭 사용해야 한다.
'2 > React Native' 카테고리의 다른 글
[React Native] React Navigation 설치 및 사용법 (cli, typescript) (0) 2023.09.27 [React Native] styled-components 설치 (cli, typescript) (0) 2023.09.27 [React Native] 조건부 스타일 (StyleSheet, 상속, 배열) (0) 2023.09.13