코드 포맷터란?

소스 코드를 성형하는 도구

좋은 환경은 무엇인가 도입되어 있을 것

도입의 장점

검토시에 미세한 지적을하지 않아도된다

소스 코드의 품질을 최소한으로 담보 할 수있다

이 기사에서 소개하지 않는 것

babel 또는 node-sass와 같은 전송 환경을 만지지 않습니다

완성형

최종 내용은 여기 리포지토리에 있습니다.

리포지토리에 대한 링크

소개할 포맷터 목록

Prettier

ESLint

stylelint

소개

작업 디렉토리 작성 및 이동

$ mkdir lint-demo && cd lint-demo

디렉토리 초기화

$ npm init -y

라이브러리 설치

$ yarn add -D prettier eslint stylelint

구성 파일 추가

설정 파일이 없으면 Lint 태스크를 실행할 수 없으므로 설정 파일을 추가합니다.

Prettier

프로젝트의 루트 디렉토리에 .prettierrc 파일 추가

Prettier의 구성 가능한 항목

다음은 설정의 예

{
  "singleQuote": true,
  "trailingComma": "all",
  "htmlWhitespaceSensitivity": "css",
  "printWidth": 120
}

ESLint

Parser 추가

$ yarn add -D babel-eslint

Prettier와 함께 사용하기 위해 다음 패키지 추가

$ yarn add -D eslint-plugin-prettier eslint-config-prettier

Google 권장 설정을 사용하기 위해 다음 패키지 추가

$ yarn add -D eslint-config-google

ESLint의 설정 파일은 package.json에 추가 가능하므로 다음 용도에 기재

package.json

{
  "eslintConfig": {
    "parser": "babel-eslint",
    "env": {
      "browser": true
    },
    "extends": [
      "google",
      "plugin:prettier/recommended"
    ]
  }
}

stylelint

Prettier와 함께 사용하기 위해 다음 패키지 추가

$ yarn add -D stylelint-config-prettier

SCSS에서 사용할 수 있도록 다음 패키지 추가

$ yarn add -D stylelint-scss stylelint-config-recommended-scss

스타일 속성을 정렬할 수 있도록 다음 추가

$ yarn add -D stylelint-order stylelint-config-rational-order

display에 의해 무효가 되는 프로퍼티를 검출하기 위해서, 다음의 plugin를 추가

$ yarn add -D stylelint-declaration-block-no-ignored-properties

다음을 위해 package.json에 추가하면 설정을로드합니다.

package.json

{
  "stylelint": {
    "plugins": [
      "stylelint-declaration-block-no-ignored-properties"
    ],
    "extends": [
      "stylelint-config-rational-order",
      "stylelint-config-recommended-scss",
      "stylelint-config-prettier"
    ],
    "rules": {
      "plugin/declaration-block-no-ignored-properties": true
    }
  }
}

실행 환경 구축

Lint를 실행하려면 npm scripts를 사용합니다.

Lint 용 파일 추가

# ディレクトリの作成
$ mkdir -p src/{scss,html,js}
# 空のファイルを追加
$ touch src/{html/index.html,js/main.js,scss/main.scss}

Git hooks에서 Lint 작업을 수행하기 위해 다음 패키지 도입

$ yarn add -D husky lint-staged

package.json에 다음을 추가

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/html/**/*.html": "prettier --write",
    "src/js/**/*.js": "eslint --fix",
    "src/scss/**/*.scss": "stylelint --fix"
  }
}

이제 Git 커밋을 실행하면 파일에 맞게 Lint 작업이 자동으로 실행됩니다.

레거시 환경을 박멸하는 참고에 이용해 주세요