[Namoldak] EsLint & Prettier 설정

eslint 설치

yarn add -D eslint-plug

eslint 시작 설정

yarn eslint --init

 

airbnb 코드 스타일 적용을 위한 패키지 설치

npx install-peerdeps --dev eslint-config-airbnb

 

prettier eslint extenstions 설치 필요

 

vs code 설정에서 format JavaScript 검색하고

JavaScript > Format:Enable 체크 비활성화

 

Format On Save 를 검색해서 체크를 활성화

 

ESLint 를 검색해서 Auto Fix On Save 체크를 활성화

 

.prettierrc 파일 만들고 아래의 내용 복사하여 붙여넣기

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

• 문자열을 사용 할 때에는 ' 를 사용합니다.
• 코드는 ; 로 끝나야합니다.
• 탭 대신에 스페이스를 사용합니다.
• 들여쓰기 크기는 2칸입니다.
• 객체나 배열을 작성 할 때, 원소 혹은 key-value 의 맨 뒤에있는 것에도 쉼표를 붙입니다.
• 한 줄이 80칸이 넘지 않도록 합니다

eslint-config-prettier은 prettier 에서 관리 해 줄 수 있는 코드 스타일의 ESLint 규칙을 비활성화 시켜줍니다. 이것을 사용하게 된다면 ESLint 는 자바스크립트 문법 관련된 것들만 관리하게 되고, 코드스타일 관련 작업은 prettier 가 담당하게 됩니다.

 

eslint-config-prettier 설치

yarn add eslint-config-prettier

위의 순서대로 진행한 뒤 추가로 설치해야 하며 dev로 설치해야 함!

yarn add eslint-config-airbnb --dev

yarn add eslint-config-prettier --dev

npm install eslint-plugin-import --save-dev

yarn add eslint-plugin-jsx-a11y --dev

yarn add eslint-plugin-prettier --dev

yarn add eslint-plugin-react-hooks --dev

위와 같이 패키지를 설치한 경우, .package.json 의 devDependencies 아래와 같은 형태

"devDependencies": {
	"eslint": "^8.31.0",
	"eslint-config-airbnb": "^19.0.4",
	"eslint-config-prettier": "^8.5.0",
	"eslint-plugin-import": "^2.26.0",
	"eslint-plugin-jsx-a11y": "^6.6.1",
	"eslint-plugin-prettier": "^4.2.1",
	"eslint-plugin-react": "latest",
	"eslint-plugin-react-hooks": "^4.6.0",
	"prettier": "^2.8.1"
}

패키지 설명

• eslint: ESLint 코어
• prettier : 코드의 스타일을 잡아주는 포맷팅 기능
• eslint-plugin-react: React 관련 린트 설정을 지원
• eslint-plugin-react-hooks: React Hooks의 규칙을 강제해주는 플러그인
• eslint-plugin-import: ES2015+의 import/export 구문을 지원
• eslint-plugin-jsx-a11y: JSX 내의 접근성 문제에 대해 즉각적인 AST린팅 피드백을 제공
• eslint-config-prettier: prettier와 eslint의 충돌을 일으키는 ESLint 규칙들을 비활성화시켜주는 config
• eslint-plugin-prettier: prettier에서 인식하는 오류를 ESLint가 출력
• eslint-config-airbnb: airbnb사의 코딩규칙을 사용

*참고

- yarn 공식문서, eslint 깃허브

 

https://synuns.tistory.com/48

[ESLint / Prettier] 레퍼런스 모아보기

 

https://velog.io/@velopert/eslint-and-prettier-in-react#eslint-%EC%84%A4%EC%A0%95%EC%9D%98-env-%EC%97%90-browser-%EC%B6%94%EA%B0%80

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

https://velog.io/@gytks4/eslint-prettier-stylelint-%EC%84%B8%ED%8C%85-%EC%B4%9D%EC%A2%85%EB%A6%AC

eslint-prettier-stylelint 세팅 총종리

https://velog.io/@moon-yerim/eslint-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

[eslint] 절대경로 설정하기

https://velog.io/@he0_077/React-Typescript-eslint-prettier-%EC%84%A4%EC%A0%95

[React] Typescript + eslint + prettier 설정

https://stackoverflow.com/questions/43031126/jsx-not-allowed-in-files-with-extension-js-with-eslint-config-airbnb

JSX not allowed in files with extension ' .js' with eslint-config-airbnb

https://any-ting.tistory.com/95

[React TypeScript] ESLint Prettier 설정 방법 2부 (TypeScript)