React.js Project 개발 환경 설정하기 3편 : ESLint & Prettier 설정으로 Linting on Save 설정하기

ksage91·2020년 7월 20일

ESLint LintingOnSave Prettier React node.js react.js

React.js Project 개발 환경 설정하기

목록 보기

3/3

❗️이 시리즈는 React.js로 이미 작성된 프로젝트의 업무 인수인계 및 개인 기록용으로 작성되었습니다.
React.js 프로젝트를 새로 만드는 과정은 담겨있지 않습니다.
혹시 잘못된 내용이 있다면 언제든지 댓글 부탁드립니다! 😁

JavaScript 개발 환경에는 Coding Conventions를 강제하는 표준화 된 Linter가 존재합니다.
바로 ESLint입니다. 그리고 TypeScript를 위한 TSLint도 존재했었으나
작년 하반기에 Deprecated가 결정되어 ESLint에 그 기능이 흡수되었습니다.
그리고 Prettier를 사용하면 설정된 Coding Conventions에 의해 자동 정렬도 가능합니다.

IDE에 Linting 환경 구성하기

IntelliJ IDEA Plugins 설치

현재 작성된 프로젝트에 이미 ESLint와 Prettier 설정은 반영되어 있는 상태입니다.
ESLint 설정은 프로젝트 루트 디렉토리의 .eslintrc.js에 반영되어있고
Prettier 설정은 같은 위치의 .prettierrc 파일에 반영되어 있습니다.
플러그 인을 설치하여 로컬 개발환경에 적용해보겠습니다.

Plugins -> Marketpalce에서 ESLint, Prettier를 각각 검색하여 설치해줍니다.

❗️IntelliJ 버전에 따라 플러그인 형태가 아닌 기본 제공일 수 있습니다.
Marketpalce에서 검색 되지 않을 경우 바로 다음 ESLint 설정으로 넘어가시면 됩니다.

ESLint Plugin
Prettier Plugin

플러그인 설치가 완료되었으면 기능 설정을 하겠습니다.

ESLint 설정

IntelliJ IDEA -> Preferences... -> Languages & Framworks -> JavaScript -> Code Quality Tools -> ESLint

ESLint Automatic

기본적으로 Automatic ESLint configuration으로 잡혀있으며 보통 문제가 없습니다.
Run eslint --fix on save도 체크해주세요.

만약 이 상태로 정상 작동 하지 않는다면 수동으로 프로젝트 내부의 설정을 따르도록 변경해줍니다.

ESLint Manual

Manual ESLint contiguration 체크
Node Interpreter : 프로젝트에 사용 중인 버전의 node를 선택
ESLint package : 프로젝트에 의존성으로 사용 중인 프로젝트 루트 디렉토리/node_modules/eslint 모듈 디렉토리를 선택
Configuration File : 보통은 Automatic search를 체크.
만약 정상 작동 안할 경우 Configuration File에서 프로젝트 루트 디렉토리/.eslint.js 선택
Run eslint --fix on save 체크

Prettier 설정

IntelliJ IDEA -> Preferences... -> Languages & Framworks -> JavaScript -> Prettier

Prettier Setting

Node Interpreter : 프로젝트에 사용 중인 버전의 node를 선택
Prettier package : 프로젝트 루트 디렉토리/node_modules/prettier 모듈 디렉토리를 선택
Run on save for files 체크, {**/*,*}.{js,ts,jsx,tsx}를 입력
- 모든 경로의 JavaScript, TypeScript, 각각의 확장 파일까지 포함합니다.