es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo configurar Stylelint en una aplicación Vue3 (en vscode) para realizar el lint al guardar.

Cómo configurar Stylelint en una aplicación Vue3 (en vscode) para realizar el lint al guardar.

14 Jul, 2023 Programación

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?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Primero, asegúrese de que el comando stylelint esté instalado global o localmente en su proyecto. Si no está instalado, instálelo usando npm install stylelint --save-dev.

    Luego, intente modificar el script lint:all:stylelint en su archivo package.json de la siguiente manera:

    "lint:all:stylelint": "stylelint \"src/**/*.{vue,scss}\""

    Este comando debe comprobar el formato de todos los archivos .vue y .scss en el directorio src.

    Si esto aún no funciona, intente agregar algunas reglas en el objeto rules de su archivo stylelint.config.js, como por ejemplo:

    rules: {
  "scss/at-rule-no-unknown": true,
  "scss/dollar-variable-no-missing-interpolation": true,
  "scss/selector-no-redundant-nesting-selector": true
}

    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.

Comments are closed.