react eslint prettier airbnb style guide 적용하기

terminal
1
2
3
4
5
6
npx create-react-app my-react-app
cd my-react-app

exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/chinsun9/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)

yarn start
  • 누군가 자동으로 세팅하는 스크립트를 제작해두었다
  • 명령어 3개만 입력하면 세팅이 끝난다
  • windows에서는 gitbash에서 해당 명령을 실행하면 된다
  • 추가로 eslint 확장도구가 설치되어 있어야한다
  • 추가로, prettier 확장도구를 통해 자동포맷팅을 사용하는 사람들은
.vscode/settings.json
1
2
3
4
5
6
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false
}
  • "editor.formatOnSave": false ; prettier 확장도구로 인한 포맷팅은 비활성화해주고,
  • "source.fixAll.eslint": true ; eslint에서 포맷팅을 하도록한다

TMI

따라해도 나오는 오류

Replace onPerfEntry with (onPerfEntry)eslint (prettier/prettier)

  • src/reportWebVitals.js 파일에서 1개의 파라미터만 받는 함수에 괄호로 묶어주라는 오류가 나올 것이다
  • 이것만 고쳐주면 잘 동작한다
  • 혹시 빨간줄이 계속남아있거나, 안된다면 vscode를 다시 실행해보자

계속된 세팅 실패

error log
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
        leadingComments: [
{
type: 'Line',
value: ' If you want to start measuring performance in your app, pass a function',
start: 270,
end: 344,
loc: [SourceLocation],
range: [Array]
},
{
type: 'Line',
value: ' to log results (for example: reportWebVitals(console.log))',
start: 345,
end: 406,
loc: [SourceLocation],
range: [Array]
},
{
type: 'Line',
value: ' or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals',
start: 407,
end: 481,
loc: [SourceLocation],
range: [Array]
}
],
}
],
parent: null
}
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-practice@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-practice@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\chin_\AppData\Roaming\npm-cache\_logs\2020-11-17T06_40_37_514Z-debug.log
  • eslint-config-airbnb 만 설치하면 위 오류가 뜨면서 실행조차 안됬다
  • 이유는 모르겠다

eslint-prettier-airbnb-react 포크

.eslintrc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"rules": {
// ...
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"endOfLine": "auto" // <-- 추가
}
]
// ...
}
}
  • "endOfLine": "auto"를 추가해어 해결하였다

.prettierrc 파일 불필요

  • eslint-config-prettier 을 사용해서 prettierrc 파일없이 eslint 설정만으로도 가능하다고한다
  • eslintrc.json에 rule 아래 prettier/prettier이 있는데, 여기에 내가 필요한 포맷팅 설정을 해두면된다

여기까지 리액트 프로젝트

참고

Author

chinsung

Posted on

2020-11-17

Updated on

2021-08-04

Licensed under

댓글