Как настроить sass и ESLint в проекте svelte?

#javascript #sass #eslint #svelte

#javascript #sass #eslint #стройный

Вопрос:

Я новичок в svelte. Я пытаюсь добавить ESLint в свой проект svelte. Мой файл eslintrc.json:

 {
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "extends": [
    "standard", "airbnb-base/legacy"
  ],
  "plugins": [
    "svelte3"
  ],
  "overrides": [
    {
      "files": ["**/*.svelte"],
      "processor": "svelte3/svelte3"
    }
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  }
} 
  

Это работает, но правила linter не поддерживают синтаксис sass. У меня эта ошибка.
введите описание изображения здесь

Как я могу это исправить?

Ответ №1:

Если вы используете какой-то препроцессор для стилей компонентов, то вполне вероятно, что когда этот плагин вызывает компилятор Svelte для вашего компонента, он выдаст исключение. В идеальном мире этот плагин мог бы применять препроцессор к компоненту, а затем использовать исходные карты для перевода любых предупреждений обратно в исходный источник. Однако в текущей реальности вы можете вместо этого просто игнорировать стили, написанные на чем угодно, кроме стандартного CSS. Вы не будете получать предупреждения о стилях из компоновщика, но ваше приложение все равно будет их использовать (конечно), и предупреждения компилятора все равно будут появляться в ваших журналах сборки.

Этой настройке можно присвоить функцию, которая принимает объект атрибутов в теге (например, переданный препроцессору Svelte) и возвращает, следует ли игнорировать блок стиля для целей компоновки.

По умолчанию не игнорируются никакие стили.

  settings: {
    'svelte3/ignore-styles': () => true
  }
  

Комментарии:

1. github.com/sveltejs/eslint-plugin-svelte3#svelte3ignore-styles

Ответ №2:

Я столкнулся с той же проблемой, и нет документации о том, как использовать svelte3 / ignore-styles в настройках, чтобы игнорировать стили в eslint. Вот как я исправил проблему —

Я изменил .eslintrc на .eslintrc.js для того, чтобы использовать правило игнорирования в качестве функции —

 module.exports = {
    ...
    
    "rules" : {

    },

    "settings": {
      "svelte3/ignore-styles": () => true
    }

}
  

Комментарии:

1. Это заставляет eslint пропускать стили, а не удалять их.

2. @ViktorM точно, ESLINT не должен использовать стили. Поскольку svelte использует css и js в одном файле, приведенный выше ответ является решением для предотвращения недопустимых ошибок css в ESLINT.