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: #ddd; 
    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"],

2. 相关代码

1. 安装依赖

   npm i stylelint stylelint-config-rational-order stylelint-config-recommended-vue stylelint-config-standard-scss stylelint-prettier -D

• stylelint-config-rational-order 处理css属性间的顺序（Stylelint 配置通过按顺序组合在一起对相关属性声明进行排序： 定位 盒子模型 排版 视觉的 动画片 杂项 ---npm介绍）
• stylelint-config-standard-scss：scss样式拓展
• stylelint-config-recommended-vue[/scss]: vue标准配置，通过overrides选项调整了.vue文件样式规则，继承了stylelint-config-standard[-scss]和stylelint-config-recommended-vue[/scss]规则
• stylelint-prettier：将 prettier 作为 stylelint的规则来使用，代码不符合 Prettier 的标准时，会报一个 stylelint错误，同时也可以通过 stylelint --fix 来进行格式化，插件遵循prettier的配置

2. 配置 stylelint.config.js 规范
   在根目录新建stylelint.config.js文件；并添加如下内容

module.exports = {
  root: true,
  plugins: ['stylelint-prettier'],
  extends: ['stylelint-config-standard-scss', 'stylelint-config-rational-order', 'stylelint-config-recommended-vue'],
  // https://stylelint.docschina.org/user-guide/rules/
  customSyntax: 'postcss-html',
  overrides: [
    {
      files: ['**/*.vue'],
      customSyntax: 'postcss-html'
    }
  ],
  rules: {
    indentation: 2,
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ],
    'number-leading-zero': 'never',
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
    'selector-type-no-unknown': null,
    'at-rule-no-unknown': null,
    'no-duplicate-selectors': null,
    'no-empty-source': null,
    'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }]
  }
}

3. 设置 stylelint 忽略问题
   在根目录新建 .stylelintignore 文件；添加内容

/dist/*
/public/*
public/*

实现了什么

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