처음 프로젝트를 시작할 때 코딩 컨벤션을 지키기 위해 여러 익스텐션을 설치하고 셋팅을 시도해봤는데 맘처럼 쉽게 되지 않았고 일단 프로젝트를 시작했다.
미루고 미루다 진짜 어질어질한 내 코딩 스타일때문에 지금은 적용을 해야겠다고 느꼈다.
(프로젝트 시작하고 4개월만에 다시 해보는 코드 정리하기)

사실 린트와 프리티어 설정 없이 직접 스타일을 지키며 코딩을 해보면 내 코딩 습관이 좋아지지 않을까? 하는 생각을 하기도 했다 ㅋㅋㅋ
다른 잘하는 사람들의 코딩 스타일들을 보며 내 손에 익혀보자! 라고 생각했는데 사람마다 코드 스타일이 모두 다르고 내 코드 안에서 여러 규칙들이 짬뽕돼버렸다. (부끄)
물론 프론트앤드에 팀원이 나밖에 없어서 포맷때문에 충돌이 나진 않지만 누가 볼까 부끄러운 코드를 바꿔보쟛.

이 글은
코드 포맷팅을 도와주는 툴에 대해 소개 후
ESLint와 prettier를 vscode환경에서 설정하는 방법 및 각 과정에 대한 설명으로 이루어져있습니다.

프론트앤드 코딩 컨벤션 자동화 도구 살펴보기

오류를 잡기 위해 사용하는 린터, 스타일 교정을 위해 사용하는 포맷터

ESLint

린터의 기능부터 살펴보면 느슨한 형식의 언어인 자바스크립트에서는 코드 에러가 자주 발생한다. 하지만 자바스크립트는 프로그램을 직접 실행시켜 코드를 분석해야하는 동적 분석 언어이기 때문에 에러를 찾기 위해선 코드를 직접 실행시켜봐야한다. 이 과정을 줄이기 위해 도와주는 것이 린터이다. 린터는 코드를 정적으로 분석하기 때문에 프로그램을 실행시키지 않고도 코딩 컨벤션에 위배되는 코드나 안티패턴을 검출해준다. (추가적으로 간단한 코드 포맷팅 기능도 가지고있다.)

EditorConfig

이건 프로젝트별, 파일별로 룰을 설정해줄 수 있는 자동화 도구이다. vscode를 사용중이라면 요 익스텐션을 다운받고 적용하고자 하는 프로젝트의 루트에서 .editorconfig 파일을 설정해주면 적용된다. 문자셋, 탭/스페이스, 스페이스 갯수, 줄바꿈 문자, 파일 끝 빈줄처리 등을 설정해줄 수 있지만 세세한 설정을 지원해주진 않는다.

Stylefmt

이건 CSS 코드 자동 정리 툴이다. CSS파일이나 SCSS 파일의 컨벤션을 자동으로 적용시켜준다. npm 또는 yarn을 통해 설치하고 JSONm YAML, CommonJS를 통해 원하는 룰을 설정해줄 수 있다.

Prettier

JS코드를 자동 정리해주는 포맷터다. npm 또는 yarn을 통해 설치하고, JS -> AST(Abstract Syntax Tree)로 분석 후 재조합하는 방식이므로 원본 코드의 형식은 무시된다. 따옴표 룰, 행 최대 길이, 세미콜론, 공백 규칙등을 설정해줄 수 있다.

Husky + Lint-staged

(ㅋㅋㅋ 허스키 사진은 그냥 귀여워서)

husky는 git hook을 편하게 작성하도록 도와주고
lint-staged는 커밋할 파일에 대한 린터를 진행해준다.

깃훅은 깃과 관련된 어떤 이벤트가 생겼을 때 특정 스크립트를 자동으로 실행시켜주는 것이다.

깃 훅과 관련된 셋팅은 포맷터 셋팅이 끝나고 해볼것임!

코드 포맷터인 Prettier와 린터를 함께 사용하면 예기치않은 충돌이 발생할 수 있다. 하지만 CRA를 사용해 프로젝트를 생성했다면 기본적으로 세팅되어있는 ESLint config가 non-style룰만 포함하고있기 때문에 프리티어를 설치해서 세팅해도 충돌이 일어나지 않는다.

자.. 이제 여러 블로그에서 vscode에서 CRA로 생성한 프로젝트에 ESLint와 Prettier를 설정하는 방법을 보고 따라하면 !! 적용이 안된다.
바로 적용이 되는 사람들도 있겠지만 난 벌써 몇번째 시도중인데 쉽지 않다.

왜 적용이 안된건지, 설정 하나하나가 어떤 의미를 가지고 있었는지, vscode에서 어떻게 적용되는건지 알아보기로 했다.

ESLint 세팅

익스텐션이랑 패키지 둘 다 설치해야해? 응.

ESLint를 사용하려면 ESLint 패키지를 설치해야한다.

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

• ESLint extension도 꼭 설치해줘야한다.
  

ESLint Extension의 설명을 보면 워크스페이스(프로젝트 단위)에서 ESLint가 설치되어있는지 확인하고, 없다면 글로벌 ESLint를 참조한다고 한다. (룰을 커스텀해주기 위해서는 필요에따라 .eslintrc파일이 필요할 수도 있음)

즉 ESLint는 프로젝트의 코드 단에서 설정하는 것이 아닌 VSCode에디터에 적용해서 사용하는 것이기 때문에 ESLint사용을 위해 vscode의 extension과 ESLint라이브러리를 모두 세팅해줘야 한다는 것!

ESLint를 모두 설치해줬다면 .eslintrc 파일을 통해 원하는 lint rule을 세팅해줘야한다.

ESLintrc에서 적용할 수 있는 rule은 어떻게 구성될까?

ESLint docs configuration file user guide

우선 설정에 관련된 블로그의 포스팅들을 보다 보면 .eslintrc파일을 생성할 때 확장자 형식이 다양한 것을 볼 수 있다. 하나의 워크스페이스에 여러 .eslintrc파일이 존재한다면 우선순위가 가장 높은 하나의 린터 설정만 적용된다.

1 .eslintrc.js
2 .eslintrc.cjs
3 .eslintrc.yaml
4 .eslintrc.yml
5 .eslintrc.json
6 pakage.json

ESLint 문서에 나와있는 예제를 분석해보면

{
    "root": true,
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": { "project": ["./tsconfig.json"] },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "@typescript-eslint/strict-boolean-expressions": [
            2,
            {
                "allowString" : false,
                "allowNumber" : false
            }
        ]
    },
    "ignorePatterns": ["src/**/*.test.ts", "src/frontend/generated/*"]

root

ESLint는 린트할 파일의 디렉토리부터 파일시스템의 루트 디렉토리, 사용자의 홈 디렉토리(~/)까지 연속적으로 상위 디렉토리로 가며 설정값을 찾는다.
"root": true, 설정은 기본값이고, true가 아닌 다른 값이라면 해당 프로젝트의 디렉토리를 넘어서 사용자의 홈 디렉토리까지 lint파일을 찾는다.

extends

ESLint 설정이 저장되어있는 외부 file을 extends하는 부분이다.
예시처럼 extends에 "eslint: recommended" 속성과 "plugin:@typescript-eslint/recommended" 속성을 넣어주면 명시된 플러그인에서 기본적으로 제공하는 rule이 적용된다.
(변경하고싶다면 아래의 rules 파트에서 변경해주면 된다.)

parser

각 코드 파일을 검사할 파서를 설정해주는 부분.
default 설정은 espree이고, 예시처럼 특정 플러그인을 사용한다면 해당 플러그인에서 제공하는 parser를 명시해준다.

parserOptions

ESLint를 사용하면 지원하려는 js 언어 옵션을 지정할 수 있다. ESLint는 기본적으로 ES5 구문을 예상한다.
파서 옵션을 사용해서 jsx뿐 아니라 다른 ES버전에 대한 지원을 활성화 하도록 설정해줄 수 있다.

JSX 구문을 지원하는 것이 React를 지원하는 것과 같지 않다고 한다. React는 ESLint가 인식하지 못하는 JSX구문에 특정 의미를 적용한다.
React를 사용중이고, React의 의미 체계를 원하는 경우에는 eslint-plugin-react를 사용하는 것이 좋다.

plugins

프로젝트에 필요한 플러그인은 npm이나 yarn을 사용해 설치해주면 되고, 사용 할 플러그인을 배열 안에 추가해준 뒤 접두사가 없는 플러그인 이름, 슬래시, 환경 이름을 차례로 적어주면 된다.
예시로

{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}

rules

lint rule을 직접 적용시켜주는 부분이다.
extends를 통해 설정 된 rules 중에 특정 rule을 끄거나 error를 warning으로 변경해주는 설정 등을 해줄 수 있다.

ignorePatterns

특정 파일 및 디렉토리를 무시하도록 하는 설정
.eslintignore과 동일한 규칙을 따르지만 .eslintignore파일의 속성이 더 우선시된다.

.eslintignore

프로젝트의 루트 디렉터리에 .eslintignore 파일을 만들어 특정 파일과 디렉터리를 무시하도록 ESLint에 지시할 수 있다.
.eslintignore에서 파일은 각 행이 린팅 과정에서 생략되어야 하는 경로를 glob 패턴으로 나타낸다.

Linter의 적용 과정 정리

우리가 yarn(nmp)과 vscode의 extension으로 설치한 ESLint는 린트 환경을 셋팅해주는 역할을 하는 것이고,
실제로 코드를 검사할 때 영향을 주고싶다면 린트 플러그인을 별도로 설치해서 .eslintrc 파일에 장착시켜줘야하는 것이다.

Prettier 세팅

프리티어를 세팅하는 방법은 2가지가 있다.
1. VSCode의 extension을 설치
2. prettier 플러그인을 yarn(npm)으로 직접 설치 후 세팅

첫번째 방법은 프로젝트 단위로 포맷팅을 해주는 것이 아닌 VSCode에디터에 prettier rule을 적용시켜주는 것이다. 따라서 나의 vscode 바깥 환경에서는 prettier가 적용되지 않느다.

두번째 방법은 프로젝트 자체에 prettier rule을 적용시켜주는 것으로 해당 프로젝트를 다른 환경에서 돌려도 포맷팅을 적용시킨다.

1. VS Code extension으로만 prettier 설치하기

해당 익스텐션은 설치하는 순간 바로 적용된다.
설치 후 vscode 의 setting페이지에서 prettier extension 관련 설정을 해주면 적용이 끝난다.

2. 패키지 매니저로 prettier 설치하기

첫번째 방법은 vscode 환경에 세팅을 해주는 것이기 때문에 yarn이나 npm같은 패키지 매니저로 설치한 prettier 플러그인에는 적용되지 않는다.
따라서 yarn(npm)으로 prettier를 설치했다면 .prettierrc 파일을 작성해줘야한다.

vscode의 extension과 .prettierrc파일이 모두 존재한다면 우선순위는 .prettierrc파일이며 vscode의 setting은 무시된다.

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

3. prettier 관련 확장 패키지 설치해주기

더해서 prettier docs를 보면 ESLint의 포맷터 기능과 충돌할 수 있는 경우를 대비해 eslint-config-prettier를 사용해 ESLint의 포맷팅 기술을 꺼야한다고 나와있다.

$ npm install --save-dev eslint-config-prettier
//or
$ yarn add --dev eslint-config-prettier

코드 내에서 prettier에 걸린 부분을 lint 에러로 보고하도록 하는 플러그인인 eslint-plugin-prettier도 설치해주면 좋다.

$ npm install --save-dev eslint-plugin-prettier
//or
$ yarn add --dev eslint-plugin-prettier

이후 .eslintrc 파일에서 설정해줘야 하는 rule들이 나와있는데 아래처럼 넣어주면 여러 설정들을 한번에 적용시켜준다.

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

위에서 설명한 패키지 한번에 설치!

$ npm i --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
//or
$ yarn add --dev prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react

이렇게 해주면 prettier의 rules를 적용하기 위해 root 디렉터리의 .prettirrc파일을 찾고, 해당 파일의 rules를 적용한다.

우와 같이 설정해줬다면 lint과 prettier 룰에 맞지 않는 코드는 eslint error로 판단하여 빨간 줄을 띄운다.

Format On Save

저장할 때 lint rule을 자동으로 잡아주게 하는 기능은 VS Code 에디터에서 작동하는 기능이다. 따라서 VS Code의 setting에서 설정을 해줘야한다.
setting을 json으로 설정하는 창을 켠 뒤 (commend+,) 해서 설정 띄우고 오른쪽 상단에 파일모양을 클릭하면 json파일이 뜬다.

여기에서 설정해주는 두가지 옵션이

editor.codeActionsOnSave

save할 때 ESLint 관련 요소를 알아서 fix해줄 수 있는 옵션이다.

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

editor.formatOnSave

save 할 때 VSCode 의 Extension으로 설정한 prettier 환경에 맞게 코드를 수정해주는 옵션이다.

{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
}

이걸 해줬는데도 저장시 포맷팅 수정 기능이 먹히지 않는다면 린터나 prettier에 룰을 파악하지 못하는 것이므로 린터와 프리티어 설정을 손봐주면 된다.