eslint --init 으로 쉽게 eslint 세팅하기

이전에 react eslint 관련해서 여러 글을 작성했다 (다 엄청난 삽질이었다…)

terminal

npx eslint --init

• 위 명령으로 한 번에 해결
• 방향키로 선택 선택 넘어가면, 알아서 환경을 세팅해준다

CRA와 eslint –init해서 프로젝트 세팅하는 과정

termial

# CRA로 리액트 프로젝트 시작
yarn create react-app . --template typescript

# eslint --init 으로 eslint 세팅
yarn eslint --init
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · JSON
√ Would you like to install them now with npm? · No

• 입맛대로 답변한다
• 특히 마지막 Would you like to install them now with npm? 물음에는 No로 답변한다
• No로 답변하고 필요한 종속성을 yarn으로 설치해준다
• (Yes로 답변하면, npm으로 설치되며 package-lock.json이 생성된다)

terminal

# 콘솔에 적힌 종속성들을 복사해서 적절히 편집하고 실행한다
# 여러 버전들을 나열해서 알려주는데, 그중에서 최신 버전을 다운받았다
yarn add -D \
    eslint-plugin-react@^7.21.5 \
    @typescript-eslint/eslint-plugin@latest \
    eslint-config-airbnb@latest \
    eslint@^7.2.0 \
    eslint-plugin-import@^2.22.1 \
    eslint-plugin-jsx-a11y@^6.4.1 \
    eslint-plugin-react-hooks@^4 \
    @typescript-eslint/parser@latest

terminal

# eslint와 prettier를 함께 쓰려면 아래도 함께 설치한다
yarn add -D \
    prettier  \
    eslint-plugin-prettier  \
    eslint-config-prettier

참고

• https://eslint.org/docs/user-guide/getting-started
• https://github.com/chinsun9/react-ts-template/tree/v20210827