Stylelint 설정하는 법(feat. node, vue)

이번시간에는 css, scss와 같은 스타일에 규칙을 정의할 수 있는 stylelint를 설정해보았다!
차례로 node환경에서 css, scss를 설정을 하고, 마지막으로 vue에서 scss 설정을 했다.

1. stylelint란?

😉 stylelint는 스타일에 규칙을 적용할 수 있는 lint로, 아래와 같은 장점을 가진다.

• 스타일 오류를 방지할 수 있기에, 스타일이 적용되지 않는 현상이 발생할 확률이 적다.
• 스타일에 규칙을 적용할 수 있으므로, 협업시에 스타일 규정을 하기 좋다.
• 플러그인을 지원하기에, 규칙을 커스터마이징할 수 있다.
• 스타일 단위 테스트를 지원한다.

• 예를 들어 잘못된 형식의 색상을 지정한 경우, stylelint 명령어 실행시 터미널에서 오류를 띄워준다.

.home {
  color: #fffffffff;  
}

---

2. stylelint 설정하기

😉 그렇다면 이 stylelint는 어떻게 설정해야 사용할 수 있는 걸까? node와 vue환경 모두 설정해보았다!

1) Node 환경

(1) CSS로 설정하기

• npm 환경의 프로젝트 설정을 한다.

npm init

• stylelint 관련 패키지를 설치한다.

npm install --save-dev stylelint stylelint-config-standard stylelint-config-prettier

패키지	설명
stylelint	stylint 사용을 위해 설치해야할 기본 패키지이다.
stylelint-config-standard	stylint에서 표준으로 제공하는 규칙에 대한 패키지이다.
stylelint-config-prettier	prettier와 충돌되는 stylelint규칙을 비활성화하는 패키지이다. (만약 prettier를 사용중이라면 설치해주자)

• root 위치에 .stylelintrc.json를 생성하고 설치한 패키지를 extends에 추가한다.

{
  "extends": [
    "stylelint-config-standard", 
    "stylelint-config-prettier"
  ]
}

• 아래 명령어를 사용해 모든 CSS 파일에서 Stylelint를 실행한다.

npx stylelint "**/*.css"

😉 하지만 매번 긴 명령어를 입력하는 건 비효율적이다. package.json에서 script 명령어를 추가하자!

• --ignore-path에 .gitignore파일을 설정하여 불필요한 파일들을 검사하지 않도록 한다.

{
  "scripts": {
    "lint:css": "stylelint --ignore-path .gitignore '**/*.css'",
  },
}

• 이제, 아래 명령어를 입력하여 모든 css파일에 대해서 체크할 수 있다.

npm lint:css

(2) SCSS로 설정하기

• npm 환경의 프로젝트 설정을 한다.

npm init

• stylelint 관련 패키지를 설치한다.

npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-prettier-scss

패키지	설명
stylelint	stylint 사용을 위해 설치해야할 기본 패키지이다.
stylelint-config-standard-scss	stylint에서 표준으로 제공하는 SCSS 규칙에 대한 패키지이다.
stylelint-config-prettier-scss	prettier와 충돌되는 stylelint SCSS규칙을 비활성화하는 패키지이다. (만약 prettier를 사용중이라면 설치해주자)

• root 위치에 .stylelintrc.json를 생성하고 설치한 패키지를 extends에 추가한다.

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-prettier-scss"
  ]
}

• 아래 명령어를 사용해 모든 SCSS 파일에서 Stylelint를 실행한다.

npx stylelint "**/*.scss"

• package.json에 script 명령어를 추가하면 npm lint:scss로 간단히 실행할 수 있다.

{
  "scripts": {
    "lint:scss": "stylelint --ignore-path .gitignore '**/*.scss'",
  },
}

2) Vue 환경 (scss)

Vue환경에서 stylelint를 scss 기준으로 설정해보자!

• test라는 이름의 vue 프로젝트를 생성한다.

vue create test

• stylelint 관련 패키지를 설치한다.

패키지	설명
stylelint	stylint 사용을 위해 설치해야할 기본 패키지이다.
stylelint-config-standard-scss	stylint에서 표준으로 제공하는 SCSS 규칙에 대한 패키지이다.
stylelint-config-recommended-vue	vue에서 stylelint규칙을 사용할 수 있게 해주는 패키지이다.
stylelint-config-prettier-scss	prettier와 충돌되는 stylelint SCSS규칙을 비활성화하는 패키지이다. (만약 prettier를 사용중이라면 설치해주자)

npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-recommended-vue stylelint-config-prettier-scss

• root 위치에 .stylelintrc.json를 생성하고 설치한 패키지를 extends에 추가한다.

{
   "extends" : [
     "stylelint-config-standard-scss" ,
     "stylelint-config-recommended-vue/scss",
     "stylelint-config-prettier-scss"
  ]
}

• .vue, .scss파일에 대해 stylelint를 테스트해야 하므로 script명령어를 아래와 같이 구성한다.

// package.json
{
  "scripts": {
    "lint:style": "stylelint --ignore-path .gitignore '**/*.vue' '**/*.scss'"
  },
}

❓ 그런데 stylelint에는 여러 규칙이 있다는데, 어떻게 규칙을 재정의할 수 있을까? 아래 예시를 보자!

• 아래 예시에서 overrides 부분을 보자
• files에서는 규칙을 적용하고 싶은 대상 파일을 지정할 수 있다.
• rules에서는 재정의하고 싶은 규칙명과 정의 범위를 작성하면 된다.
• 현재 적용된 규칙은, 허용 가능한 단위(unit)을 em, rem, s로 제한한 룰이다.

// .stylelintrc.json

{
  "extends" : [
    "stylelint-config-standard-scss" ,
    "stylelint-config-recommended-vue/scss",
    "stylelint-config-prettier-scss"
  ],
  "overrides": [
      {
        "files": ["*.vue", "**/*.vue"],
        "rules": {
          "unit-allowed-list": ["em", "rem", "s"]
        }
      }
    ]
}

• 명령어를 입력해보면,

npm run lint:css

• 아래와 같이 터미널에서 규칙에 어긋나는 경우를 보여준다.

➕ (덧) Stylelint에서 제공하는 stylelint.vscode-stylelint 확장자가 있다!

• 확장자는 기본적으로 *.vue 파일을 검사하지 않기에 .vue 파일을 검사하고 싶다면, 확장자의 stylelint.validate 옵션을 수정해줘야 한다.

// vscode/settings.json
{
  "stylelint.validate": [
      "vue"  // 추가
  ]