ESLint 설정
이미 react project가 구성이 되어있다는 전제하에 다음 실행
1
2
3
4
5
| # 이전 방식
npx eslint --init
# 최근 방식
npm init @eslint/config
|
How would you like to use ESLint?
eslint를 어떻게 사용할건지(문법체크와 에러확인 용도로만 사용. 코드스타일까지 체크하면 능숙한 사람이라면 모르겠지만 여러 개발자들과 협업시에는 오히려 코드스타일 에러 찾느라 시간이 더 걸린다. 그리고 코드스타일까지 체크할 경우 마지막에 의존성이 몇개가 더 추가된다.)
1
2
3
4
| ? How would you like to use ESLint? ...
To check syntax only # 문법체크만
> To check syntax and find problems # 문법체크와 에러 확인
To check syntax, find problems, and enforce code style # 문법체크, 에러확인, 코드 스타일로 체크
|
What type of modules does your project use?
Javascript모듈을 어떤 타입으로 쓸건지(import/export)
1
2
3
4
| ? What type of modules does your project use? ...
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
|
Which framework does your project use?
어떤 프레임워크로 쓸건지(React)
1
2
3
4
| ? Which framework does your project use? ...
> React
Vue.js
None of these
|
Does your project use TypeScript?
타입스크립트를 쓸건지(난…No)
1
| Does your project use TypeScript? » No / Yes
|
Where does your code run?
어떤 환경에서 실행될건지(Brower, Node 둘다 체크, Node를 선택하지 않으면 .eslintrc.js에서 module.exports 부분에서 에러로 표시됩니다.)
1
2
3
| Where does your code run?
√ Browser
√ Node
|
eslint설정파일을 어떤 포멧으로 저장할지(JavaScript)
1
2
3
4
| ? What format do you want your config file to be in? ...
> JavaScript
YAML
JSON
|
The config that you’ve selected requires the following dependencies:
설정한 구성으로 다음의 의존성의 요구됩니다. 설치할까요?(Yes)
1
2
3
4
| The config that you've selected requires the following dependencies:
eslint-plugin-react@latest
? Would you like to install them now? » No / Yes
|
Which package manager do you want to use?
패키지 매니저로 어떤걸 사용할건지(yarn)
1
2
3
4
| ? Which package manager do you want to use? ...
npm
> yarn
pnpm
|
생성된 .eslintrc.js파일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: ["eslint:recommended", "plugin:react/recommended"],
overrides: [],
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["react"],
rules: {},
};
|
