Pubblicato il 12 marzo 2025, ultimo aggiornamento il 26 marzo 2025
ESLint è da tempo il linter preferito per JavaScript, in quanto offre una varietà di impostazioni e regole che aiutano gli sviluppatori ad applicare un buon stile per JavaScript nei loro progetti. Di recente, ESLint ha aggiunto il supporto per il linting di CSS nei progetti, offrendo regole aggiuntive per il controllo degli aspetti dei fogli di stile.
Nell'ambito del lancio del supporto CSS, ESLint offre ora la regola require-baseline, che consente di specificare la soglia di base da utilizzare per il linting di CSS nei progetti. In questo breve post, imparerai a utilizzare questa regola per assicurarti che il tuo CSS soddisfi le soglie di base appena disponibili e ampiamente disponibili.
Come utilizzare ESLint per applicare le funzionalità CSS di base
Se hai già utilizzato ESLint, la procedura per aggiungere il linting CSS al tuo progetto dovrebbe essere ragionevolmente rapida. Per iniziare, installa il pacchetto @eslint/css per il tuo progetto:
npm install @eslint/css --save-dev
Una volta installato, potrai aggiungere il supporto per il linting CSS al tuo progetto importando il pacchetto @eslint/css nella configurazione ESLint esistente:
// 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"
}]
},
},
];
Sebbene il linting per CSS sia utile di per sé, il valore aggiunto offerto da ESLint è la regola require-baseline del linter. Nello snippet di codice precedente, vengono generati avvisi ogni volta che viene rilevata una funzionalità che non è di base ampiamente disponibile. Questa operazione viene specificata tramite la proprietà available della regola, che accetta anche il valore "newly" per garantire che tutte le funzionalità CSS utilizzate siano almeno di base appena disponibili.
Una volta configurata la configurazione, puoi eseguire ESLint nella directory principale del progetto come segue per eseguire il linting del CSS del progetto:
npx eslint
Al termine, ESLint fornirà eventuali avvisi relativi al CSS del progetto, che avrà il seguente aspetto:
/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
Un ottimo risultato dell'implementazione di questa funzionalità da parte di ESLint è che puoi utilizzarla in qualsiasi flusso di lavoro di strumenti che utilizza ESLint. Ad esempio, se utilizzi webpack, puoi fare in modo che generi l'output del linter durante le build del progetto utilizzando 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"]
})
]
};
Grazie a queste nuove e utili aggiunte a ESLint, ora potrai assicurarti che i tuoi progetti utilizzino le funzionalità CSS di base senza troppi sforzi aggiuntivi. Provaci! Potresti rimanere sorpreso di scoprire alcune delle funzionalità di base utilizzate nel tuo progetto. Per saperne di più su come funziona, consulta la documentazione relativa alla regola require-baseline.