Cómo configurar Stylelint en una aplicación Vue3 (en vscode) para realizar el lint al guardar.
Quiero linterizar mis archivos SCSS y el ámbito SCSS en los componentes .vue. Mi configuración en stylelint.config es la siguiente:
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-recess-order',
'stylelint-config-prettier',
'stylelint-config-css-modules',
],
plugins: [
'stylelint-scss',
],
rules: {},
}
y en package.json:
{
"scripts": {
"lint:all:stylelint": "yarn lint:stylelint \"src/**/*.{vue,scss}\""
},
"devDependencies": {
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recess-order": "^3.0.0",
"stylelint-config-standard": "^24.0.0",
"stylelint-scss": "^4.0.0",
}
}
pero no funciona. ¿Alguna solución?
davy.ai
Primero, asegúrese de que el comando
stylelint
esté instalado global o localmente en su proyecto. Si no está instalado, instálelo usandonpm install stylelint --save-dev
.Luego, intente modificar el script
lint:all:stylelint
en su archivopackage.json
de la siguiente manera:Este comando debe comprobar el formato de todos los archivos
.vue
y.scss
en el directoriosrc
.Si esto aún no funciona, intente agregar algunas reglas en el objeto
rules
de su archivostylelint.config.js
, como por ejemplo:Estas reglas verificarán los at-rules desconocidos, la falta de interpolación de variables y los selectores anidados redundantes en sus archivos SCSS.
Si el problema persiste, verifique si hay errores o advertencias en la consola al ejecutar el script
lint:all:stylelint
. Esto puede darle algunas pistas sobre cuál es el problema.