[ESLint, Prettier] ESLint와 Prettier에 대해 알아보자!

프로젝트 4개를 하면서 ESLint와 Prettier는 항상 학원에서 하라는 대로만 사용해왔다.

별 생각 없이 사용하던 나날이 계속되고 면접을 준비하면서도 이에 대한 내용은 미처 생각하지 못했다.

 

그래서 반성을 담아 작성하는

ESLint와 Prettier에 대해 알아보기!!!!!

 

 

 

 

---

🌊 ESLint

코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구 -> 코드 퀄리티를 보장하도록 도와준다!

 

ESLint를 사용하면 프로젝트에서 코드를 작성하는 방식을 일관성이 있는 방식으로 구현할 수 있도록 도와준다.

ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드를 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수 있다.

 

 

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["react", "@typescript-eslint"],
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:prettier/recommended",
      "plugin:@typescript-eslint/recommended"
    ],
    "env": {
      "browser": true,
      "node": true
  },
    "rules": {
      "no-console": "off",
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "prettier/prettier": ["error", { "endOfLine": "auto" }],
      "react/jsx-filename-extension":["warn",{"extensions":[".tsx"]}]
    },
    "settings": {
      "react": {
        "version": "detect"
      }
    }
  }

포트폴리오 프로젝트에서 사용된 ESLint이다.

 

어떤 옵션들을 사용했는지 알아보자!

 

1. env

사전 정의된 전역 변수에 대한 사용 정의

ESLint는 기본적으로 미리 선언하지 않고 접근하는 변수에 대해서는 오류를 내기 때문에 각 실행 환경에서 기본적으로 제공되는 전역 객체에 대한 설정을 통해 알려줘야 한다.

"env": {
  "browser": true,
  "node": true
},

• browser: 브라우저 전역 변수
• node: Node.js 전역 변수 및 Node.js 범위 지정

browser, node 설정을 하지 않을 경우 console, require같은 사전 정의된 전역변수 환경에 있는 static메소드를 인식하지 못해 에러가 발생한다.

 

 

2. parser

ESLint 사용을 위해 지원하려는 JavaScript 언어 옵션을 지정

ESLint 파서는 코드를 추상 구문 트리로 변환하여 ESLint가 평가할 수 있게 한다.

구문 분석을 위해 보통 Espree 파서를 사용하는데 자주 사용되는 파서로는 Babel과 함께 사용되는 babel-eslint, TypeScript 구문 분석을 위해 사용되는 @typescript-eslint/parser가 있다.

 "parser": "@typescript-eslint/parser",

포트폴리오 프로젝트는 타입스크립트를 사용했기 때문에 @typescript-eslint/parser를 사용해 ESLint가 TypeScript 코드를 해석할 수 있게 한다.

 

 

3. plugins

일련의 ESLint 규칙, 구성, 프로세서 및 환경을 포함할 수 있는 npm모듈

ESLint는 서드파티 플러그인을 지원하기 때문에 플러그인 패키지들을 설치하고, 설치한 플러그인들을 plugins에 추가해 사용할 수 있다.

"plugins": ["react", "@typescript-eslint"],

eslint-plugin-react와 @typescript-eslint를 설치했다.

 

 

4. extends

추가한 플러그인에서 사용할 규칙을 설정

플러그인은 일련의 규칙 집합이며, 플러그인을 추가해도 규칙은 자동으로 적용되지 않는다.

규칙을 적용하기 위해서는 추가한 플러그인 중에 사용할 규칙을 직접 추가해야 적용된다.

 

"extends": [
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:prettier/recommended",
  "plugin:@typescript-eslint/recommended"
],

• "plugin:react/recommended": react로 설정한 eslint 설정을 불러옴
• "plugin:@typescript-eslint/recommended": typescript에서 제공하는 기본적인 eslint 설정을 불러옴
• "plugin:prettier/recommended": prettier로 설정한 eslint 설정을 불러옴

 

 

5. rules

규칙 하나하나를 세세하게 제어하기 위해 사용

일반적으로는 extends 옵셭을 통해 설정된 규칙을 덮어쓰고 싶을 때 유용하게 쓸 수 있다.

즉, extends 옵션보다 rules 옵션이 우선시된다는 것!!

 

규칙을 설정할 때는 다음과 같이 해야한다.

• "off" 또는 0: 해당 규칙을 사용하지 않음
• "warn" 또는 1: 해당 규칙을 위반하였을 경우 경고 표시
• "error" 또는 2: 해당 규칙을 위반하였을 경우 오류 표시

 

"rules": {
  "no-console": "off",
  "@typescript-eslint/explicit-module-boundary-types": "off",
  "prettier/prettier": ["error", { "endOfLine": "auto" }],
  "react/jsx-filename-extension":["warn",{"extensions":[".tsx"]}]
},

 

 

 

6. settings

ESLint 구성 파일에 설정 객체를 추가할 수 있으며, 실행될 모든 규칙에 제공됨

 

"settings": {
  "react": {
    "version": "detect"
  }
}

react 플러그인이 프로젝트에 설치된 리액트 버전을 자동으로 탐지하도록 설정했다.

 

 

 

 

---

🌊 Prettier

코드 구현과는 관련 없는, 일관된 텍스트 작성을 도와주는 도구 -> 프로젝트 내에서 일관된 텍스트 형식을 가질 수 있다!

 

 

Prettier는 작성한 코드를 보기 좋게, 또 일관성 있게 포맷팅 해주는 도구이다.

줄바꿈이나 들여쓰기 간격, 세미콜론을 사용할 것인지, 큰 따옴표를 쓸 것인지 혹은 작은 따옴표를 쓸 것인지를 설정해 파일을 저장할 때마다 형식에 맞게 보기 좋게 정렬을 해준다.

 

 

{
    "singleQuote": true
}

프로젝트에서 사용한 prettier 설정이다.

작은 따옴표를 주로 사용하기 때문에 singleQuote에 대한 설정만 해 둔 상태이다.

 

다른 옵션들을 찾아보자!

https://prettier.io/docs/en/options

Prettier · Opinionated Code Formatter

 

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

 

 

---

다음 프로젝트에서는 내가 필요한 설정을 하나씩 해보아야겠다!