Eslint & Prettier & Husky

Eslint 와 prettier 는 오래전부터 접해왔지만 왜인지 손이 잘 안가던 친구들이었다.
잘 알지도 못하는거 건들이기 싫은 묘한 고집이었달까...
이번 기회에 한번 정리해보려한다.

Eslint? Prettier?

---

코드 퀄리티를 위한 eslint, 깔끔한 코드를 위한 prettier

$ npm i -D eslint eslint-config-prettier prettier

• eslint
• eslint-config-prettier（eslint에서 prettier와 겹치는 포매팅룰을 삭제）
• prettier

Eslint

---

$ npm install -D eslint

npm init @eslint/config

예를 들어 함수 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있다.
또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array 내장 함수를 사용할 수도 있다.

이처럼 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이 eslint가 하는 역할이다.

[eslint] https://eslint.org/docs/latest/use/getting-started

Prettier

---

$ npm i -D prettier eslint-config-prettier

prettier는 eslint처럼 '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다.
prettier 를 통해서 설정할 수 있는 옵션들은 다음과 같다

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

[prettier] https://prettier.io/docs/en/
[prettier config] https://prettier.io/docs/en/configuration.html

VSCode에서 ESLint, Prettier 설정하기

---

Eslint 는 VsCode editor 에서 사용하기 때문에 extension 과 library 둘다 다운로드해야한다.
위에서 library 다운로드를 완료했다면, 아래 extension 을 다운받도록하자

• eslint
• prettier

이후에 VSCode의 setting.json 파일에 아래 내용을 작성하도록 한다.

{
	...
    // 파일을 저장할 때마다 `eslint` 규칙에 따라 자동으로 코드를 수정
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
    // `prettier`를 기본 포맷터로 지정
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // 파일을 저장할 때마다 포매팅 실행
    "editor.formatOnSave": true,
}

이제 파일을 저장할 때마다 ESLint 규칙에 따라 자동으로 코드가 수정되고 Prettier 설정에 따라 자동으로 파일이 포매팅된다.

[eslint 와 prettier 에 대하여] https://helloinyong.tistory.com/325
[eslint & prettier] https://velog.io/@2wndrhs/%EC%95%8C%EC%95%84%EB%91%90%EB%A9%B4-%EC%93%B8%EB%8D%B0%EC%9E%88%EB%8A%94-ESLint-Prettier-%EC%84%A4%EC%A0%95-%EB%B0%A9%EB%B2%95
[eslint & prettier] https://yrnana.dev/post/2021-03-21-prettier-eslint/