prettier, eslint, styleLint에 대해

ESLint와 Prettier

• 코드 컨벤션을 잡아주는 도구

• ESLint

  • 코드 퀄리티를 보장하도록

  • 코드 구현 방식의 일관성

  • ex. 함수 : function 키워드 정의, arrow 사용 → 일관성 있

  • 기능 자체는 VSCode 에디터에 적용 → extension 설치 필수

• Prettier

  • 코드 스타일 깔끔하게 통일되도록

  • 텍스트 일관성

  • ex. 줄바꿈, 공백, 들여쓰기

ESLint 세팅

ESLint library 설치

$ npm install -D eslint
// or
$ yarn add -D eslint

ESLint extension 설치

lint rule 세팅

.eslintrc

{
    "root": true,
    "plugins": [
        "@typescript-eslint"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "rules": {
        "@typescript-eslint/strict-boolean-expressions": [
            2,
            {
                "allowString" : false,
                "allowNumber" : false
            }
        ]
    }
}

• root

  • true 해당 프로젝트 디렉토리에서 eslintrc 파일 탐색

  • false 해당 디렉토리뿐 아니라 내PC의 root 파일 시스템 root 디렉토리까지 탐색

• plugins

  • eslint-config-airbnb-base 에어비엔비 린트 플러그인

  • eslint-config-next Next.js 전용 린트 플러그인

  • eslint-plugin-react 리액트 전용 플러그인

  • eslint-plugin-prettier 린트 위에 사용할 프리티어 플러그인

  • eslint-config-prettier 린트 설정과 중복되는 부분이 있으면 프리티어 룰에서 제외하는 플러그인

  • @typescript-eslint/eslint-plugin 타입스크립트 전용 린트 플러그인

  $ npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
  
  

• extends

  • eslint rule 설정이 저장된 외부 file extends

• parser

  • 각 코드 파일 검사할 파서 설정

  • espree 기본 설정

  • 특정 플러그인 사용 시, 해당 플러그인에서 제공하는 parser 사용

• rules

  • 직접 lint rule을 적용하는 부분

  • extends에서 자동으로 설정된 rules 중에 특정 rule 해제, error를 warning으로 설정 등으로 변경 가능

Prettier 세팅

Prettier 설치

1. VSCode extension 으로 설치

   • 자신의 VSCode 환경에서만 적용

   • VSCode extension 설치

     
     

   • command + shift + p > Open User Settings > prettier 검색

     → prettier 관련 설정 가능

2. Prettier 플러그인 직접 설치 후 eslintrc에 세팅

   • 다른 환경에서도 동일하게 적용

   • 직접 설치

     $ npm install -D prettier
     $ yarn add -D prettier
     
     

   • eslint-plugin-prettier

     • eslint와 중복되는 규칙을 prettier에서 꺼주는 역할

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

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

     → .prettierrc 기반으로 eslint 에서 형식에 어긋나면 에러 처리

prettier 설정 파일 생성

• .prettierrc 파일 생성

  • 다양한 옵션 정의

  • .prettierignore 파일 : 포맷하지 않을 파일 목록 작성 가능

  {
    "semi": false,
    "singleQuote": true,
    "tabWidth": 2,
    "useTabs": false,
    "trailingComma": "es5"
  }
  
  
  

• 프로젝트에서 prettier 사용

  • 설정 파일 준비 후 프로젝트 파일 자동 포맷

    $ prettier --write "... .js"
    
    

styleLint

StyleLint 란?

• CSS 코드의 정적 분석 도구

• 스타일 시트의 코드 품질 향상, 일관성 유지

• cmd + shift + C

• style 속성 순서 유지, 코드 정리 (규칙 강제)

styled-components에 StyleLint 적용하기

• styled-components 설치

  $ npm install styled-components
  $ npm install @types/styled-components --save-dev
  
  //or
  
  $ yarn add styled-components
  $ yarn add @types/styled-components --dev
  
  

• 설치

  $ npm install --save-dev stylelint-processor-styled-components
  
  

  // package.json
  {
  	"devDependencies": {
       	...
       	"stylelint-processor-styled-components": "^1.10.0",
  	    "stylelint-config-prettier": "^8.0.2",
      }
  }
  
  

  • stylelint-config-prettier stylelint, prettier 통합하여 코드 포맷팅 관리

  → 추가 후 npm install

• .stylelintrc.json 설정

  {
    "plugins": ["stylelint-processor-styled-components"],
    "extends": [
      "stylelint-config-standard",
      "stylelint-config-prettier",
      "stylelint-config-recess-order",
      "stylelint-config-styled-components"
    ],
    "rules": {
      ... 필요한 rule 추가
    }
  }
  
  

• CSS-in-JS 파일 포함하도록 npm 스크립트 업데이트

  // package.json에 script 추가
  "fmt:stylelint": "stylelint --fix '**/*.{ts,tsx}'",