VScode + Prettier + TypeScript + ESLint (Airbnb)

이번에는 VScode 기준으로 Prettier, TypeScript, ESLint를 설정해 보겠습니다.

스타터 분들은 이 친구들이 생소하게 들릴지도 모릅니다. 간단하게

• VScode - IDE
• Prettier - 자동 코드 정리
• TypeScript - 자바스크립트의 슈퍼셋
• ESLint - 자바스크립트 코딩 가이드

라고 생각하면 됩니다. 이해가 잘 안가더라도, 일단 세팅하고 사용해 보길 추천합니다.

 

VScode에는 간단한 포맷터가 내장되어 있지만, Prettier를 이용하면 더 깔끔하게 코드를 정리하고 협업할 수 있습니다.

설치 방법은 간단합니다.

1. Extensions 탭으로 가서 Prettier - Code formatter 를 설치합니다.
2. .prettierrc 설정 파일을 만듭니다. 공식 문서를 보시면 쉽게 설정 가능합니다.

 

TypeScript는 자바스크립트의 슈퍼셋 언어입니다.

슈퍼셋이란 자바스크립트보다 상위 개념이라는 의미입니다.

타입스크립트를 이용해 개발하고, 컴파일 과정을 통해 자바스크립트 코드로 변환합니다.

왜 이런 귀찮은 짓을 할까요?

개인적으로 느낀 장점 세가지를 뽑자면

1. 변수의 형을 지정할 수 있음으로서 안정적인 코드 작성.
2. 정말 훌륭하게 지원되는 자동완성. ; )
3. 백엔드(NodeJS)와 Type 공유.

물론 단점도 존재합니다.

1. 익숙한 자바스크립트 대신 타입스크립트를 또 배워야 합니다.
2. 기존 코드와의 작별 혹은 단절 혹은 재작성.
3. 타입 작성으로 인해 작성 코드의 증가.

설치법은 간단합니다.

    1. 타입스크립트와 타입스크립트 로더 설치.

npm i typescript ts-loader --save-dev

    2. 웹팩 설정 파일에 로더 추가.

webpack.config.js

module.exports = {
  ...,
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
};

이제 ts를 확장자로 하는 파일에 TypeScript 코드를 작성하면 됩니다.

 

ESLint는 우리가 코딩하는 자바스크립트를 교정해 주는 역할을 담당합니다. (빨간펜 선생님입니다.)

TSLint 라고 해서 TypeScript용 빨간펜 선생님이 따로 있었지만 2020부터는 ESLint로 모두 통합되었습니다.

ESLint를 이용하면 개발자들간의 코딩 스타일도 통일할 수 있습니다.

유명한 Airbnb의 코딩 스타일로 한번 설정해 보겠습니다.

1. Extensions 탭으로 가서 ESLint 를 설치합니다.
2. 터미널을 열고 eslint --init 를 입력합니다.
3. 강력한 빨간펜을 선택합니다. (To check syntax, find problems, and enforce code style)
4. 이후에는 본인의 개발 환경을 선택하면 됩니다. (Module, Framework, Env, Style guide... 등등)

 

여기까지 설정을 마쳤다면, 이제 개발할 일만 남았습니다.

하지만 한가지 더 추가로 해줘야 할 일이 있습니다.

바로 ESLint와 Prettier의 충돌입니다.

가령 Prettier 설정에 스트링 더블따옴표를 사용하도록 설정되어 있다면 ESLint 빨간펜 선생님이 가만 있지 않습니다.

추가 ESLint 플러그인을 설치하고

npm install --dev prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.json 파일에 아래와 같이 플러그인을 추가해 줍니다.

{
...,
	"extends": [
        "plugin:prettier/recommended",
        ...
    ]
}

 

이제 각자의 tsconfig 파일을 만들고 여기에 타입스크립트 설정을 해 나가면 됩니다.

 

이제 정말 끝났습니다. 수고하셨습니다.