ESLint, Prettier, StyleLint 설치부터 초기 세팅까지

초기 세팅 쉽지 않네..

공준혁

· 학생

2024.05.10

eslint, prettier, styleLint 에 대해 다루기 전에, 기본적인 개념부터 짚고 가자.

dependencies 와 devDependencies 차이 (package.json)

라이브러리를 설치할 때, 위의 2가지의 내용을 package.json에서 살펴볼 수 있다.

이 둘의 차이는 뭘까?

따라서, 어플의 로직과 연관이 없다고 판단되는 라이브러리가 있다면 dev에 넣는 것이 좋다.

따라서, 구분해서 라이브러리를 설치해주어야 빌드시간을 줄이고, 배포할 때 불필요한 라이브러리를 포함시키지 않을 수 있다.

라이브러리? Extension?

ESLint, Prettier, StyleLint ..의 초기세팅에 대해 배우기 전에, 확실히 짚고 넘어가야할 개념이 있다.

과연 이 셋은 라이브러리인가? 아니면 VS Code의 Extension 중 하나인가?

정답은?

둘 다.

정확히 말하면, 라이브러리이면서 Extension이 아니라,

라이브러리용 버전이 있고, Extension용 버전이 있다고 생각하면 된다.

ESLint, Prettier, StyleLint 가

라이브러리일 때 Extension일 때 npm, yarn 등을 통해 설치한다. 그냥 VSCode 왼쪽 아이콘 눌러서 검색하고 설치한다. 세팅과 알맞지 않은 작성이면, 코드가 적용되지 않는다. (빌드되지 않는다.) 현재 작성하고 있는 Code 상에서, 실시간으로 끊임없이 Lint로 경고를 띄워준다. 그러나, 개발자가 무시하고 빌드(저장)하려면 저장이 된다.

또한, 라이브러리일 때는 일련의 명령어를 통해, 세팅과 알맞지 않은 것들을 찾고 한번에 변경해주는 기능 또한 제공하기도 한다.

정리하면, Extension은 코드 작성 단계에서 실시간으로 컨벤션(세팅) 위반이 나는지 확인하는데 사용하고, 라이브러리는 최종 코드가 넘어가지 못하게 기준선을 정하는데 사용한다고 보면 된다.

<aside> 💡 따라서, 둘다 설치하자~

</aside>

추가) 저장 시 eslint, prettier 자동 적용하기

https://velog.io/@milkyway002/ts-리액트-프로젝트-초기-셋팅법-prettier-eslint

해당 설정은 저장을 할 때, eslint와 prettier를 자동으로 적용하도록 도와주는 IDE 옵션을 활성화 하는 방법이다.

1. eslint 적용

eslint를 적용하기 위해선 setting.json 파일을 수정해야 한다. setting 탭에서 아래와 같이 검색하여, Edit in settings.json 을 눌러 setting.json을 켜준다,

!https://velog.velcdn.com/images/milkyway002/post/cf9bce5d-3e38-47f9-bced-c9bb1df4266f/image.png

그럼 자동으로 옵션들이 추가되어 자동완성이 뜨는데, 만일 뜨지 않을경우 아래와 같은 옵션을 setting.json에 넣어준다.

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
    "source.fixAll": true
}

2. prettier 적용

먼저, 아래와 같이 setting 탭을 켜준다. setting 탭은 좌측 하단에 있는 톱니바퀴를 누르면 나오는 select menu에서 클릭하여 킬 수 있다.

!https://velog.velcdn.com/images/milkyway002/post/e43bb979-666d-4f69-80be-5a2a81ef98ff/image.png

검색창에서 format on save를 검색 후, 나온 결과에서 체크박스를 활성화 해준다.

!https://velog.velcdn.com/images/milkyway002/post/0206990c-e3ba-41b1-a7bd-fb616d862768/image.png

도구 자동화(스타일린트)

서두에 언급했듯 VSCode extension 설치시 에디터와 통합되기 때문에 에디터 상에서 검사, 수정이 가능하다.

다음 설정들은 파일 저장 시 (Ctrl + S) 자동으로 위 rule들을 format 해주는 설정으로 매우 편리하다!

ESLint, prettier, stylelint 수정 자동화

VSCode의 setting.json에서 아래 코드를 추가해주면 된다.

"editor.codeActionsOnSave": {
	"source.fixAll.eslint" : true, // eslint 자동 수정
    "source.fixAll.stylelint": true // stylelint 자동 수정
    },

"editor.formatOnSave" : true, // prettier 자동 수정

ESLint 란?

: ES(EcmaScript) + Lint

<aside> 💡 ES문법, 즉 표준 JS 문법에 어긋나는것을 표시하여 알려주는 라이브러리

</aside>

다양한 Lint 라이브러리가 있지만, ESLint가 가장 유명한 이유는, 확장성 때문이다.

플러그인을 사용하여 쉽게 새로운 규칙을 추가할 수 있고, 다른 회사나 사람의 설정을 도입해올 수 있다. 즉, 초기 설정이 용이하다!

yarn add eslint --dev //eslint 라이브러리를 devDependecies로 설치한다

yarn eslint --init
 혹은 yarn create @eslint/config //eslintrc 파일 생성 (근데 난... config 파일만 생긴다..)
//config 파일도 .eslint.cjs 파일과 같은 역할을 한다고는 하던데.. 모르겠다..

그냥 yarn create vite 를 통해 vite를 생성하면 eslint 라이브러리가 같이 설치되면서 .eslint.cjs가 생성되니, vite를 적극 사용하자.

다음은 vite를 TS+SWC 로 생성할 시 생기는 기본 .eslint.cjs 파일이다.

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

나머지 속성들은 당장은 몰라도 되니, 넘어가자.

원래는, parser나 타입스크립트용 eslint 플러그인도 직접 다 설치해야 한다.
eslint plugin 패키지 추가
```
yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin
```
eslint-typescript parser 패키지 추가
```
yarn add -D @typescript-eslint/parser
```
타입스크립트용 ESLint 파서 설치
이런식으로 다 설치해주어야 하는데, 우리는 create vite 하면서 이 과정 모두를 생략한 것이다. (자동 설치해줌)

plugins : 다른 사람이 만든 규칙(패키지)을 가지고 오는 것.

plugin에 추가한다고 해서 바로 적용되는 것이 아니다. 단지 가지고 오겠다는 것에 불과하며, extends나 rules 에서 명시(설정)해주어야 적용이 된다.

extends : eslint에 내장된 규칙이나 다른 사람이 만든 플러그인을 가져와 적용한다.

plugin package 규칙을 그대로 따르고 싶을 때 추가해준다.
recommended / strict / all : 어느정도의 수준으로 규칙을 적용할지 정한다. (선택에 따라 적용되는 옵션의 개수나 강도가 달라진다.)
제 3자가 만든 플러그인을 적용하기 위해서는, 라이브러리 설치가 필요하다.

<aside> 💡 가장 유명한, airbnb convention 을 적용하기 위해 다운로드 받아보자.

</aside>

yarn add -D eslint-config-airbnb eslint-config-airbnb-typescript

//참고) npx install-peerdeps --dev eslint-config-airbnb 에서 -peerdeps는 동료 의존성도 같이 다운로드 한다는 의미이다. 이 예시로 설명하자면, eslint-config-airbnb를 설치하기 전에 필요한 eslint 라이브러리를 같이 설치해준다.

eslint-config 로 시작하는 패키지를 설치 시, extends 옵션에 사용에 가능하다.

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

rules : 사용자가 직접 규칙을 설정하거나, 적용한 패키지의 내용 일부를 수정 적용할 수 있다.

extends 에서 설정하여 기본으로 설정된 규칙도 바꾸거나 없애거나 추가할 수 있다.

직접 수정한 예시(기존 플러그인 패키지 속성 일부 수정)

"rules": {
      "@typescript-eslint/strict-boolean-expressions": [
          2,
          {
              "allowString" : false,
              "allowNumber" : false
          }
      ]
  },

이 예시는, 직접 @typescript-eslint/strict-boolean-expressions 플러그인의 규칙 중 일부를 2의 수준으로 수정한 것이다.

직접 수정한 예시(사용자 정의 - rules부분을 참고할 것!)
```
yarn add -D eslint-config-airbnb-base # 리액트 관련 규칙 X
yarn add -D eslint-config-airbnb # 리액트 관련 규칙 O
yarn add -D eslint-plugin-import # ES6의 import, export 구문을 지원, 필수 플러그인
yarn add -D eslint-plugin-react # React 규칙 플러그인
yarn add -D eslint-plugin-react-hooks # React Hooks 규칙 플러그인
yarn add -D eslint-plugin-jsx-a11y # JSX요소의 접근성 규칙에 대한 플러그인
```
```
module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
      },
      "extends": [
        "plugin:react/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:prettier/recommended"
      ],
      "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
      },
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
      },
      "plugins": ["react", "react-hooks", "@typescript-eslint", "import", "import-order-autofix"],
      "rules": {
        "react/prop-types": "off",
        "react/display-name": "off",
        "react-hooks/rules-of-hooks": "error",
        "camelcase": "error",
        "no-console": "warn",
        "prefer-const": "error",
        "import/order": [
          "error",
          {
            "groups": ["builtin", "external", ["parent", "sibling"], "internal", "index"],
            "newlines-between": "always",
            "alphabetize": { "order": "asc" }
          }
        ],
        "prettier/prettier": ["error", { "endOfLine": "auto" }]
      },
      "settings": {
        "react": {
          "version": "detect"
        }
      },
      "ignorePatterns": ["node_modules/**"]
	};
```
- 위의 rule에 대한 설명 + 자주 사용하는 rule들
  1. "react/prop-types": "off": React 컴포넌트에서 prop-types를 사용하지 않도록 설정합니다. 이 설정은 prop-types를 사용하지 않는 프로젝트에서 유용합니다.
  2. "react/display-name": "off": React 컴포넌트의 display name을 지정하지 않아도 되도록 설정합니다. 이 설정은 display name을 사용하지 않는 프로젝트에서 유용합니다.
  3. "react-hooks/rules-of-hooks": "error": React Hook의 규칙을 검사하여, 올바른 사용을 강제합니다. 이 설정은 React Hook을 올바르게 사용하기 위해 규칙을 적용합니다.
  4. "camelcase": "error": 변수명에 camelCase를 강제합니다. 예를 들어, camelCase를 사용하지 않은 변수에 대해서는 경고를 표시합니다.
  5. "no-console": "warn": console.log()와 같은 console 사용을 경고 수준으로 설정합니다. 콘솔 사용을 최소화하여 디버깅을 더 쉽고 안정적으로 만듭니다.
  6. "prefer-const": "error": 변수가 변하지 않는 경우에는 const를 사용하도록 강제합니다. 이를 통해 변수 재할당을 방지하고 코드의 가독성을 높입니다.
  7. "import/order": [...]: import 구문의 순서를 강제하는 설정입니다. 이 설정은 import 구문의 그룹화와 순서, 그리고 각 그룹 사이의 빈 줄을 지정합니다.
  8. "prettier/prettier": [...]: Prettier에 대한 설정으로, 코드 포맷팅을 통해 코드의 일관성을 유지합니다. 이 설정은 Prettier의 규칙을 ESLint에 통합하여 일관된 코드 스타일을 유지합니다.
  자주 사용하는 ESLint 규칙 설정들 중 일부는 다음과 같습니다:
  - "no-unused-vars": "warn": 사용되지 않는 변수를 경고 수준으로 설정합니다.
  - "no-undef": "error": 선언되지 않은 변수를 오류로 표시합니다.
  - "indent": ["error", 2]: 들여쓰기를 2칸으로 강제합니다.
  - "semi": ["error", "always"]: 세미콜론을 항상 사용하도록 강제합니다.
  - "quotes": ["error", "single"]: 문자열을 작은 따옴표로 강제합니다.
  - "max-len": ["error", { "code": 80 }]: 한 줄의 최대 길이를 80으로 제한합니다.

<aside> 💡 규칙은 총 세가지의 강도로 표현할 수 있는데, ‘off’ 또는 0, ‘warn’ 또는 1 ‘error’ 또는 2로 설정한다.

</aside>

라이브러리를 사용하여 검사 및 코드 수정하기

yarn eslint 검사하고_싶은_파일명.js // 검사
yarn eslint 검사하고_싶은_파일명.js --fix // 검사 후 자동 코드 수정

그런데, 검사하는 단계는 사실 플러그인에서 가능하니, 주로 자동으로 코드를 수정하는 기능을 사용한다고 보면 된다.

Prettier 란?

: Code Fomatter

<aside> 💡 코드 스타일의 일관성을 확보해 가독성을 향상시키기 위한 라이브러리

</aside>

들여쓰기의 기준(2칸? 4칸?), 문자열 표시 기준(따옴표? 쌍따옴표?), 줄바꿈의 기준(중괄호를 어디에 둘 것인가?) 등 코드 스타일에 관련된 여러 가지 요소를 조정한다.

yarn add -D prettier // 마찬가지로 프리티어를 설치한다.
//npm install -D prettier

Prettier는 자동으로 생성되는 설정 파일이 없다. 즉, 직접 생성해주어야 한다.

프로젝트의 루트에 .prettierrc 파일을 생성한다. (.prettierrc.cjs 든 .prettierrc.json이든 상관없다.)

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "auto"
  "jsxBracketSameLine": false
  "orderedImports": true,
 
}

더 많은 옵션들을 보고 싶다면? : https://prettier.io/docs/en/options.html 를 참고하라.

그리고, Prettier와 ESLint의 충돌을 막기 위해 다음의 과정을 반드시 거쳐야 한다.

yarn add -D eslint-config-prettier eslint-plugin-prettier
//yarn add --dev eslint-config-prettier eslint-plugin-prettier
//npm install -D eslint-config-prettier eslint-plugin-prettier

위의 과정을 통해 설치한 이후에, .eslint.cjs에 아래의 내용을 추가한다. (prettier 부분 집중 !)

 extends: [ 'plugin:prettier/recommended']
 plugins: ['react', '@typescript-eslint', 'prettier'],
 rules: {
		// #3 rules에 prettier의 코드 포맷이 어긋나는 경우 error highlighting 설정
		'prettier/prettier': ['error'],
    나머지 내용들~~(기존 내용들 생략)
  },

이 과정을 거친 이유
코드를 바꿔주는 설정이 eslint 룰에도 들어있지만 잘 사용되지 않고 prettier로 많이들 설정한다.
그렇기에 설정의 충돌이 일어날 수 있는데, 이를 방지하기 위해 eslint에도 prettier를 인식시킨다. 그 방법으로, eslint용 prettier plugin도 받아 eslint 설정 파일에 적어주는 것이다.

위에서 prettier의 위치에 집중하라.

<aside> 💡 extends에 prettier는 맨 마지막에 넣어야만 한다. 그래야 모든 extends에 prettier 설정이 들어갈 수 있다.

</aside>

eslint-plugin-prettier vs eslint-config-prettier
ESLint plugin 들의 rule과 Prettier의 충돌을 방지하기 위해 아래 두 가지 plugin을 이용한다.
1. eslint-plugin-prettier
  prettier을 ESLint 플러그인으로 추가하여 prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력해준다.
  github : eslint-plugin-prettier
2. eslint-config-prettier
  ESLint의 formatting 관련 설정 중 prettier와 충돌하는 부분을 비활성화 한다.
  github : eslint-config-prettier

코드 포맷팅 적용하기

yarn prettier --check ./src 
//포맷 체크 : Prettier의 옵션들을 지키고 있지 않은 파일 찾기

yarn prettier --write ./src
//포맷팅 : 정의한 Prettier의 옵션을 사용하여 코드 포맷팅

StyleLint 란?

: Style(css) + Lint

<aside> 💡 css 문법상 적용되지 않는 잘못된 구문을 알려주고, 가독성을 위해 우선순위로 정리해주기도 하는 라이브러리

</aside>

yarn add -D stylelint
	stylelint-config-recommended // 오류 방지에 도움이 되는 규칙들
    stylelint-config-concentric-order // CSS 속성 위치 수정
    
  //stylelint-config-standard stylelint-config-prettier 같은 것도 있다.

yarn 설치하는 것

마찬가지로 최상단에 .stylelintrc.json 파일을 생성하고 아래와 같이 작성한다.

{ 
  "extends": ["stylelint-config-recommended", 
              "stylelint-config-concentric-order"]  
  "rules" : {
  	"color-named": "never" // 색상명을 이름으로 사용할 수 없는 규칙 추가
	}
}

혹은

  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
//이 경우는 위에서 stylelint-config-standard stylelint-config-prettier를 설치했을 경우다.

그리고 마찬가지로 충돌 방지가 필요하다.(프리티어와의 충돌방지)

⬇ 설치

$ yarn add -D stylelint-prettier stylelint-config-prettier

⚙ 적용

.stylelintrc에 추가

{
  "extends": [
    "stylelint-config-prettier" // 충돌 방지
  ]

  // prettier 규칙 stylelint에 추가
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true ]
  }
}

실행 $ yarn stylelint "**/*.css"

https://velog.io/@parksil0/프로젝트에-코드-스타일-셋팅하기eslint-prettier-stylelint

https://shawnkim.tistory.com/132

https://velog.io/@s_sangs/CSS-in-JS-Stylelint-feat.-emotion-styled-components

https://velog.io/@parksil0/프로젝트에-코드-스타일-셋팅하기eslint-prettier-stylelinthttps://tyoon9781.tistory.com/entry/vscode-React-Prettier-ESLint-setting

https://velog.io/@seobbang/초기세팅-ESLint-Prettier-stylelint-husky-lint-staged#설치-및-설정