webpack - lint,prettier

배경

코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)

EsLint

개념

코드의 가독성을 높이고 잠재적인 오류와 버그를 제거

검사 항목

• 포맷팅
  • 일관된 코드 스타일
• 코드 품질
  • 어플리케이션의 잠재적인 오류나 버그 예방

설치 및 사용법

npm i -D eslint

Rules

문서의 Rules 메뉴에서 규칙 목록을 확인

규칙에 설정하는 값은 세 가지다. "off"나 0은 끔, "warn"이나 1은 경고, "error"나 2는 오류.

설정한 규칙에 어긋나는 코드를 발견하면 오류를 출력

.eslintrc.js

module.exports = {
  rules: {
    "no-unexpected-multiline": "error",
    "no-extra-semi": "error",
  },
};

• 추천 옵션 적용

.eslintrc.js

module.exports = {
  extends: [
    "eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
  ],
};

초기화

npx eslint --init

Prettier

설치 및 사용법

npm i -D prettier

prettier 검사

• —write 옵션은 파일을 재작성

npx prettier app.js --write

통합방법

npm i -D eslint-config-prettier

.eslintrc.js

module.exports = {
  extends: [
    "eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
    "eslint-config-prettier", // prettier와 충돌하는 옵션 끄기
  ],
};

eslint-plugin-prettier는 프리티어 규칙을 ESLint 규칙으로 추가하는 플러그인이다. 프리티어의 모든 규칙이 ESLint로 들어오기 때문에 ESLint만 실행

npm i -D eslint-plugin-prettier

.eslintrc.js

module.exports = {
  extends: [
    "eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
    "eslint-config-prettier",
  ],
  plugins: ["prettier"], // 플러그인 추가
  rules: {
    "prettier/prettier": "error",
  },
};

.eslintrc.js

module.exports = {
  extends: [
    "eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
    "plugin:prettier/recommended", // prettier 단순 설정
  ],
};

자동화

husky

커밋 전, 푸시 전 등 깃 커맨드 실행 시점에 끼여들수 있는 훅을 제공한다.

husky는 깃 훅을 쉽게 사용할 수 있는 도구이다.

npm i -D husky

package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "eslint app.js --fix"
    }
  }
}

스테이징된 파일만 린트 수행

npm i -D lint-staged

package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix"
  }
}

※ 출저

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/dashboard

yarn berry 활성화

yarn set version berry
yarn init
yarn plugin import typescript
yarn

yarn plugin import typscript

자체 types를 포함하지 않는 패키지를 추가할 때 @types 패키지를 package.json폴더에 종속성으로 자동으로 추가

Workspace 구성

root 디렉토리의 package.json 파일 수정

• packages 디렉토리 하위의 모든 디렉토리를 패키지로 봄

{
  "workspaces": ["packages/*"]
}

typescript, eslint, prettier 설치

yarn add -D typescript prettier eslint

vs code 세팅

yarn dlx @yarnpkg/sdks vscode

하위 패키지(workspace)만들기

mkdir packages

typescript config

tsconfgi.json

* next js의 기본 옵션을 사용함

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "references": [
    {
      "path": "packages/components"
    }
  ],
  "include": [],
  "exclude": ["node_modules"]
}

prettier config

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 200,
  "endOfLine": "auto",
  "arrowParens": "avoid",
  "bracketSpacing": true
}

eslint config 생략

최종 구조