Vscode настроить stylelint

CSS

Через два месяца настройки vscode красивее изменились, так что перезапишите

1 vscode установить плагины красивее и stylelint

1.1 URL-адрес загрузки

1.2 Конфигурация

существует/.vscode/settings.jsonДобавить конфигурацию, это для синхронизации конфигурации в проекте, конечно можно задать в глобальных настройках

С vscode конфигурация eslint выглядит следующим образом^_^

настройки.json:

  // eslint 设置
  "eslint.validate": [
    "html",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  /* prettier配置遵循eslint规则 */
  "prettier.jsxSingleQuote": true,
  "prettier.semi": false,

  // stylelint配置
  "stylelint.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "[scss]": {
    "editor.formatOnSave": true
  },

2 Проект устанавливает соответствующий пакет зависимостей

yarn add --dev stylelint-config-prettier stylelint-prettier

yarn add prettier --dev --exact

Затем в корневой каталог добавляем.stylelintrc.js

module.exports = {
  processors: [],
  plugins: [],
  extends: ["stylelint-prettier/recommended"],
  rules: {
    // 取消某些规则如下:
    "unit-case": null,
    "rule-empty-line-before": null,
    "comment-empty-line-before": null,
    "declaration-block-trailing-semicolon": null,
    "selector-type-no-unknown": null
  }
};

Наконец, добавьте файлы игнорирования.prettierignoreа также.stylelintignore

node_modules
dist

На этом настройка завершена! ~

3 блок проекта таро PX верхний регистр автоматически преобразуется в нижний регистр

существуетTaroРекомендуются устройства среднего размера.px, процент%,TaroВсе единицы конвертируются по умолчанию. В настоящее время самый простой способ игнорировать одно свойство -pxЕдиницы используют заглавные буквыPx or PX.

Поскольку мы ранее установилиprettierАвтоматический формат плагина[scss]файл, что приводит к записиPXбудет автоматически отформатирован в нижний регистрpx

Как избежать этой проблемы, просто напишите об этом/* prettier-ignore */чтобы избежать автоматического форматирования в нижний регистр

  /* prettier-ignore */
  height: 44PX;

Справочная статья
Плагин stylelint
Документация — более красивая интеграция с Линтером
Наггетс-CSS Code Speciation Tool StyleLint
С кодом проверяет формула Eslint, Tslint, StyleLint на Денвере
Nuggets-vscode + более красивое правило чистоты кода (1)

Категории