资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS代码检查工具stylelint

CSS代码检查工具stylelint

番茄西红柿 / 1130人阅读

摘要：所以校验规则的行动迫在眉睫。是一个强大的现代检测器，可以让开发者在样式表中遵循一致的约定和避免错误。本文将详细介绍代码检查工具概述拥有超过条的规则，包括捕捉错误最佳实践控制可以使用的语言特性和强制代码风格规范。但是，该命令一定要慎用。

前面的话

　　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版本的stylelint

　　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

 

GPU云服务器 云服务器 检查工具 js安全检查工具 工具未检查合法域名 linux 安全检查工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2236.html

相关文章

  • Lint Your Code

    摘要：形成良好统一的代码规范，有利于提高代码的可读性，减少潜在的错误，便于团队协作开发。其中是可选的，如果没有则禁用所有规则，如果有则禁用所有规则。也可以定义一个命令同时运行这两个命令，我在这里使用了我们定义了在钩子触发时会执行命令。 形成良好统一的代码规范，有利于提高代码的可读性，减少潜在的错误，便于团队协作开发。本文简单介绍JS、CSS、 Git Commit 的规范工具及用法。 Lin...

    hidogs 评论0 收藏0

  • 【翻译】用PostCSS改善你的CSS代码质量

    摘要：代码质量这个术语对于程序员来说并不陌生。在本文中，我们将探讨我们如何能够利用帮助我们，保持我们的代码质量更高。怎样使用在这篇文章中，我们重点介绍几个插件，可以帮助我们提高代码质量。使用相当简单的。这两个插件可用于代码分析。 代码质量这个术语对于程序员来说并不陌生。毕竟，每个开发人员都知道，代码只是能工作是不够的。它还应该具备其他要素：它应该是可读的，良好的格式和一致性。它也应该符合一些...

    sorra 评论0 收藏0

  • 前端进阶（13） - 搭建自己的前端脚手架

    摘要：搭建自己的前端脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。搭建脚手架可以用等命令行工具，也可以直接用等模板，如果这些都不能满足你的个性化需求，可以尝试搭建自己的前端脚手架。 搭建自己的前端脚手架 一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。搭建脚手架可以用 create-react-app、vue-cli、yeoman 等命令行...

    lykops 评论0 收藏0

  • 如何为你的 Vue 项目添加配置 Stylelint

    摘要：如何为你的项目添加配置如何为你的项目添加配置现在已经是年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如已经不再维护，以及之后文件只剩下部分等。如有疑问或授权协商请与我联系。如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如 stylelint-processor-html 已经不...

    番茄西红柿 评论0 收藏0

  • stylelint总结

    摘要：有一百多条校验规则这些规则可以分为三类用于校对风格的规则用于判别代码可维护性的规则以及用于判断代码错误的规则。所有规则默认都是关闭的。声明后还需要在中使用它，具体规则名称以及可能的取值需要去查看每个插件的文档。 stylelint有一百多条校验规则, 这些规则可以分为三类：用于校对风格的规则、用于判别代码可维护性的规则、以及用于判断代码错误的规则。虽然条数众多，但是不用怕，因为都是默认...

    MingjunYang 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<