블로그를 이전하였습니다. 2023년 11월부터 https://bluemiv.github.io/에서 블로그를 운영하려고 합니다. 앞으로 해당 블로그의 댓글은 읽지 못할 수 도 있으니 양해바랍니다.
반응형
1. 준비 환경
- VSCode
- prettier plugin 설치
- eslint plugin 설치
2. eslint-config-airbnb 설치
<html />$ yarn add eslint-config-airbnb yarn add v1.22.4 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning " > @testing-library/user-event@12.2.0" has unmet peer dependency "@testing-library/dom@>=7.21.4". ...중략... info All dependencies ├─ eslint-config-airbnb-base@14.2.0 └─ eslint-config-airbnb@18.2.0 ✨ Done in 3.97s.
package.json의 dependency에 eslint-config-airbnb가 추가됐는지 확인
3. Prettier 설정
eslint-plugin-prettier와 eslint-config-prettier를 설치한다. (본 글에서는 yarn 사용)
<html />$ yarn add eslint-plugin-prettier eslint-config-prettier yarn add v1.22.4 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning " > @testing-library/user-event@12.2.0" has unmet peer dependency "@testing-library/dom@>=7.21.4". ...중략... info Direct dependencies ├─ eslint-config-prettier@6.15.0 └─ eslint-plugin-prettier@3.1.4 info All dependencies ├─ eslint-config-prettier@6.15.0 ├─ eslint-plugin-prettier@3.1.4 └─ get-stdin@6.0.0 ✨ Done in 3.96s.
4. .prettierrc.js 작성
<javascript />
module.exports = {
tabWidth: 2, // 들여쓰기는 2칸
useTabs: false, // Tab 대신에 스페이스 사용
semi: true, // 코드 마지막에 세미콜른 추가
singleQuote: true, // 문자열을 싱글 따옴표로 설정
trailingComma: 'all', // 객체, 배열의 원소 뒤에 항상 콤마를 추가함
printWidth: 80, // 코드 한줄의 최대 길이는 80
arrowParens: 'avoid', // Arrow 함수에서 하나의 매개변수를 받을때는 괄호를 생략
};
5. .eslintrc.js 작성
<javascript />
module.exports = {
env: { browser: true, es6: true, node: true },
extends: ['eslint:recommended', 'airbnb', 'plugin:prettier/recommended'],
rules: {
'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
},
};
6. vscode settings.json 파일 수정
아래와 같이 체크 박스 체크
- format on save: 저장 키를 눌렀을때, 자동으로 포맷팅을 해줌
아래와 같이 체크 박스 해제
- 기본 javascript Formatter를 비활성화
7. 예시
아래와 같이 airbnb 형식에 맞지 않게 작성하면 빨간 밑줄 표시가 나옴
8. Reference
www.npmjs.com/package/eslint-plugin-prettier
eslint-plugin-prettier
Runs prettier as an eslint rule
www.npmjs.com
prettier.io/docs/en/configuration.html
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
prettier.io
반응형
'Frontend > React' 카테고리의 다른 글
| Window에서 React 환경 구축하고 eslint 설정하기 (0) | 2021.07.08 |
|---|---|
| React Router Dom 리액트 라우터 사용하기 (0) | 2021.01.17 |
| React Application을 Docker 빌드하고 배포하기 (MacOSX) (0) | 2020.12.22 |
| 리액트 설치 및 처음 시작하기 (0) | 2020.06.15 |
| 리액트 시작 - 왜 리액트인가? (0) | 2020.06.11 |
