webstrom的stylelint配置(自动调整css顺序)

webstrom 保存时自动 stylelint fix,无需额外的 csscomb 插件及配置
可通过 npm config get prefix 查看 npm 安装目录

IDE Stylelint fix on save

配置:

npm i stylelint -g

IDE 配置(Settings - Tools - File Watchers - +)

  1. C:\Users\Administrator\AppData\Roaming\npm\stylelint
  2. $FileName$ --fix
  3. $FileName$
  4. $FileDir$

项目需要安装stylelint

package.json 文件

 "devDependencies": {
	"stylelint": "9.10.1",
	"stylelint-config-css-modules": "^1.4.0",
	"stylelint-config-prettier": "^5.0.0",
	"stylelint-config-rational-order": "^0.1.0",
	"stylelint-config-standard": "^18.3.0",
	"stylelint-declaration-block-no-ignored-properties": "^1.1.0",
	"stylelint-order": "^2.2.1",
}

配置 .stylelintrc文件

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-css-modules",
    "stylelint-config-rational-order",
    "stylelint-config-prettier"
  ],
  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
  "rules": {
    "no-descending-specificity": null,
    "plugin/declaration-block-no-ignored-properties": true,
    "at-rule-no-unknown": null
  }
}

参考

安装csscomb插件

posted @ 2020-03-27 16:59  知知为之之  阅读(1868)  评论(0)    收藏  举报