CSS 및 기준에 대한 지원이 ESLint에 포함됨

Jeremy Wagner

게시일: 2025년 3월 12일

ESLint는 오랫동안 JavaScript에 선호되는 린터로, 개발자가 프로젝트에서 JavaScript의 좋은 스타일을 적용하는 데 도움이 되는 다양한 설정과 규칙을 제공합니다. 최근 ESLint는 프로젝트에서 CSS 린팅을 지원하여 스타일시트의 측면을 검사하는 추가 규칙을 제공했습니다.

CSS 지원 출시의 일환으로 이제 ESLint에서 require-baseline 규칙을 제공합니다. 이 규칙을 사용하면 프로젝트에서 CSS를 린트할 때 사용할 기준점 임곗값을 지정할 수 있습니다. 이 빠른 도움말에서는 이 규칙을 사용하여 CSS가 신규 및 광범위하게 사용 가능한 기준점 기준을 충족하는지 확인하는 방법을 알아봅니다.

ESLint를 사용하여 기준 CSS 기능을 적용하는 방법

이전에 ESLint를 사용한 적이 있다면 프로젝트에 CSS 린팅을 추가하는 과정이 상당히 빠를 것입니다. 시작하려면 프로젝트에 @eslint/css 패키지를 설치합니다.

npm install @eslint/css --save-dev

설치가 완료되면 @eslint/css 패키지를 기존 ESLint 구성으로 가져와 프로젝트에 CSS 린팅 지원을 추가할 수 있습니다.

// eslint.config.js
import css from "@eslint/css";

export default [
  // Lint css files
  {
    files: ["src/css/**/*.css"],
    plugins: {
      css,
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to ensure they are using
      // only Baseline Widely available features:
      "css/require-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
];

CSS 린팅은 그 자체로 유용하지만 ESLint가 제공하는 추가 가치는 린터의 require-baseline 규칙을 통해 얻을 수 있습니다. 위의 코드 스니펫에서는 기준이 광범위하게 제공되지 않는 기능이 발견될 때마다 경고가 생성됩니다. 이는 규칙의 available 속성을 통해 지정되며, 이 속성은 사용되는 모든 CSS 기능이 최소한 기준 최신 버전임을 보장하기 위해 "newly" 값도 허용합니다.

구성을 설정하면 다음과 같이 프로젝트 루트에서 ESLint를 실행하여 프로젝트의 CSS를 린트할 수 있습니다.

npx eslint

완료되면 ESLint에서 프로젝트의 CSS에 관한 경고를 표시합니다. 경고는 다음과 같이 표시됩니다.

/var/www/my-cool-web-project/src/css/styles.css
  269:3   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline
  427:3   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline
  444:12  warning  Value 'contents' of property 'display' is not a widely available baseline feature  css/require-baseline
  500:3   warning  Property 'resize' is not a widely available baseline feature                       css/require-baseline
  573:5   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline

ESLint에서 이 기능을 제공하면 ESLint를 사용하는 모든 도구 워크플로에서 이 기능을 사용할 수 있다는 큰 이점이 있습니다. 예를 들어 webpack을 사용하는 경우 eslint-webpack-plugin를 사용하여 프로젝트 빌드 중에 린터 출력을 표시할 수 있습니다.

// Import the ESLint plugin:
import ESLintPlugin from "eslint-webpack-plugin";

// Webpack config:
export default {
  // Prior config code omitted...
  plugins: [
    new ESLintPlugin({
      // Add the `"css"` extension to ensure
      // CSS files are linted as well:
      extensions: ["js", "css"]
    })
  ]
};

ESLint에 이러한 유용한 새 기능이 추가되어 이제 별도의 노력 없이 프로젝트에서 기준 CSS 기능을 사용할 수 있습니다. 도전해 보세요. 프로젝트에 사용된 일부 기준점 기능을 확인하고 놀라실 수도 있습니다. 작동 방식에 관한 자세한 내용은 require-baseline 규칙 문서를 참고하세요.