乐趣区

关于前端:vscode使用stylelint保存自动格式化代码

jiezi

为什么要做

怎么做

1. vscode 配置

  1. 装置编译器插件
  2. 配置 setting.json
    在 .vscode/settings.json 中增加配置项
"editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true,
        "source.fixAll": true,
    },
    // stylelint 配置
    "stylelint.enable": true,
    // 敞开编辑器内置款式查看（防止与 stylelint 抵触）"css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
  1. 配置 stylelint.config.js 标准
    在根目录新建 stylelint.config.js 文件；并增加如下内容
module.exports = {
  root: true,
  plugins: ['stylelint-prettier'],
  extends: ['stylelint-config-standard', 'stylelint-config-standard-vue', 'stylelint-config-rational-order', 'stylelint-config-prettier'],
  // https://stylelint.docschina.org/user-guide/rules/
  customSyntax: 'postcss-html',
  overrides: [
    {files: ['**/*.vue'],
      customSyntax: 'postcss-scss'
    }
  ],
  rules: {
    'number-leading-zero': false,
    'alpha-value-notation': false,
    'color-function-notation': false,
    'no-eol-whitespace': false,
    'function-no-unknown': null,
    'selector-class-pattern': null,
    'selector-pseudo-class-no-unknown': [
      true,
      {ignorePseudoClasses: ['global']
      }
    ],
    'selector-pseudo-element-no-unknown': [
      true,
      {ignorePseudoElements: ['v-deep']
      }
    ],
    'at-rule-no-unknown': [
      true,
      {ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen', 'function', 'if', 'each', 'include', 'mixin']
      }
    ],
    'no-empty-source': null,
    'string-quotes': null,
    'named-grid-areas-no-invalid': null,
    'unicode-bom': 'never',
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
    'declaration-colon-space-after': 'always-single-line',
    'declaration-colon-space-before': 'never',
    // 'declaration-block-trailing-semicolon': 'always',
    'rule-empty-line-before': [
      'always',
      {ignore: ['after-comment', 'first-nested']
      }
    ],
    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
    'order/order': [
      [
        'dollar-variables',
        'custom-properties',
        'at-rules',
        'declarations',
        {
          type: 'at-rule',
          name: 'supports'
        },
        {
          type: 'at-rule',
          name: 'media'
        },
        'rules'
      ],
      {severity: 'warning'}
    ]
  }
}
  1. 设置 stylelint 疏忽问题
    在根目录新建 .stylelintignore 文件；增加内容
/dist/*
/public/*
public/*

2. 装置依赖

npm i stylelint stylelint-config-prettier stylelint-config-rational-order stylelint-config-standard stylelint-config-standard-vue stylelint-order stylelint-prettier -D
  • stylelint-config-rational-order 解决 css 属性间的程序（Stylelint 配置通过按程序组合在一起对相干属性申明进行排序：定位 盒子模型 排版 视觉的 动画片 杂项 —npm 介绍）
  • stylelint-config-prettier 禁用所有与格局相干的 Stylelint 规定，解决 prettier 与 stylelint 规定抵触，确保将其放在 extends 队列最初，这样它将笼罩其余配置。
  • stylelint-config-standard：stylelint 官网共享的规范规定集成
  • stylelint-config-standard-vue[/scss]: vue 标准配置，通过 overrides 选项调整了.vue 文件款式规定，继承了 stylelint-config-standard[-scss]和 stylelint-config-recommended-vue[/scss]规定

实现了什么

保留主动格式化 css 款式先后顺序

退出移动版