StyleLint WebStorm에서 저장할 때 적용하기

✅ 이 글은 다음을 다룬다.

• StyleLint가 무엇이고 왜 적용하는지
• 프로젝트에 StyleLint를 적용하는 방법
• WebStorm, InteliJ 환경에서 저장 시마다 StyleLint를 적용하는 방법

StyleLint는 무엇이고 적용하면 뭐가 좋을까?

StyleLint는 스타일에 컨벤션을 강제하고 에러를 피할 수 있게 도와주는 툴이다.

스타일 관련 코드가 많아질 수록 스타일이 중구난방이 되고 사실은 동작하지 않고 있는 코드들이 생길 수 있다.

WeView 팀도 스타일 코드의 컨벤션을 지키고 역할을 하지 않고 있는 코드를 개발하는 시점에 잡아내기 위해 StyleLint를 적용하였다. 그러면 이제 본격적으로 적용해보자!

stylelint적용하고 plugin 적용하기

stylelint를 설치하자.

npm install --save-dev stylelint

관련한 플러그인들 설치

npm install --save-dev stylelint-config-prettier stylelint-config-recess-order stylelint-config-sass-guidelines

stylelint-config-prettier : prettier 설정과 충돌방지

stylelint-config-recess-order : 스타일 코드 블럭에서 순서 설정

stylelint-config-sass-guidelines: sass guideline 컨벤션을 설정

.stylelintrc.json 에 StyleLint 적용을 위한 설정

{
  "plugin": ["stylelint-prettier"],
  "rules": {
    "selector-class-pattern": null
  },
  "extends": [
    "stylelint-config-sass-guidelines",
    "stylelint-config-prettier",
    "stylelint-prettier/recommended",
    "stylelint-config-recess-order"
  ]
}

WebStorm에서 자동 적용 설정하기

1. Preferences로 들어간다.

Webstorm Preferences

2. Tools / Actions on Save로 들어간다.

preferences -> Actions on Save

3. File Watcher에 edit을 클릭하여 커스텀 File Watcher를 만든다.

edit -> 커스텀 설정

Program은 저장시에 동작할 프로그램 파일이다.

stylelint를 install하면 node_modules/stylelint/bin/stylelint.js 가 설치되는데 이를 등록해주면 된다.

그리고 stylelint —fix가 저장할때 동작하도록 arguments에 적어주면 된다.

그리고 OK 후에 체크 하면 적용이 완료된다.

완료된 Actions On Save