vscode使用stylelint保存自动格式化代码

为什么要做

css样式的书写顺序及原理——很重要！很重要！很重要！ 浏览器的渲染原理：reflow和repaint

1. 解析html文件构建dom树，解析css文件构建cssom
2. 结合dom树和cssom生成渲染树
3. 根据渲染树进行layout（布局）和paint（渲染）

在步骤3，生成渲染树的过程中，浏览器会从根节点（html节点）开始遍历每个树节点的css样式进行解析。在解析过程中，如果某个元素的定位变化影响了布局。则要倒回去重新渲染。

// 例如
.box{
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: absolute; 
    /*当浏览器解析到position为absolute时，发现需要脱离文档流而不是在文档流中渲染时，
      会倒回去重新渲染*/
}

为何选stylelint

• 其支持 Less、Sass 这类预处理器；
• 在社区活跃度上，有非常多的 第三方插件

• 在 Facebook，Github，WordPress 等公司得到实践，能够覆盖很多场景。

  怎么做

  1. vscode配置

• 安装编译器插件
  
• 配置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"],

3. 配置 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' }
    ]
  }
}

4. 设置 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]规则
• stylelint-order 可以自动将属性按你选择的顺序排序

实现了什么

保存自动格式化css样式先后顺序

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net