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

Jeremy Wagner

게시: 2025년 3월 12일, 최종 업데이트: 2025년 3월 26일

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

CSS 지원 출시의 일환으로 ESLint는 이제 프로젝트에서 CSS를 린팅할 때 사용할 Baseline 기준점을 지정할 수 있는 require-baseline 규칙을 제공합니다. 이 빠른 게시물에서는 이 규칙을 사용하여 CSS가 Baseline Newly available 및 Widely available 기준점을 충족하는지 확인하는 방법을 알아봅니다.

ESLint를 사용하여 Baseline CSS 기능 적용

이전에 ESLint를 사용한 적이 있다면 프로젝트에 CSS 린팅을 추가하는 프로세스가 비교적 빠를 것입니다. 시작하려면 프로젝트에 @eslint/css 패키지를 설치하세요.

npm install @eslint/css --save-dev

설치가 완료되면 기존 ESLint 구성에 @eslint/css 패키지를 가져와 프로젝트에 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 규칙을 통해 제공됩니다. 이전 코드 스니펫에서는 Baseline Widely available이 아닌 기능이 발견될 때마다 경고가 생성됩니다. 이는 규칙의 available 속성을 통해 지정되며, 사용된 모든 CSS 기능이 최소한 Baseline Newly available인지 확인하기 위해 "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에 유용한 새로운 기능이 추가됨에 따라 이제 많은 노력을 기울이지 않고도 프로젝트에서 Baseline CSS 기능을 사용하도록 할 수 있습니다. 도전해 보세요. 프로젝트에서 사용되는 일부 Baseline 기능을 발견하고 놀랄 수도 있습니다. 작동 방식에 관한 자세한 내용은 require-baseline 규칙 문서를 참고하세요.