<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/code_quality">code_quality</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/code_quality/stylelint/v15/">[Code Quality] Stylelint V15</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li><li><a href="#css%EB%A5%BC-%EC%9C%84%ED%95%9C-stylelint">CSS를 위한 Stylelint</a></li><li><a href="#scss%EB%A5%BC-%EC%9C%84%ED%95%9C-stylelint">SCSS를 위한 Stylelint</a></li><li><a href="#css-in-js%EB%A5%BC-%EC%9C%84%ED%95%9C-stylelint">CSS-in-JS를 위한 Stylelint</a></li><li><a href="#stylelint-order">stylelint-order</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2>웹 개발을 하면, 웹의 스타일을 관리하기 위해 CSS(Cascading Style Sheets)를 사용하게 됩니다. 이번 블로그 포스트에서는 <code>Stylelint</code>를 사용하여 CSS, SCSS 와 CSS-in-JS의 코드 스타일을 검사해 보도록 하겠습니다.<ul><li><a href="https://stylelint.io/" rel="noopener" target="_blank">Stylelint</a></li></ul><h2 id="css를-위한-stylelint">CSS를 위한 Stylelint</h2><code>Stylelint</code>을 사용하여 <code>CSS</code> 파일안의 스타일 내용을 검사할 수 있습니다. <code>CSS</code> 파일안의 스타일을 검사하기 위해 다음 명령어를 실행하여 <code>Stylelint</code>를 설치합니다.<div><pre><code>npm install --save-dev stylelint stylelint-config-standard
</code></pre></div>이렇게 설치한 <code>Stylelint</code>를 사용하기 위해 <code>.stylelintrc.json</code> 파일을 생성하고 다음과 같이 수정할 필요가 있습니다.<div><pre><code>{
 "extends": "stylelint-config-standard"
}
</code></pre></div><code>Stylelint</code>의 설치와 설정이 끝났다면, 다음 명령어를 실행하여 <code>CSS</code> 파일의 내용을 검사할 수 있습니다.또는 다음과 같이 <code>package.json</code> 파일을 수정하여 <code>Stylelint</code>를 실행하는 명령어를 만들 수 있습니다.<div><pre><code>{
 ...
 "scripts": {
 ...
 "lint:css": "stylelint --ignore-path .gitignore '**/*.css'"
 },
 ...
}
</code></pre></div>이렇게 만든 <code>lint:css</code> 명령어는 다음과 같이 실행할 수 있습니다.<h2 id="scss를-위한-stylelint">SCSS를 위한 Stylelint</h2><code>Stylelint</code>을 사용하여 <code>SCSS</code> 파일안의 스타일 내용을 검사할 수 있습니다. <code>SCSS</code> 파일안의 스타일을 검사하기 위해 다음 명령어를 실행하여 <code>Stylelint</code>를 설치합니다.<div><pre><code>npm install --save-dev stylelint stylelint-config-standard-scss
</code></pre></div>이렇게 설치한 <code>Stylelint</code>를 사용하기 위해 <code>.stylelintrc.json</code> 파일을 생성하고 다음과 같이 수정할 필요가 있습니다.<div><pre><code>{
 "extends": "stylelint-config-standard-scss"
}
</code></pre></div><code>Stylelint</code>의 설치와 설정이 끝났다면, 다음 명령어를 실행하여 <code>SCSS</code> 파일의 내용을 검사할 수 있습니다.<div><pre><code>npx stylelint "**/*.scss"
</code></pre></div>또는 다음과 같이 <code>package.json</code> 파일을 수정하여 <code>Stylelint</code>를 실행하는 명령어를 만들 수 있습니다.<div><pre><code>{
 ...
 "scripts": {
 ...
 "lint:css": "stylelint --ignore-path .gitignore '**/*.scss'"
 },
 ...
}
</code></pre></div>이렇게 만든 <code>lint:css</code> 명령어는 다음과 같이 실행할 수 있습니다.<h2 id="css-in-js를-위한-stylelint">CSS-in-JS를 위한 Stylelint</h2><code>Stylelint</code>을 사용하여 <code>JS(JavaScript)</code> 파일안의 스타일 내용을 검사할 수 있습니다. <code>JS</code> 파일안의 스타일을 검사하기 위해 다음 명령어를 실행하여 <code>Stylelint</code>를 설치합니다.<div><pre><code>npm install --save-dev stylelint stylelint-config-standard postcss-styled-syntax
</code></pre></div>이렇게 설치한 <code>Stylelint</code>를 사용하기 위해 <code>.stylelintrc.json</code> 파일을 생성하고 다음과 같이 수정할 필요가 있습니다.<div><pre><code>{
 "extends": "stylelint-config-standard",
 "customSyntax": "postcss-styled-syntax",
}
</code></pre></div><code>Stylelint</code>의 설치와 설정이 끝났다면, 다음 명령어를 실행하여 <code>JS</code> 파일의 내용을 검사할 수 있습니다.<div><pre><code>npx stylelint "**/*.(css|tsx)"
</code></pre></div>또는 다음과 같이 <code>package.json</code> 파일을 수정하여 <code>Stylelint</code>를 실행하는 명령어를 만들 수 있습니다.<div><pre><code>{
 ...
 "scripts": {
 ...
 "lint:css": "stylelint --ignore-path .gitignore '**/*.(css|tsx)'"
 },
 ...
}
</code></pre></div>이렇게 만든 <code>lint:css</code> 명령어는 다음과 같이 실행할 수 있습니다.<h2 id="stylelint-order">stylelint-order</h2><code>CSS</code>를 작성할 때, 스타일의 속성(Property)의 순서는 작성할 때마다 다른 경우가 많습니다. 이때, <code>stylelint-order</code>를 사용하면 <code>CSS</code>의 속성을 알파벳순으로 정렬할 수 있습니다.<ul><li>stylelint-order: <a href="https://github.com/hudochenkov/stylelint-order" rel="noopener" target="_blank">https://github.com/hudochenkov/stylelint-order</a></li></ul><code>stylelint-order</code>를 사용하기 위해서는 다음 명령어를 사용하여 <code>stylelint-order</code>를 설치합니다.<div><pre><code>npm install stylelint-order --save-dev
</code></pre></div>그런 다음 <code>.stylelintrc.json</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>{
 "extends": ["stylelint-config-standard"],
 "customSyntax": "postcss-styled-syntax",
 "plugins": ["stylelint-order"],
 "rules": {
 "order/properties-alphabetical-order": true
 }
}
</code></pre></div>이제 다음 명령어를 실행하면 <code>Stylelint</code>가 스타일의 속성이 알파벳순이 아닌 경우 에러를 발생시키는 것을 알 수 있습니다.<h2 id="완료">완료</h2>이것으로 <code>Stylelint</code>를 사용하여 CSS, SCSS 파일의 스타일 내용을 검사하는 방법에 대해서 알아보았습니다. 또한, <code>styled-components</code>, <code>Emotion</code>과 같은 <code>CSS-in-JS</code> 형식의 스타일도 검사하는 방법에 대해서 살펴보았습니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

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