ESLint

ESLint를 사용하는 이유는 자바스크립트의 코드를 실행해야만 어디의 코드가 문제인지 파악이 가능하다.

이러한 부분을 동적 분석이라고 하는데, 코드를 실행하지 않고도 코드를 분석해주는 정적 분석을 하게 되면 더 편하게 코드를 짤 수 있을 것이다.

이러한 점을 도와주는게 ESLint이다.

Prettier

Prettier를 사용하는 이유는 각자마다 코딩 스타일이 다른 부분을 통일시켜주기 위함이다.

팀프로젝트를 진행할 때, 탕수육을 부어먹을래! 난 찍어 먹을래! 하면서 각자 자신의 스타일을 주장하며 코드를 짜게 되면 코드가 뒤죽박죽이 된다.

이러한 점을 방지하고 코드 스타일을 통일시키는데 쓰는게 Prettier이다.

설치 방법

1. ESLint 설치

CRA(Create React App)으로 설치하게 되면 ESLint는 자동으로 설치된다.

이를 확인해보려면 package.json의 eslintConfig라는 부분에서 확인할 수 있다.

아니면 yarn list | grep "eslint" 이렇게도 확인이 가능하다.

vscode를 사용한다면 ESLint Extension을 설치하여 에디터에서 바로바로 확인할 수 있게 만들 수 있다.

설치하지 않으면 CLI에서만 확인이 가능하다.

2. ESLint - airbnb 컨벤션 사용하기

이제 ESLint를 그냥 사용할 수도 있지만 다른 개발자들이 설정해놓은 코딩 컨벤션을 사용할 수도 있다.

그 중 유명한 컨벤션인 airbnb 컨벤션을 사용해보자.

yarn info "eslint-config-airbnb@latest" peerDependencies

이렇게 치면 우리가 eslint-config-airbnb를 설치하기 전 필요한 의존성들을 살펴볼 수 있다.

이러한 의존성들이 설치되었는지 확인해보려면

yarn list | grep "eslint-config"

이렇게 확인해볼 수 있다. CRA를 통해 진행했다면 모든게 설치되어있을 것이다.

그러면 바로 설치해보자.

yarn add eslint-config-airbnb --dev

그리고 코딩 컨벤션이나 코딩 스타일같은 것들은 배포환경에서는 필요없는 패키지들이다.

그러므로, 개발환경에서만 사용하게 --dev 를 꼭 넣어서 설치해주자.

3. ESLint 설정하기

root디렉토리에 .eslintrc.js 를 만들어주자.

module.exports = {
  env: {
    browser: true,
    es2021: true,
    amd: true,
  },
	extends: ["eslint:recommended", "airbnb"],
};

env

js파일이 어떤 환경에서 돌아가는지에 대해 정의할 수 있는 옵션이다.

https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments

env에 대한 자세한 내용은 공식문서를 참조하자.

extends

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

우리는 airbnb 컨벤션을 사용할 것이기에 이와같이 설정합니다.

이렇게 설정하면 빨간줄 천지일 것이다. 여기서 필요한 규칙들은 냅두고, 너무 까다로운 규칙들은 꺼두는 작업을 진행할 것이다.

4. Prettier 설치하기

먼저 Prettier부터 설치해보자.

vscode에서 extension으로 Prettier를 설치한다.

그 다음 해당 명령어로 프로젝트내에 Prettier를 또 설치한다.

yarn add prettier --dev --exact

prettier의 버전이 서로 달라 코드 스타일이 달라질 수도 있으니 하나의 버전만 사용하게끔 만든다.

그리고 eslint와 마찬가지로 배포환경에서는 필요없으니 --dev를 붙인다.

이렇게 두 개를 설치하는 이유는 프로젝트내에 Prettier는 따로 관리하기 위함이다.

Prettier Extension에 나와있는 내용이다. 이렇게 프로젝트내에 로컬로 설치해주지 않으면 해당 Prettier의 버전에 따라 영향을 받기때문에 뒤죽박죽이 될 수 있다는 얘기이다.

5. Prettier 설정

.prettierrc.js 를 root 디렉토리에 만들어주자.

module.exports = {
  endOfLine: "auto",
  tabWidth: 2,
  semi: true,
  singleQuote: false,
  trailingComma: "all",
  useTabs: false,
  arrowParens: "avoid",
  printWidth: 120,
};

각 명령어에 대한 내용은 다음과 같다.

{
  "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 방식 사용
}

그리고 Shift + ALT + F를 누르거나 Ctrl + Shift + P 를 눌러서 Format Document를 찾아 누르게 되면 설정한 옵션들이 적용이 될 것이다.

여기서 저장할 때 자동으로 Prettier설정이 되게끔 하는 방법이 있다.

Ctrl + Shfit + P ⇒ Open Settings ⇒ settings.json 을 열어주자.

"[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true 
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
},

다음과 같이 적어주자.

그러면 저장할 때 마다 Prettier가 적용이 되서 들어간다.

6. ESLint - Prettier 연동

여기서 ESLint의 코드 스타일과 Prettier에서 설정한 스타일이 충돌이 일어날 수 있다.

대표적으로 singleQuote 를 false로 설정하면 ESLint는 singleQuote가 true라서 계속해서 고치라고 에러를 내뱉게 된다.

이러한 점 때문에 2가지의 패키지를 설치해야한다.

eslint-config-prettier

Prettier에서 관리할 수 있는 코드 스타일을 ESLint에서 비활성화 시켜준다.

1차적으로 Prettier의 코드 스타일을 맞추고, 그 다음 airbnb 컨벤션을 이용한다는 얘기이다.

eslint-plugin-prettier

Prettier를 ESLint 규칙에 맞게 실행하게 오류를 ESLint의 오류로 나타나게 해주는 기능을 가진 패키지이다. 즉, Prettier가 ESLint 규칙을 바탕으로 검사를 하다가 결과로 나오는 오류를 ESLint 오류로 보여주게 한다.

yarn add eslint-config-prettier eslint-plugin-prettier --dev

7. ESLint 설정 변경하기

다음과 같은 패키지 2개를 설치했으니 다시 설정을 변경해줘야한다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
    amd: true,
  },
  extends: ["eslint:recommended", "airbnb", "plugin:prettier/recommended"],
};

"plugin:prettier/recommended" 이 친구가 eslint-config-prettier 도 같이 적용시켜준다.

이제 적용은 끝이 났고 ESLint의 Rule만 추가하면 된다.

ESLint의 규칙중에 어떤 것은 매우 빡빡하게 느껴지는 경우가 존재한다. 이러한 규칙들은 비활성화 시켜 적용할 수 있다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
    amd: true,
  },
  extends: ["eslint:recommended", "airbnb", "plugin:prettier/recommended"],
  ignorePatterns: ["index.js", "reportWebVitals.js"],
  rules: {
    "import/no-unresolved": "off",
    "react/prop-types": 0,
    "no-extra-semi": "error",
    "react/jsx-props-no-spreading": "off",
  },
};

지금 사용하고 있는 규칙들이다.

"import/no-unresolved"

절대경로를 사용하게 되면 ESLint에서 이에 대한 경로가 잘못되었다고 알려준다.

"import/no-unresolved": [2, { caseSensitive: false }],

이렇게 사용하면 파일 경로가 틀렸다는 부분을 끄면 되는데 무슨 이유에서인지 적용이 되지 않아 그냥 해당 에러를 꺼버리는 식으로 진행했다.

"react/prop-types"

우리가 컴포넌트간에 props를 전달하며 데이터를 주고받는데, 이 때 데이터의 타입이 정해져있지 않다.

이러한 부분을 나타내는 에러이다.

"no-extra-semi"

세미클론이 존재하지 않으면 에러를 띄운다는 얘기이다.

"react/jsx-props-no-spreading"

props로 받은 친구를 spread를 하게끔 설정하는 친구이다.

설정이 가능하게끔 했다.

여러 규칙들이 상당히 많은데 천천히 프로젝트를 하면서 알아보려고 한다.

참고

https://velog.io/@gwangsuda/2019-09-25-1009-작성됨-bwk0ylejxj

https://soojae.tistory.com/39

https://velog.io/@cookncoding/ESLint-Prettier-Airbnb-Style-Guide로-프로젝트-세팅하기

https://pstudio411.tistory.com/entry/아-보기-좋은-코드다-Prettier-알아보기