티스토리 뷰
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 깃허브
[ESLint / Prettier] 레퍼런스 모아보기
🔮ESLint + Prettier시작하기 // npm환경이 존재하는 cra같은 경우에는 사용할 필요 없음 $ npm init -y // eslint 설치 $ npm install eslint prettier --save-dev // or $ yarn add -D eslint prettier // eslint 시작 설정 $ npx eslint -
synuns.tistory.com
리액트 프로젝트에 ESLint 와 Prettier 끼얹기
ESLint 와 Prettier 를 리액트 프로젝트에서 제대로 적용하여 코드를 깔-끔-하게 관리해보는 방법을 배워봅시다.
velog.io
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 세팅 총종리
react + next.js + typescript 조합에서 협업 시 사용하는 eslint + prettier + stylelint 세팅에 대해 총정리한 글입니다..eslintrc.jsoneslint에서 code convention은 plugins와, extends와
velog.io
[eslint] 절대경로 설정하기
위 코드는 프로젝트에서 절대 경로를 설정했을 때 eslint도 맞춰 설정하는 코드이다.절대 경로를 사용하는 경우 src폴더부터 시작하기 때문에 import 사용 시 에러가 날 수 있어 맞춰주는 것이다.한
velog.io
https://velog.io/@he0_077/React-Typescript-eslint-prettier-%EC%84%A4%EC%A0%95
[React] Typescript + eslint + prettier 설정
😁 Project 할 때마다 eslint, prettier 세팅 시 모호했던 것 들을 한 번 정리해 보려고 한다.Create React App은 타입스크립트를 별도의 설정 없이 사용할 수 있도록 지원한다.다음 명령어를 실행하면 TypeSc
velog.io
JSX not allowed in files with extension ' .js' with eslint-config-airbnb
I've installed eslint-config-airbnb that is supposed to pre configure ESLINT for React: Our default export contains all of our ESLint rules, including ECMAScript 6+ and React. It requires esli...
stackoverflow.com
https://any-ting.tistory.com/95
[React TypeScript] ESLint Prettier 설정 방법 2부 (TypeScript)
- 개요 안녕하세요. 이번 시간에는 React TypeScript 환경에서 ESLint와 Prettier 설정하는 방법에 대해 알아보겠습니다. 지난 시간에는 JavaScript 환경에서 적용하는 방법에 대해 알아봤습니다. 개념 설명
any-ting.tistory.com
'Projects' 카테고리의 다른 글
[Namoldak] Intersection Observer API 를 사용한 무한스크롤 (0) | 2023.02.24 |
---|---|
[Namoldak] TroubleShooting_RefreshToken (0) | 2023.02.13 |
[Modu-house] 미니 프로젝트 트러블 슈팅 (1) | 2022.12.19 |
[Modu-house] React-redux CRUD (0) | 2022.12.19 |
[Project] React_TodoList (2) | 2022.11.30 |