O suporte para CSS e a linha de base foi enviado em Eslint

Fique organizado com coleções

Salvar e categorizar o conteúdo com base em suas preferências.

Publicado: 12 de março de 2025

Eslint há muito é o linhador preferido para JavaScript, oferecendo uma variedade de configurações e regras que ajudam os desenvolvedores a aplicar um bom estilo para JavaScript em seus projetos. Recentemente, Eslint enviou suporte para linering CSS Em projetos, oferecendo regras adicionais para verificar aspectos das folhas de estilo.

Como parte do lançamento de suporte CSS, o Eslint agora oferece o require-baseline Regra, que permite especificar qual limite de linha de base você gostaria de usar ao linear o CSS em seus projetos. Nesta postagem rápida, você aprenderá como usar essa regra para garantir que o seu CSS esteja atingindo os limiares de linha de base recentemente e amplamente disponíveis.

Como usar o ESLINT para aplicar os recursos do CSS da linha de base

Se você usou o ESLint antes, o processo para adicionar o linha CSS ao seu projeto deve ser razoavelmente rápido. Para começar, instale o @eslint/css Pacote para o seu projeto:

npm install @eslint/css --save-dev

Depois de instalado, você poderá adicionar suporte de linha CSS ao seu projeto, importando o @eslint/css Pacote para sua configuração eslint existente:

// 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"
      })
    },
  },
);

Embora o linhagem para CSS seja útil por si só, o valor agregado que Eslint oferece ao fazê -lo é através do linhador require-baseline regra. No trecho de código anterior, os avisos são gerados sempre que um recurso é encontrado que não está amplamente disponível. Isso é especificado através da regra available propriedade, que também aceita um valor de "newly" Para garantir que todos os recursos do CSS usados ​​estejam pelo menos a linha de base recentemente disponível.

Depois de configurar sua configuração, você pode executar o Eslint na raiz do seu projeto, como o SO para fingir o CSS do seu projeto:

npx eslint

Depois de terminar, o Eslint fornecerá quaisquer avisos sobre o CSS do seu projeto, que se parece com o seguinte:

/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

Um ótimo resultado do envio de ESLint Essa funcionalidade é que você pode usá -lo em qualquer fluxo de trabalho de ferramentas que use ESLint. Por exemplo, se você usar o webpack, poderá cuspir a saída do linhador durante as compilações do projeto usando o uso 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")
    })
  )
};

Com essas novas adições úteis ao ESLint, agora você poderá garantir que seus projetos estejam usando recursos de linha de base do CSS sem muito esforço adicional. Dê uma chance! Você pode se surpreender ao descobrir alguns dos recursos de linha de base usados ​​em seu projeto. Para mais informações sobre como isso funciona, leia a documentação para o require-baseline regra.