코드 품질을 유지하는 것은 웹 퍼블리싱에서 필수적인 요소입니다. 특히, HTML과 CSS는 개발자마다 스타일이 다를 수 있어 코드 일관성을 유지하기 어려울 수 있습니다. 이를 해결하기 위해 린팅(Linting) 도구를 활용하면 코드의 오류를 사전에 방지하고, 일관된 스타일을 유지할 수 있습니다. 이번 글에서는 HTML & CSS 코드 품질을 높이는 대표적인 린팅 도구인 Stylelint, ESLint, Prettier를 설정하고 적용하는 방법을 살펴봅니다.
1. 린팅(Linting)이란?
린팅(Linting)이란 코드의 문법 오류, 스타일 규칙 위반, 잠재적 버그를 자동으로 감지하는 과정을 의미합니다.
✅ 린팅(Linting)을 적용하면 얻을 수 있는 이점:
- 문법 오류 감지: 잘못된 코드 작성 방지
- 일관된 스타일 유지: 팀원 간 코드 스타일 통일
- 가독성 향상: 코드 품질을 유지하면서 유지보수 용이
HTML & CSS에서는 Stylelint, ESLint, Prettier와 같은 도구를 활용하면 코드 품질을 유지하는 데 효과적입니다.
2. Stylelint를 활용한 CSS 코드 품질 유지
📌 Stylelint란?
Stylelint는 CSS, SCSS, LESS 코드의 스타일 및 문법을 검사하는 린터입니다.
잘못된 속성 사용, 중복 스타일, 불필요한 코드를 감지하여 유지보수성을 높일 수 있습니다.
🔧 Stylelint 설치 및 설정
1️⃣ Stylelint 설치
npm install --save-dev stylelint stylelint-config-standard
stylelint-config-standard는 일반적인 CSS 코딩 스타일을 적용하는 기본 설정입니다.
2️⃣ 설정 파일 생성 (.stylelintrc.json)
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 2,
"string-quotes": "double",
"color-no-invalid-hex": true}
}
✅ 주요 규칙 설명:
indentation: 2→ 들여쓰기는 2칸(space)string-quotes: "double"→ 문자열은 큰따옴표 사용color-no-invalid-hex: true→ 올바르지 않은 색상 코드 방지
3️⃣ VSCode에서 Stylelint 적용
- VSCode 확장 프로그램 → “Stylelint” 플러그인 설치
stylelint명령어 실행
npx stylelint "**/*.css"`
🔍 코드에 문제가 있으면 터미널에서 경고 메시지가 표시됩니다.
3. ESLint를 활용한 HTML 내 스크립트 코드 검증
📌 ESLint란?
ESLint는 JavaScript 코드의 문법 오류 및 스타일 규칙을 검사하는 도구입니다.
HTML 파일 내 <script> 태그에 포함된 JavaScript 코드도 ESLint로 검사할 수 있습니다.
🔧 ESLint 설치 및 설정
1️⃣ ESLint 설치
npm install --save-dev eslint eslint-plugin-html
eslint-plugin-html 플러그인을 사용하면 HTML 파일 내 JavaScript 코드도 분석 가능합니다.
2️⃣ 설정 파일 생성 (.eslintrc.json)
{
"extends": "eslint:recommended",
"plugins": ["html"],
"env": {
"browser": true,
"es6": true},
"rules": {
"no-unused-vars": "warn",
"no-console": "off",
"semi": ["error", "always"]
}
}
✅ 주요 규칙 설명:
no-unused-vars: "warn"→ 사용되지 않는 변수 경고no-console: "off"→console.log사용 가능semi: ["error", "always"]→ 세미콜론 필수 사용
3️⃣ ESLint 실행
npx eslint "**/*.js"`
🔍 HTML 내 <script> 태그에 포함된 JavaScript 코드도 자동으로 검사됩니다.
4. Prettier로 자동 코드 포맷팅 적용
📌 Prettier란?
Prettier는 코드 스타일을 자동으로 정리해주는 포맷터(formatter) 입니다.
Stylelint나 ESLint가 코드 오류를 잡는 역할을 한다면, Prettier는 코드의 가독성을 높이고 일관된 스타일을 유지하는 역할을 합니다.
🔧 Prettier 설치 및 설정
1️⃣ Prettier 설치
npm install --save-dev prettier
2️⃣ 설정 파일 생성 (.prettierrc.json)
{
"singleQuote": false,
"semi": true,
"tabWidth": 2,
"printWidth": 80
}
✅ 주요 설정 설명:
singleQuote: false→ 작은따옴표 대신 큰따옴표 사용semi: true→ 세미콜론 필수 사용tabWidth: 2→ 들여쓰기 2칸printWidth: 80→ 80자 이상 넘지 않도록 자동 줄바꿈
3️⃣ Prettier 실행
npx prettier --write "**/*.{html,css,js}"`
🔍 실행하면 HTML, CSS, JavaScript 코드가 자동으로 정리됩니다.
5. VSCode에서 린팅(Linting) & 포맷팅 자동화 설정
📌 VSCode 확장 프로그램 설치
✅ 다음 확장 프로그램을 설치하면 코드 작성 시 실시간으로 오류를 감지하고 포맷팅할 수 있습니다.
🔹 Stylelint → CSS 오류 감지
🔹 ESLint → JavaScript 코드 오류 감지
🔹 Prettier → 자동 코드 정리
🔧 VSCode 설정 (settings.json)
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.validate": ["javascript", "html"],
"stylelint.validate": ["css", "scss"]
}
✅ formatOnSave: true를 설정하면 파일 저장 시 자동으로 코드 스타일을 정리해 줍니다.
🔹 Stylelint → CSS 스타일 검증 및 오류 감지
🔹 ESLint → JavaScript 코드 스타일 유지
🔹 Prettier → 코드 자동 정리 및 일관성 유지
위 도구들을 설정하면 HTML & CSS 코드 품질을 높이고 유지보수를 쉽게 할 수 있습니다.
특히 VSCode와 연동하면 실시간으로 코드 검토가 가능하므로 웹 퍼블리싱 작업의 효율성이 극대화됩니다.
린팅(Linting) 도구를 활용하여 더 깨끗하고 효율적인 코드를 작성해 보세요! 🚀
