• 售前

  • 售后

热门帖子
入门百科

CSS代码查抄工具stylelint的利用方法详解

[复制链接]
尘埃416 显示全部楼层 发表于 2021-8-16 11:58:34 |阅读模式 打印 上一主题 下一主题
CSS不能算是严格意义的编程语言,但是在前端体系中却不能小觑。 CSS 是以描述为主的样式表,假如描述得杂乱、没有规则,对于其他开辟者肯定是一个定时炸弹,特别是有逼迫症的人群。CSS 看似简朴,想要写出美丽的 CSS 还是相称困难。所以校验 CSS 规则的举措如饥似渴。stylelint是一个强大的今世 CSS 检测器,可以让开辟者在样式表中依照一致的约定和避免错误。本文将具体介绍CSS代码查抄工具stylelint

概述

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

下面在Vue框架下安装使用stylelint
1、安装stylelint、stylint-config-standard和stylelint-order
  1. npm install stylelint --save-dev
  2. npm install stylelint-config-standard --save-dev
  3. npm install stylelint-order --save-dev
复制代码
此中,stylelint是运行工具,stylelint-config-standard是stylelint的保举设置,stylelint-order是CSS属性排序插件
安装完成后,package.json文件中会自动添加如下字段
  1. "stylelint": "^9.1.3",
  2. "stylelint-config-standard": "^18.2.0",
  3. "stylelint-order": "^0.8.1",
复制代码
2、在根目录下创建.stylelintrc设置文件
  1. {
  2. "extends": "stylelint-config-standard",
  3. "plugins": ["stylelint-order"],
  4. "rules": {
  5. "order/order": [
  6. "declarations",
  7. "custom-properties",
  8. "dollar-variables",
  9. "rules",
  10. "at-rules"
  11. ],
  12. "order/properties-order": [
  13. "position",
  14. "z-index",   
  15. "top",
  16. "bottom",
  17. "left",     
  18. "right",
  19. "float",
  20. "clear",
  21. "columns",
  22. "columns-width",
  23. "columns-count",
  24. "column-rule",
  25. "column-rule-width",
  26. "column-rule-style",
  27. "column-rule-color",
  28. "column-fill",
  29. "column-span",
  30. "column-gap",   
  31. "display",
  32. "grid",
  33. "grid-template-rows",
  34. "grid-template-columns",
  35. "grid-template-areas",
  36. "grid-auto-rows",
  37. "grid-auto-columns",
  38. "grid-auto-flow",
  39. "grid-column-gap",
  40. "grid-row-gap",
  41. "grid-template",
  42. "grid-template-rows",
  43. "grid-template-columns",
  44. "grid-template-areas",
  45. "grid-gap",
  46. "grid-row-gap",
  47. "grid-column-gap",
  48. "grid-area",
  49. "grid-row-start",
  50. "grid-row-end",
  51. "grid-column-start",
  52. "grid-column-end",
  53. "grid-column",
  54. "grid-column-start",
  55. "grid-column-end",
  56. "grid-row",
  57. "grid-row-start",
  58. "grid-row-end",   
  59. "flex",
  60. "flex-grow",
  61. "flex-shrink",
  62. "flex-basis",
  63. "flex-flow",
  64. "flex-direction",
  65. "flex-wrap",
  66. "justify-content",
  67. "align-content",
  68. "align-items",
  69. "align-self",
  70. "order",
  71. "table-layout",
  72. "empty-cells",
  73. "caption-side",
  74. "border-collapse",
  75. "border-spacing",
  76. "list-style",
  77. "list-style-type",
  78. "list-style-position",
  79. "list-style-image",
  80. "ruby-align",
  81. "ruby-merge",
  82. "ruby-position",
  83. "box-sizing",
  84. "width",
  85. "min-width",
  86. "max-width",
  87. "height",
  88. "min-height",
  89. "max-height",
  90. "padding",
  91. "padding-top",
  92. "padding-right",
  93. "padding-bottom",
  94. "padding-left",
  95. "margin",
  96. "margin-top",
  97. "margin-right",
  98. "margin-bottom",
  99. "margin-left",   
  100. "border",
  101. "border-width",
  102. "border-top-width",
  103. "border-right-width",
  104. "border-bottom-width",
  105. "border-left-width",
  106. "border-style",
  107. "border-top-style",
  108. "border-right-style",
  109. "border-bottom-style",
  110. "border-left-style",
  111. "border-color",
  112. "border-top-color",
  113. "border-right-color",
  114. "border-bottom-color",
  115. "border-left-color",
  116. "border-image",
  117. "border-image-source",
  118. "border-image-slice",
  119. "border-image-width",
  120. "border-image-outset",
  121. "border-image-repeat",
  122. "border-top",
  123. "border-top-width",
  124. "border-top-style",
  125. "border-top-color",
  126. "border-top",
  127. "border-right-width",
  128. "border-right-style",
  129. "border-right-color",
  130. "border-bottom",
  131. "border-bottom-width",
  132. "border-bottom-style",
  133. "border-bottom-color",
  134. "border-left",
  135. "border-left-width",
  136. "border-left-style",
  137. "border-left-color",
  138. "border-radius",
  139. "border-top-right-radius",
  140. "border-bottom-right-radius",
  141. "border-bottom-left-radius",
  142. "border-top-left-radius",
  143. "outline",
  144. "outline-width",
  145. "outline-color",
  146. "outline-style",
  147. "outline-offset",
  148. "overflow",
  149. "overflow-x",
  150. "overflow-y",
  151. "resize",
  152. "visibility",
  153. "font",
  154. "font-style",
  155. "font-variant",
  156. "font-weight",
  157. "font-stretch",
  158. "font-size",
  159. "font-family",
  160. "font-synthesis",
  161. "font-size-adjust",
  162. "font-kerning",   
  163. "line-height",
  164. "text-align",
  165. "text-align-last",
  166. "vertical-align",   
  167. "text-overflow",
  168. "text-justify",
  169. "text-transform",
  170. "text-indent",
  171. "text-emphasis",
  172. "text-emphasis-style",
  173. "text-emphasis-color",
  174. "text-emphasis-position",
  175. "text-decoration",
  176. "text-decoration-color",
  177. "text-decoration-style",
  178. "text-decoration-line",
  179. "text-underline-position",
  180. "text-shadow",   
  181. "white-space",
  182. "overflow-wrap",
  183. "word-wrap",
  184. "word-break",
  185. "line-break",
  186. "hyphens",
  187. "letter-spacing",
  188. "word-spacing",
  189. "quotes",
  190. "tab-size",
  191. "orphans",
  192. "writing-mode",
  193. "text-combine-upright",
  194. "unicode-bidi",
  195. "text-orientation",
  196. "direction",
  197. "text-rendering",
  198. "font-feature-settings",
  199. "font-language-override",
  200. "image-rendering",
  201. "image-orientation",
  202. "image-resolution",
  203. "shape-image-threshold",
  204. "shape-outside",
  205. "shape-margin",
  206. "color",
  207. "background",
  208. "background-image",
  209. "background-position",
  210. "background-size",
  211. "background-repeat",
  212. "background-origin",
  213. "background-clip",
  214. "background-attachment",
  215. "background-color",
  216. "background-blend-mode",
  217. "isolation",
  218. "clip-path",
  219. "mask",
  220. "mask-image",
  221. "mask-mode",
  222. "mask-position",
  223. "mask-size",
  224. "mask-repeat",
  225. "mask-origin",
  226. "mask-clip",
  227. "mask-composite",
  228. "mask-type",
  229. "filter",
  230. "box-shadow",
  231. "opacity",
  232. "transform-style",
  233. "transform",
  234. "transform-box",
  235. "transform-origin",
  236. "perspective",
  237. "perspective-origin",
  238. "backface-visibility",
  239. "transition",
  240. "transition-property",
  241. "transition-duration",
  242. "transition-timing-function",
  243. "transition-delay",
  244. "animation",
  245. "animation-name",
  246. "animation-duration",
  247. "animation-timing-function",
  248. "animation-delay",
  249. "animation-iteration-count",
  250. "animation-direction",
  251. "animation-fill-mode",
  252. "animation-play-state",
  253. "scroll-behavior",
  254. "scroll-snap-type",
  255. "scroll-snap-destination",
  256. "scroll-snap-coordinate",
  257. "cursor",
  258. "touch-action",
  259. "caret-color",
  260. "ime-mode",
  261. "object-fit",
  262. "object-position",
  263. "content",
  264. "counter-reset",
  265. "counter-increment",
  266. "will-change",
  267. "pointer-events",
  268. "all",
  269. "page-break-before",
  270. "page-break-after",
  271. "page-break-inside",
  272. "widows"
  273. ],  
  274. "no-empty-source": null,
  275. "property-no-vendor-prefix": [true, {"ignoreProperties": ["background-clip"]}],
  276. "number-leading-zero": "never",
  277. "number-no-trailing-zeros": true,
  278. "length-zero-no-unit": true,
  279. "value-list-comma-space-after": "always",
  280. "declaration-colon-space-after": "always",
  281. "value-list-max-empty-lines": 0,
  282. "shorthand-property-no-redundant-values": true,
  283. "declaration-block-no-duplicate-properties": true,
  284. "declaration-block-no-redundant-longhand-properties": true,
  285. "declaration-block-semicolon-newline-after": "always",
  286. "block-closing-brace-newline-after": "always",
  287. "media-feature-colon-space-after": "always",
  288. "media-feature-range-operator-space-after": "always",
  289. "at-rule-name-space-after": "always",
  290. "indentation": 2,
  291. "no-eol-whitespace": true,
  292. "string-no-newline": null
  293. }
  294. }
复制代码
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
  1. npm install --save-dev stylelint@9.1.3
  2. npm install --save-dev stylelint-processor-styled-components
  3. npm install --save-dev stylelint-config-styled-components
  4. npm install --save-dev stylelint-config-recommended
  5. npm install --save-dev stylelint-order
复制代码
留意: 由于stylelint更新到9.2版本后,导致styled-components中的CSS代码无法正常校验,所以稳妥起见,使用9.1.3版本的

2、在根目录下新建设置文件.stylelintrc
  1. {
  2. "processors": ["stylelint-processor-styled-components"],
  3. "extends": [
  4. "stylelint-config-recommended",
  5. "stylelint-config-styled-components"
  6. ],
  7. "plugins": ["stylelint-order"],
  8. "rules": {
  9. "order/order": [
  10. "declarations",
  11. "custom-properties",
  12. "dollar-variables",
  13. "rules",
  14. "at-rules"
  15. ],
  16. ...
  17. }
复制代码
3、同样地,使用stylelint下令即可校验
留意事项
1、fix下令
在stylelint的150多条规则中,使用fix下令,可以自动修复一些下令。但是,该fix下令肯定要慎用。笔者在使用fix下令后,stylelint将React工程中的全部js文件里的代码全部扫除,只留着了下可以辨认的css部门
  1. stylelint '**/*.js' --fix
复制代码
2、设置scripts
可以在package.json中设置stylelint的快捷方式
  1. "scripts": {
  2. "lintcss": "stylelint 'src/**/*.js'"
  3. }
复制代码
如许,使用npm run lintcss 下令即可实现雷同结果
3、假如提示如下错误
  1. Error: No configuration provided for
复制代码
是由于在根路径下没有发现设置文件,如.stylelintrc
更多关于CSS代码查抄工具stylelint的使用方法请查察下面的相干链接

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作