[Linter] Stylelint

2022-06-12 hit count image

Stylelint를 사용하여 CSS, SCSS 파일의 코드 스타일과 CSS-in-JS의 코드 스타일을 검사해 봅시다.

개요

웹 개발을 하면, 웹의 스타일을 관리하기 위해 CSS(Cascading Style Sheets)를 사용하게 됩니다. 이번 블로그 포스트에서는 Stylelint를 사용하여 CSS, SCSS, CSS-in-JS의 코드 스타일을 검사해 보도록 하겠습니다.

여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다.

Node 설치

Stylelint를 사용하기 위해서는 Node를 설치할 필요가 있습니다. 각각의 OS에 맞게 Node를 설치합니다.

macOS

Homebrew는 맥에서 패키지를 설치하고 관리할 수 있는 맥용 패키지 관리자입니다. Homebrew를 통해 맥에 필요한 패키지를 간단하게 설치할 수 있다. 다음 명령어를 실행하여 Homebrew를 설치합니다.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

설치가 완료되었다면, 다음 명령어를 실행하여 잘 설치되었는지 확인합니다.

brew --version

만약 버전이 표시되지 않는다면, 터미널을 종료하고, 다시 실행시킵니다. 이미 Homebrew가 설치된 분들은 다음 명령어를 실행하여 Node를 설치합니다.

brew install node

Windows

윈도우에는 Chocolatey라는 패키지 매니저를 사용합니다. 관리자 권한으로 실행된 명령어 프롬프트 또는 파워쉘을 열고 다음 명령어를 실행하여 Chocolatey를 설치합니다.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

설치가 완료되었다면, 다음 명령어를 실행하여, 설치가 잘 되었는지 확인합니다.

choco –version

Chocolatey의 버전이 표시되지 않는다면, 명령어 프롬프트 또는 파워쉘을 종료하고 다시 실행시킵니다. Chocolatey가 설치되었다면, 다음 명령어를 실행하여 Node를 설치합니다.

choco install -y nodejs.install

CSS를 위한 Stylelint

CSS 파일을 검사하기 위해 Stylelint를 설치하고 사용하는 방법에 대해서 살펴보도록 하겠습니다.

CSS를 위한 Stylelint의 package.json 생성

Stylelint는 Node 개발 환경에서 동작합니다. 따라서 노드 패키지를 관리하기 위해 package.json 파일을 생성할 필요가 있습니다. 다음 명령어를 사용하여 package.json 파일을 생성합니다.

npm init

명령어를 실행하면 다음과 같이 여러 질문들이 나옵니다. 특별히 변경하고 싶은 내용이 없다면 모든 질문에 Enter키를 입력합니다.

package name: (stylelint-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

그럼 다음과 같이 package.json 파일이 생성되는 것을 확인할 수 있습니다.

{
  "name": "stylelint-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

CSS를 위한 Stylelint 설치

Stylelint를 사용하여 CSS를 검사하고 싶으신 분들은 다음 명령어를 사용하여 Stylelint와 추가로 필요한 라이브러리를 설치합니다.

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

CSS를 위한 Stylelint 설정

이렇게 설치한 Stylelint를 사용하기 위해 .stylelintrc.json 파일을 생성하고 다음과 같이 수정할 필요가 있습니다.

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

CSS를 위한 Stylelint 실행 스크립트

Stylelint를 사용하여 모든 CSS 파일을 검사하기 위해 package.json 파일을 다음과 같이 수정합니다.

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

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

CSS를 위한 Stylelint 실행

다음으로 Stylelint가 잘 실행되는지 확인하기 위해 test.css 파일을 생성하고 다음과 같이 수정합니다.

h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

그런 다음, 다음 명령어를 실행하여, Stylelint가 잘 실행되는지 확인해 봅니다.

npm run lint:css

Stylelint가 잘 설치되고 설정되었다면, 다음과 같은 경고를 확인할 수 있습니다.

test.css
 2:3  ✖  Unexpected longhand value '0 0 1rem 0' instead of '0 0 1rem'  shorthand-property-no-redundant-values

test.css 파일을 다음과 같이 수정하고, Stylelint를 실행하면, 문제가 해결되는 것을 확인할 수 있습니다.

h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

SCSS를 위한 Stylelint

SCSS 파일을 검사하기 위해 Stylelint를 설치하고 사용하는 방법에 대해서 살펴보도록 하겠습니다.

SCSS를 위한 Stylelint의 package.json 생성

Stylelint는 Node 개발 환경에서 동작합니다. 따라서 노드 패키지를 관리하기 위해 package.json 파일을 생성할 필요가 있습니다. 다음 명령어를 사용하여 package.json 파일을 생성합니다.

npm init

명령어를 실행하면 다음과 같이 여러 질문들이 나옵니다. 특별히 변경하고 싶은 내용이 없다면 모든 질문에 Enter키를 입력합니다.

package name: (stylelint-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

그럼 다음과 같이 package.json 파일이 생성되는 것을 확인할 수 있습니다.

{
  "name": "stylelint-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

SCSS를 위한 Stylelint 설치

Stylelint를 사용하여 SCSS를 검사하고 싶으신 분들은 다음 명령어를 사용하여 Stylelint와 추가로 필요한 라이브러리를 설치합니다.

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

SCSS를 위한 Stylelint 설정

이렇게 설치한 Stylelint를 사용하기 위해 .stylelintrc.json 파일을 생성하고 다음과 같이 수정할 필요가 있습니다.

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

SCSS를 위한 Stylelint 실행 스크립트

Stylelint를 사용하여 모든 SCSS 파일을 검사하기 위해 package.json 파일을 다음과 같이 수정합니다.

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

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

SCSS를 위한 Stylelint 실행

다음으로 Stylelint가 잘 실행되는지 확인하기 위해 test.scss 파일을 생성하고 다음과 같이 수정합니다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

그런 다음, 다음 명령어를 실행하여, Stylelint가 잘 실행되는지 확인해 봅니다.

npm run lint:css

Stylelint가 잘 설치되고 설정되었다면, 다음과 같은 경고를 확인할 수 있습니다.

test.scss
 1:14  ✖  Expected "Helvetica" to be "helvetica"  value-keyword-case

test.scss 파일을 다음과 같이 수정하고, Stylelint를 실행하면, 문제가 해결되는 것을 확인할 수 있습니다.

$font-stack: helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

CSS-in-JS를 위한 Stylelint

저는 주로 React를 사용하여 개발을 하고 있으며 MUICSS-in-JS 라이브러리인 Emotion을 사용하여 스타일링을 하고 있습니다.

Stylelint를 사용하여 CSS-in-JS의 스타일을 검사하는 방법에 대해서 살펴보도록 하겠습니다.

프로젝트 준비

Stylelint를 사용하여 CSS-in-JS의 스타일 검사를 하기 위해 CRA(create-react-app)를 사용하여 샘플 프로젝트를 생성해 보도록 하겠습니다. CRA를 설치하거나 CRA를 사용하여 React 프로젝트를 생성하는 방법에 대한 자세한 내용은 이전 블로그를 참고하시기 바랍니다.

다음 명령어를 사용하여 React 프로젝트를 생성합니다.

npx create-react-app stylelint-example --template typescript

다음 명령어를 사용하여 EmotionMUI를 설치합니다.

npm install --save @mui/material @emotion/react @emotion/styled

그리고 CSS-in-JS를 사용하여 스타일링을 하기 위해, ./src/App.tsx 파일을 열고 다음과 같이 수정합니다.

import styled from '@emotion/styled';

const Title = styled.h2`
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
`;

function App() {
  return (
    <div>
      <Title>Learn React</Title>
    </div>
  );
}

export default App;

CSS-in-JS를 위한 Stylelint 설치

Stylelint를 사용하여 CSS-in-JS를 검사하고 싶으신 분들은 다음 명령어를 사용하여 Stylelint와 추가로 필요한 라이브러리를 설치합니다.

npm install --save-dev stylelint stylelint-config-standard stylelint-config-prettier postcss-syntax @stylelint/postcss-css-in-js

CSS-in-JS를 위한 Stylelint 설정

이렇게 설치한 Stylelint를 사용하기 위해 .stylelintrc.json 파일을 생성하고 다음과 같이 수정할 필요가 있습니다.

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ],
  "rules": {
    "function-no-unknown": [true, { "ignoreFunctions": ["/\\${/"] }]
  }
}

CSS-in-JS를 위한 Stylelint 실행 스크립트

Stylelint를 사용하여 모든 CSS-in-JS 파일을 검사하기 위해 package.json 파일을 다음과 같이 수정합니다.

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

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

CSS-in-JS를 위한 Stylelint 실행

이제, 다음 명령어를 실행하여, Stylelint가 잘 실행되는지 확인해 봅니다.

npm run lint:css

Stylelint가 잘 설치되고 설정되었다면, 다음과 같은 경고를 확인할 수 있습니다.

src/App.css
  1:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
  5:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 11:3   ✖  Expected class selector to be kebab-case  selector-class-pattern
 16:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 27:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 31:12  ✖  Expected keyframe name to be kebab-case   keyframes-name-pattern
 35:3   ✖  Expected empty line before rule           rule-empty-line-before

src/App.tsx
 4:3  ✖  Unexpected longhand value '0 0 1rem 0' instead of '0 0 1rem'  shorthand-property-no-redundant-values

src/index.css
 3:64  ✖  Unexpected quotes around "Roboto"     font-family-name-quotes
 3:74  ✖  Unexpected quotes around "Oxygen"     font-family-name-quotes
 4:6   ✖  Unexpected quotes around "Ubuntu"     font-family-name-quotes
 4:16  ✖  Unexpected quotes around "Cantarell"  font-family-name-quotes

다른 파일들에도 문제가 검출되지만 우리가 수정한 ./src/App.tsx 파일에서 StylelintCSS를 검출했을 때와 동일한 에러가 발생하는 것을 확인할 수 있습니다. 이를 통해, 우리가 설정한 내용이 잘 적용되는 것을 확인할 수 있습니다.

./src/App.tsx 파일을 다음과 같이 수정하고, Stylelint를 실행하면, 해당 파일의 문제가 해결되는 것을 확인할 수 있습니다.

import styled from '@emotion/styled';

const Title = styled.h2`
  margin: 0 0 1rem;
  font-size: 1.5rem;
`;

function App() {
  return (
    <div>
      <Title>Learn React</Title>
    </div>
  );
}

export default App;

완료

이것으로 Stylelint를 사용하여 CSS/SCSS와 같은 스타일 파일의 내용을 검사하는 방법에 대해서 알아보았습니다. 또한, styled-components/Emotion과 같은 CSS-in-JS 스타일도 검사하는 방법에 대해서 살펴보았습니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts