lint 설정하기

개요

• 코드스타일 통일을 위해 rule을 추가
• vscode에서 eslint나 prettier가 제대로 동작하지 않는 경우가 발생하였고 이를 해결하는 방법에 대해 알아보자
• lint 적용 방법에 대해 간단한 정리

  eslint

eslint vscode에서 동작이 제대로 되지 않는 경우

• setting.json에 코드 추가
  • Ctrl + shift + p 를 눌러 setting(JSON) 파일 실행

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

    참고링크https://feynubrick.github.io/2019/05/20/eslint-prettier.html

prettier

prettier 규칙 만들기

1. prettierrc 파일 생성
2. 필요한 Dependencies 추가
   • prettier
   • eslint-config-prettier
3. eslint extends에 prettier 추가

   {
   "arrowParens": "avoid",
   "bracketSpacing": true,
   "jsxSingleQuote": false,
   "printWidth": 120,
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all",
   "useTabs": false
   }

4. prettier가 제대로 동작하지 않는경우

VSCODE -> View -> Command Palette 
format document 타이핑

configure default formmater
prettier 선택

CTRL + S를 눌렀을 때 변화가 생기면 제대로 동작함을 알 수 있다.

참고 링크

https://stackoverflow.com/questions/52586965/why-does-prettier-not-format-code-in-vs-code

husky & lint-staged

husky

git hook을 조작하기 위한 라이브러리

lint-staged

lint 관련 에러를 찾고 수정한다.

설치

// 4버전으로 고정을 해야 제대로 동작
yarn add -D husky@4.0.6

// lint-staged 설치
yarn add -D lint-staged

style-lint 추가

scss style을 위한 .stylelintrc 추가

링크: https://stylelint.io/user-guide/get-started

package.json에 husky, lint-staged 설정 추가

• pre-commit(commit 이전) 단계에서 lint 관련 에러를 수정한다.
• husky를 통해 git hook을 조작한다.

dependencies 추가

...
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.scss": [
      "stylelint --fix --syntax scss"
    ]
  }