VSCode ESLint Prettier 설정

ESLint : https://eslint.org/

Prettier : https://prettier.io/

 

 

오류를 잡으려면 린터, 스타일을 교정하려면 포맷터

 

ESLint 는 linter 이다.

linter 는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다.

 

Prettier 는 코드 스타일링 도구이다.(포맷터)

설정할 수 있는것을 예로 들명 최대 글자 수에 따른 줄바꿈 등이 있다.

 

 

Prettier 와 ESLint 를 같이 사용

주의할점 : ESLint 에 존재하는 코드 스타일링과 관련된 설정이 Prettier 와 충돌할 수 있다.

방법 :

  1. non-style 룰만 포함된 eslint 를 사용 하는 방법 (eslint-config-react-app)

  2. 실행 순서를 활용, prettier 실행 후 eslint를 실행하는 방법 (prettier-eslint)

  3. eslint의 규칙 중 충돌하는 것들을 전부 꺼주는 방법 (eslint-config-prettier)

 

1번과 2번은 여러 단점이 있어서 3번으로 추천한다고 합니다.

 

 

ESLint의 규칙 중 충돌하는 것들을 전부 꺼주는 방법으로 설정

1. ESLint 설정 

 > 프로젝트 루트 폴더에서 명령어로 시작

npm init --yes
npm init @eslint/config

## How would you like to use ESLint? // 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 modules (import/export) // es6의 import/export를 써요
CommonJS (require/exports) // 근본 require / exports를 써요
None of these // 모듈화는 사치일뿐

## Which framework does your project use? // 어떤 프레임워크를 사용하나요?
React
Vue.js
None of these // 안써요

## Does your project use TypeScript? // 당신의 프로젝트는 typescript를 사용하나요?

## Where does your code run? // 당신의 코드는 어디서 돌리나요?
browser // 중복 선택도 가능
Node

## How would you like to define a style for your project? // 당신은 프로젝트의 코드 스타일을 어떻게 지정할 건가요?
Use a popular style guide // 유명한 곳의 스타일을 가져와요!
Answer questions about your style // 나의 길은 내가 개척한다!

## Which style guide do you want to follow?
Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo

## What format do you want your config file to be in? // 당신의 구성 파일을 어떻게 저장할까요?
JavaScript
YAML
JSON

## 위 부분까지 설정은 끝났다. 사용하는 법
eslint 파일주소.파일확장자 로 eslint를 사용해 볼 수 있다.
그리고 뒤에 --fix를 붙이는 것으로 eslint에 위배되는 사항을 알아서 고쳐준다.

 

2. Prettier 설정

> 프로젝트 루트 폴더에서 명령어로 시작

> 참고로 .prettierrc 파일이 없으면 vscode의 전역 설정으로 적용됨

# 1. 프로젝트 루트 폴더 위치에서 터미널에 아래 명령어를 입력하여 prettier와 eslint-config-prettier 패키지를 설치합니다.
npm i -D prettier eslint-config-prettier 

# 2. 프로젝트 루트 폴더 위치에 .prettierrc 파일 (prettier 설정 파일)을 생성합니다.

# 3. 옵션 설정 https://prettier.io/docs/en/options.html (추가적인 옵션 설정 찾아보기)
{
  // 쌍따옴표 대신 홑따옴표 사용
  "singleQuote": true,
  // 모든 구문 끝에 세미콜론 출력
  "semi": true,
  // 탭 대신 공백으로 들여쓰기
  "useTabs": false,
  // 들여쓰기 공백 수
  "tabWidth": 2,
  // 가능하면 후행 쉼표 사용
  "trailingComma": "all",
  // 줄 바꿈할 길이
  "printWidth": 80,
  // 객체 괄호에 공백 삽입
  "bracketSpacing": true,
  // 항상 화살표 함수의 매개 변수를 괄호로 감쌈
  "arrowParens": "always",
  // OS에 따른 코드라인 끝 처리 방식 사용
  "endOfLine": "auto"
}

# 4. ESLint와의 충돌 방지를 위해 
.eslintrc.json(본인이 설정한 확장자) 파일에서 extends 부분을 아래와 같이 수정합니다. 
이때, eslint-config-prettier가 앞선 설정들을 덮어쓸 수 있도록 prettier를 마지막에 작성해야 합니다.
# ex) extends: ['airbnb-base', 'prettier']

 

3. 여기까지 ESLint + Prettier + 충돌 방지 까지 진행 완

 

4. VSCode 설정하기

> Extensions 탭에서 ESLint와 Prettier 확장 프로그램을 설치

> setting.json 파일에 아래 내용을 작성

> 이제 파일을 저장할 때마다 ESLint 규칙에 따라 자동으로 코드가 수정되고 Prettier 설정에 따라 자동으로 코드가 포매팅 된다.

# 파일을 저장할 때마다 `eslint` 규칙에 따라 자동으로 코드를 수정
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },

# `prettier`를 기본 포맷터로 지정
"editor.defaultFormatter": "esbenp.prettier-vscode",

# 파일을 저장할 때마다 포매팅 실행
"editor.formatOnSave": true,

 

 

기본설정은 끝이지만, 실제로 유용하게 쓰려면 ( 애초에 목적이 프로그램의 도움을 받아서 오류가 적은 코드를 짜기 위함)

 - ESLint 설정파일에 rule을 설정하고 검사하는 방법을 알아야 한다.

 - Airbnb style guide, Google style guide 등에 따라 코드 스타일을 맞출 것이라면 의존성 패키지를 추가로 설치해야하는 단계도 필요하다 (ex 타입스크립트)