stylelint-cli https://stylelint.io/user-guide/cli/
配置 https://stylelint.io/user-guide/configuration/
剛接手的老項目,css寫得很不規(guī)范。
看到vscode里滿滿的紅線,極其不爽简珠。
所以用stylelint格式化一下茁计,解救強(qiáng)迫癥奸晴。
安裝stylelint
npm install -g stylelint
如果還想更進(jìn)一步美化css代碼的話,還可以安裝stylelint-order
npm install stylelint-order --save-dev
根目錄下vim .stylelintrc文件
// .stylelintrc
{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-order"
],
"rules": {
"block-no-empty": null,
"color-no-invalid-hex": true,
"comment-empty-line-before": [ "always", {
"ignore": ["stylelint-commands", "after-comment"]
}],
"declaration-colon-space-after": "always",
"indentation": ["tab", {
"except": ["value"]
}],
"max-empty-lines": 2,
"rule-empty-line-before": [ "always", {
"except": ["first-nested"],
"ignore": ["after-comment"]
} ],
"unit-whitelist": ["px", "em", "rem", "%", "s"]
}
}
具體配置根據(jù)項目風(fēng)格自己定義,參考文章開頭的引用鏈接即可藏研。
一鍵fix
在package.json中的scripts添加指令,然后npm run lintcss
即可
{
"scripts": {
"lintcss": "stylelint 'src/**/*.css' --fix",
}
}
手動fix
不放心的話概行,就針對指定文件自己執(zhí)行蠢挡, 文件一定要用""
括起來
stylelint "src/less/bulma-cloud.less" --fix