WEBSTORM prettier, ESLint 설정

안녕하세요. 현재 코드잇 스프린터 3기로 프론트엔드 개발자에 도전하는 조성경입니다.
기존에 백엔드를 준비하면서 인텔리제이를 사용하다가 프론트엔드 개발자로 도전하게 되면서 vscode를 사용했습니다.

좋은 프로그램이었지만 뭔가 알 수 없는 불편함을 계속 느꼈습니다.
리팩터링할때의 뭔가의 부족함과 아쉬움 뭔가 이렇게 하면 되었던것 같은데라는 느낌이 계속 들어 고민하다 이번주에 React로 넘어오면서 새로운 프로젝트를 시작하면서 WEBSTORM으로 변경

ESLint와 prettier 설정을 해보면서 나중에 해매지 않게 정리해두었습니다.

ESLint 설정

1. ESLint 설치

프로젝트 디렉토리에서 터미널을 열고 ESLint를 설치합니다.

npm install eslint --save-dev

2. ESLint 구성 파일 생성

ESLint 구성 파일을 생성합니다.

npx eslint --init

3. WebStorm 설정

WebStorm에서 다음 경로로 이동합니다: Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint. 'Automatic ESLint Configuration'을 선택하거나 수동으로 구성 파일을 지정합니다.

Prettier 설정

1. Prettier 설치

Prettier를 설치합니다.

npm install --save-dev --save-exact prettier

2. Prettier 구성 파일 생성

프로젝트 루트에 .prettierrc 파일을 생성하고 Prettier 설정을 정의합니다.

{  "singleQuote": true,  
  "semi": true,  
  "useTabs": false,  
  "tabWidth": 2,  
  "trailingComma": "all",  
  "printWidth": 140,  
  "arrowParens": "avoid"  
}

3. WebStorm 설정

다음 경로로 이동합니다: Preferences > Languages & Frameworks > JavaScript > Prettier. 'Prettier package' 경로를 확인하고, 'On code reformat' 및 'On save' 옵션을 활성화합니다.

ESLint와 Prettier 통합

1. eslint-config-prettier 설치

ESLint와 Prettier 간의 충돌을 방지합니다.

npm install --save-dev eslint-config-prettier

2. ESLint 구성 수정

.eslintrc 파일을 열고 extends 배열에 "prettier"를 추가합니다.

extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'],

이 설정을 통해 ESLint와 Prettier가 충돌하지 않고 함께 작동하게 됩니다.