stylelint配置

vscode中的stylelint配置

1.添加stylelint插件

2.ctrl + shift + p --> open setting(json)进行配置

  "stylelint.enable": true,
  //防止vscode内部的linter冲突
  "css.validate": false,
  "scss.validate": false,
  "vetur.validation.style": false,
  //设置stylint的规则
  "stylelint.config": {
    "rules": {
      "indentation": 2,       
    }
  }
  //开启自动修复
  "editor.codeActionsOnSave": {    
    "source.fixAll.stylelint": true
  }

规则可参考https://stylelint.docschina.org/user-guide/rules/

配置项目中的stylelint

1.需要用到的插件stylelint-config-standard，stylelint-config-rational-order，stylelint-scss，stylelint-config-mixup

2.在项目根目录下添加.stylelintrc.json / stylelint.config.js文件，配置项目中的stylelint

//stylelint.config.js
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-rational-order',
    'stylelint-config-mixup'
  ],
  plugins: ['stylelint-scss'],
  rules: {}
};

stylelint-config-rational-order用来规范css属性顺序，其提倡的顺序：
(1).positioning 位置属性
(2).box model 盒子属性
(3).typography 文字属性
(4).visual 视觉属性
(5).animation misc 其他

.declaration-order {
  /* 1.Positioning 位置属性 */ 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
 
  /* 2.Box Model 盒子属性 */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
 
  /* 3.Typography 文字属性 */
  color: #888;
  font: normal 16px Helvetica, sans-serif;
  line-height: 1.3;
  text-align: center;
 
  /* 4.Visual 视觉属性 */
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 4px;
  opacity: 1;
 
  /* 5.Animation Misc 其他 */
  transition: all 1s;
  user-select: none;
}

3.在package.json中配置script

"script": {
  "lint:css": "stylelint src/*.{html,vue,css,sass,scss} --fix"
}

4.在命令行执行npm run lint:css即可进行相应的检测并修复

5.如果想让部分文件免于检查，可添加.stylelintignore文件，或用/* stylelint-disable */注释