Data di pubblicazione: 12 marzo 2025
ESLint è da tempo il linter preferito per JavaScript, in quanto offre una serie di impostazioni e regole che aiutano gli sviluppatori a imporre uno stile corretto per JavaScript nei loro progetti. Di recente, ESLint ha supportato il linting del CSS nei progetti, offrendo regole aggiuntive per controllare aspetti degli stili.
Nell'ambito del lancio del supporto CSS, ESLint ora offre la regola require-baseline, che consente di specificare la soglia di base da utilizzare durante il linting del CSS nei progetti. In questo breve post, scoprirai come utilizzare questa regola per assicurarti che il tuo CSS soddisfi le soglie di riferimento Nuovo e Ampiamente disponibile.
Come utilizzare ESLint per applicare le funzionalità CSS di base
Se hai già utilizzato ESLint, la procedura per aggiungere il linting CSS al 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 del 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 che ESLint offre in questo modo è la regola require-baseline del linter. Nello snippet di codice precedente, vengono generati avvisi ogni volta che viene rilevata una funzionalità non disponibile a livello generale. Questo viene specificato tramite la proprietà available della regola, che accetta anche un valore "newly" per garantire che tutte le funzionalità CSS utilizzate siano almeno di livello Base di nuova disponibilità.
Una volta configurata la configurazione, puoi eseguire ESLint nella directory principale del progetto come segue per eseguire il lint del CSS del progetto:
npx eslint
Al termine, ESLint fornirà eventuali avvisi sul 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à in ESLint è che puoi utilizzarla in qualsiasi flusso di lavoro degli strumenti che utilizza ESLint. Ad esempio, se utilizzi webpack, puoi ottenere 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. Provaci! Potresti scoprire alcune delle funzionalità di Baseline utilizzate nel tuo progetto. Per ulteriori informazioni su come funziona, consulta la documentazione della regola require-baseline.