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

За последние месяцы я написал много кода CSS и HTML (и это неинтересно, когда у вас много ошибок lint CSS). Попутно открыла для себя Stylelint и волшебную палочку Stickler. Эти двое значительно улучшили мои:

  1. Предварительная проверка кода
  2. Поиск (синтаксических) ошибок перед выполнением

В этой статье я расскажу, как установить его в локальном репо и получить преимущества CSS-линтинга. Давайте начнем : -

  1. Создайте аккаунт на Stickler.

2. В списке репозиториев в Stickler включите репо.

3. Создайте новый файл .stickler.yml в корне вашего локального репо, помните, что он начинается с точки (.)

linters:  
       stylelint:
           config: 'stylelint.config.js' #The lint settings file
files:
    ignore:
       - 'css/reset.css'  #For ignoring a file/folder
fixers:
    enable: true   #This is the magic part of out fixing your errors

Stickler состоит из двух частей: [.stickler.yml] файла, который содержит инструкции о файлах, которые следует игнорировать, и о том, какой файл настроек Stylelint использовать. Stickler можно использовать на разных языках (и синтаксисе, но в этой статье я сосредоточусь на CSS). Вы можете получить дополнительные инструкции здесь

4. Создайте файл настроек lint stylelint.config.js в корне вашего локального репо и вставьте сюда содержимое ссылки или файла. [Дополнительно: вы можете изменить правила в этом файле, чтобы они лучше отражали ваши пожелания или стандарты команды]

‹Script src =” https://gist.github.com/kilonzi/5fd28ec4daf7fac277f0233e65efe1fa.js '›‹/script›

Подробнее здесь

5. Запустите npm install stylelint stylelint-config-recommended --save-dev (не знаете, как использовать npm? Прочтите это). Возможно, вы захотите установить / обновить node и npm на своем компьютере.

6. Запустите npx stylelint . или npx stylelint css/styles.css. Первый нацелен на все файлы в каталоге, в данном случае только на те, которые поддерживаются S tylelint, или второй - на конкретный файл. Я предпочитаю использовать второй, поскольку сообщения об ошибках / предупреждения lint относятся к каждому файлу и легко читаются.

7. И, наконец, волшебная часть: это может исправить до 70% ваших ошибок ворса. Просто запустите npx stylelint css/styles.css --fix, чтобы исправить ошибки с линтами в файле css / styles.css. Не забудьте указать правильный путь к вашему файлу.

8. ПРИМЕЧАНИЕ: (i). Вам нужно будет исправить ошибки / предупреждения, которые не могут быть исправлены автоматически. (ii). Файлы будут исправлены и сохранены. (Iii) Если вы отредактируете файл, запустите автоматическое исправление еще раз.

Хорошо, ребята, пока на этом все.

Stickler также можно использовать на других языках.

Эта статья была бы невозможна без огромного вклада Бола Ахмеда Буари