html 设置自动检测编码格式,CSS代码检查工具stylelint的使用方法详解

CSS不能算是严格意义的编程语言，但是在前端体系中却不能小觑。 CSS 是以描述为主的样式表，如果描述得混乱、没有规则，对于其他开发者一定是一个定时炸弹，特别是有强迫症的人群。CSS 看似简单，想要写出漂亮的 CSS 还是相当困难。所以校验 CSS 规则的行动迫在眉睫。stylelint是一个强大的现代 CSS 检测器，可以让开发者在样式表中遵循一致的约定和避免错误。本文将详细介绍CSS代码检查工具stylelint

概述

stylelint拥有超过150条的规则，包括捕捉错误、最佳实践、控制可以使用的语言特性和强制代码风格规范。它支持最新的CSS语法，并且灵活可配置

Vue

下面在Vue框架下安装使用stylelint

1、安装stylelint、stylint-config-standard和stylelint-order

npm install stylelint --save-dev

npm install stylelint-config-standard --save-dev

npm install stylelint-order --save-dev

其中，stylelint是运行工具，stylelint-config-standard是stylelint的推荐配置，stylelint-order是CSS属性排序插件

安装完成后，package.json文件中会自动添加如下字段

"stylelint": "^9.1.3",

"stylelint-config-standard": "^18.2.0",

"stylelint-order": "^0.8.1",

2、在根目录下创建.stylelintrc配置文件

{

"extends": "stylelint-config-standard",

"plugins": ["stylelint-order"],

"rules": {

"order/order": [

"declarations",

"custom-properties",

"dollar-variables",

"rules",

"at-rules"

],

"order/properties-order": [

"position",

"z-index",

"top",

"bottom",

"left",

"right",

"float",

"clear",

"columns",

"columns-width",

"columns-count",

"column-rule",

"column-rule-width",

"column-rule-style",

"column-rule-color",

"column-fill",

"column-span",

"column-gap",

"display",

"grid",

"grid-template-rows",

"grid-template-columns",

"grid-template-areas",

"grid-auto-rows",

"grid-auto-columns",

"grid-auto-flow",

"grid-column-gap",

"grid-row-gap",

"grid-template",

"grid-template-rows",

"grid-template-columns",

"grid-template-areas",

"grid-gap",

"grid-row-gap",

"grid-column-gap",

"grid-area",

"grid-row-start",

"grid-row-end",

"grid-column-start",

"grid-column-end",

"grid-column",

"grid-column-start",

"grid-column-end",

"grid-row",

"grid-row-start",

"grid-row-end",

"flex",

"flex-grow",

"flex-shrink",

"flex-basis",

"flex-flow",

"flex-direction",

"flex-wrap",

"justify-content",

"align-content",

"align-items",

"align-self",

"order",

"table-layout",

"empty-cells",

"caption-side",

"border-collapse",

"border-spacing",

"list-style",

"list-style-type",

"list-style-position",

"list-style-image",

"ruby-align",

"ruby-merge",

"ruby-position",

"box-sizing",

"width",

"min-width",

"max-width",

"height",

"min-height",

"max-height",

"padding",

"padding-top",

"padding-right",

"padding-bottom",

"padding-left",

"margin",

"margin-top",

"margin-right",

"margin-bottom",

"margin-left",

"border",

"border-width",

"border-top-width",

"border-right-width",

"border-bottom-width",

"border-left-width",

"border-style",

"border-top-style",

"border-right-style",

"border-bottom-style",

"border-left-style",

"border-color",

"border-top-color",

"border-right-color",

"border-bottom-color",

"border-left-color",

"border-image",

"border-image-source",

"border-image-slice",

"border-image-width",

"border-image-outset",

"border-image-repeat",

"border-top",

"border-top-width",

"border-top-style",

"border-top-color",

"border-top",

"border-right-width",

"border-right-style",

"border-right-color",

"border-bottom",

"border-bottom-width",

"border-bottom-style",

"border-bottom-color",

"border-left",

"border-left-width",

"border-left-style",

"border-left-color",

"border-radius",

"border-top-right-radius",

"border-bottom-right-radius",

"border-bottom-left-radius",

"border-top-left-radius",

"outline",

"outline-width",

"outline-color",

"outline-style",

"outline-offset",

"overflow",

"overflow-x",

"overflow-y",

"resize",

"visibility",

"font",

"font-style",

"font-variant",

"font-weight",

"font-stretch",

"font-size",

"font-family",

"font-synthesis",

"font-size-adjust",

"font-kerning",

"line-height",

"text-align",

"text-align-last",

"vertical-align",

"text-overflow",

"text-justify",

"text-transform",

"text-indent",

"text-emphasis",

"text-emphasis-style",

"text-emphasis-color",

"text-emphasis-position",

"text-decoration",

"text-decoration-color",

"text-decoration-style",

"text-decoration-line",

"text-underline-position",

"text-shadow",

"white-space",

"overflow-wrap",

"word-wrap",

"word-break",

"line-break",

"hyphens",

"letter-spacing",

"word-spacing",

"quotes",

"tab-size",

"orphans",

"writing-mode",

"text-combine-upright",

"unicode-bidi",

"text-orientation",

"direction",

"text-rendering",

"font-feature-settings",

"font-language-override",

"image-rendering",

"image-orientation",

"image-resolution",

"shape-image-threshold",

"shape-outside",

"shape-margin",

"color",

"background",

"background-image",

"background-position",

"background-size",

"background-repeat",

"background-origin",

"background-clip",

"background-attachment",

"background-color",

"background-blend-mode",

"isolation",

"clip-path",

"mask",

"mask-image",

"mask-mode",

"mask-position",

"mask-size",

"mask-repeat",

"mask-origin",

"mask-clip",

"mask-composite",

"mask-type",

"filter",

"box-shadow",

"opacity",

"transform-style",

"transform",

"transform-box",

"transform-origin",

"perspective",

"perspective-origin",

"backface-visibility",

"transition",

"transition-property",

"transition-duration",

"transition-timing-function",

"transition-delay",

"animation",

"animation-name",

"animation-duration",

"animation-timing-function",

"animation-delay",

"animation-iteration-count",

"animation-direction",

"animation-fill-mode",

"animation-play-state",

"scroll-behavior",

"scroll-snap-type",

"scroll-snap-destination",

"scroll-snap-coordinate",

"cursor",

"touch-action",

"caret-color",

"ime-mode",

"object-fit",

"object-position",

"content",

"counter-reset",

"counter-increment",

"will-change",

"pointer-events",

"all",

"page-break-before",

"page-break-after",

"page-break-inside",

"widows"

],

"no-empty-source": null,

"property-no-vendor-prefix": [true, {"ignoreProperties": ["background-clip"]}],

"number-leading-zero": "never",

"number-no-trailing-zeros": true,

"length-zero-no-unit": true,

"value-list-comma-space-after": "always",

"declaration-colon-space-after": "always",

"value-list-max-empty-lines": 0,

"shorthand-property-no-redundant-values": true,

"declaration-block-no-duplicate-properties": true,

"declaration-block-no-redundant-longhand-properties": true,

"declaration-block-semicolon-newline-after": "always",

"block-closing-brace-newline-after": "always",

"media-feature-colon-space-after": "always",

"media-feature-range-operator-space-after": "always",

"at-rule-name-space-after": "always",

"indentation": 2,

"no-eol-whitespace": true,

"string-no-newline": null

}

}

3、使用stylelint验证CSS代码即可，如验证src目录下的所有vue文件

react

react中使用styled-components来书写CSS代码，stylelint同样提供了插件来校验CSS

1、安装stylelint、stylelint-processor-styled-components、stylelint-config-styled-components、stylelint-config-recommend、stylelint-order

npm install --save-dev stylelint@9.1.3

npm install --save-dev stylelint-processor-styled-components

npm install --save-dev stylelint-config-styled-components

npm install --save-dev stylelint-config-recommended

npm install --save-dev stylelint-order

注意： 由于stylelint更新到9.2版本后，导致styled-components中的CSS代码无法正常校验，所以稳妥起见，使用9.1.3版本的

2、在根目录下新建配置文件.stylelintrc

{

"processors": ["stylelint-processor-styled-components"],

"extends": [

"stylelint-config-recommended",

"stylelint-config-styled-components"

],

"plugins": ["stylelint-order"],

"rules": {

"order/order": [

"declarations",

"custom-properties",

"dollar-variables",

"rules",

"at-rules"

],

...

}

3、同样地，使用stylelint命令即可校验

注意事项

1、fix命令

在stylelint的150多条规则中，使用fix命令，可以自动修复一些命令。但是，该fix命令一定要慎用。笔者在使用fix命令后，stylelint将React工程中的所有js文件里的代码全部清除，只留着了下可以识别的css部分

stylelint '**/*.js' --fix

2、配置scripts

可以在package.json中配置stylelint的快捷方式

"scripts": {

"lintcss": "stylelint 'src/**/*.js'"

}

这样，使用npm run lintcss 命令即可实现相同效果

3、如果提示如下错误

Error: No configuration provided for

是因为在根路径下没有发现配置文件，如.stylelintrc

更多关于CSS代码检查工具stylelint的使用方法请查看下面的相关链接