기본 환경
yarn에서 cra template를 이용해 만든 프로젝트에 eslint 및 prettier를 설정해보려고 한다.
1) Prettier란?
MIT license를 가진 code formatter 모듈입니다. Code format이란 줄 바꿈, 줄간격, 괄호의 위치 등 여러 가지 Style을 의미하며, Prettier는 이런 code style을 자동적으로 정리해 줍니다.
**2) ESLint란?**
ESLint란? ECMAScript Lint의 줄임말로, javascript의 표준을 다루는 협회가 바로 ECMA입니다. Lint는 유닉스 시절에 정적코드 분석 프로그램인 'Linter"에서 따온 이름입니다. 간단히 말하자면, **"Javscript 정적 분석 도구"**가 되겠군요. 이 도구도 MIT license입니다.
Pretter, eslint 설치
yarn을 통해서 설치를 진행한다. eslint와 prettier의 경우 운영 환경에서는 필요하지 않기 때문에
--dev
를 통해서 devDependencies에만 추가할 수 있도록 한다.yarn add prettier --dev yarn add eslint --dev //eslint, prettier 충돌 방지용 yarn add eslint-prettier --dev //react 용 yarn add eslint-plugin-react --dev yarn add eslint-plugin-react-hooks --dev
.prettierrc 작성하기
prettier를 프로젝트에 add 하고 나면 .prettierrc 파일이 생성되고 이는 프리티어를 통해서 어떤 설정을 추가할 것인지 작성하는 파일이다. 다음의 웹사이트에서 이를 위한 테스트를 진행할 수 있음!
우리 프로젝트에서 작성한 파일은 다음과 같다.
{ "arrowParens": "always", "bracketSameLine": false, "bracketSpacing": true, "semi": true, "experimentalTernaries": false, "singleQuote": false, "jsxSingleQuote": false, "quoteProps": "as-needed", "trailingComma": "all", "singleAttributePerLine": false, "htmlWhitespaceSensitivity": "css", "vueIndentScriptAndStyle": false, "proseWrap": "preserve", "insertPragma": false, "printWidth": 80, "requirePragma": false, "tabWidth": 2, "useTabs": false, "embeddedLanguageFormatting": "auto" }
.eslintrc.js 작성하기
yarn eslint --init
위 명령어를 통해서 빠른 eslint 설정을 시작할 수 있다.
위와 같이 모든 질문에 대한 답을 하고 나면 .eslintrc.js 파일이 생성된다.
우리 프로젝트에서는 airbnb eslint를 추가로 적용하려고 하기 때문에 eslint에 추가적인 설정이 필요하다. → 결론적으로 airbnb 사용하지 않기로 함.. prettier와의 충돌도 너무 심하고 eslint에서 deprecated 된 규칙이 너무 많았다.
만약 airbnb eslint를 처음부터 추가하고 싶다면 다음 명령어를 통해 dependencies를 추가!
yarn add -dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks yarn add -dev eslint-config-airbnb yarn add -dev eslint-config-airbnb-typescript
airbnb를 제외하고 최종적으로 완성된 .eslintrc.js파일은 다음과 같다.
module.exports = { root: true, env: { browser: true, es2021: true, }, extends: [ 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', ], overrides: [ { env: { node: true, }, files: ['.eslintrc.{js,cjs}'], parserOptions: { sourceType: 'script', }, }, ], parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, plugins: ['@typescript-eslint', 'react'], rules: {}, };
vscode 설정
eslint는 경고, 에러를 통해 프로젝트를 관리한다면 prettier는 자동으로 프로젝트를 예쁘게 만들어줄 수 있다. 하지만 vscode에서 프로젝트에만 prettier를 설정하면 아무 효과가 없고 vscode 설정을 좀 곁들여줘야 자동으로 예쁘게 바뀌는 프로젝트를 경험할 수 있다.
extension > prettier - code formatter 설치
Setting > default formatter > 방금 다운받은 prettier 설치
복사 붙여넣기, 저장 시 formatting 하기 설정
이제 저장하거나 붙여넣기 하면 prettier가 열심히 일하면서 파일을 예쁘게 만들어줄거시야
Trouble Shooting
일단 프로젝트 중간에 eslint를 적용하고 나면 시작되는 수많은 오류 파일을 만날 수 있는데 eslint 규칙에 맞춰서 해당 오류들을 수정해야한다. 하지만 오류를 수정하다보면 eslintrc.js 파일에서 다음과 같은 에러를 만날 수 있다. 이 오류가 트러블 슈팅에 끝까지 함께하고 있음…
사실 이 외에도 정말 많은 에러들이 있는데 module에서 tsconfig.js를 찾을 수 없다는 에러라던가, 갑자기 모든
import React from 'react'
에서 에러가 뿜어진다던가, 모든 파일에서 tsconfig.js 를 찾을 수 없다던가 하는 다양한 문제들이 발생한다. 하지만 이 모든 오류 내용은 eslint 초기설정을 다시 하면서 airbnb를 빼서 거의 대부분이 해결됐는데(이걸 뺀 이유도 있음), 그 과정에서parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 'latest', sourceType: 'module', project: './frontend/tsconfig.js', },
parser에 다음과 같이 parserOptions 에 project 옵션을 넣어서 에러를 해결할 수도 있었는데
하지만 여전히.. typescript-eslint/parser를 로딩하는데 실패했다는 에러가 계속계속계속 나온다.
괜찮아 보이는 듯 해도 코드를 수정하면 또 나오고 또 나오고 설정을 바꾸면 또 다른 에러가 발생하고..
그래서 파일을 다시 한 번 확인했는데 parser 옵션이 중복으로 들어가 있다는 사실을 발견하고 없앴더니 해결됨..(이렇게 하면 된다고 해서 둘 다 써둔건데…)
'React' 카테고리의 다른 글
[React] 상태관리 라이브러리 비교하기 Redux vs Recoil vs Zustand (0) | 2024.01.06 |
---|