資訊專欄INFORMATION COLUMN
摘要：所以校驗規(guī)則的行動迫在眉睫。是一個強大的現(xiàn)代檢測器，可以讓開發(fā)者在樣式表中遵循一致的約定和避免錯誤。本文將詳細(xì)介紹代碼檢查工具概述擁有超過條的規(guī)則，包括捕捉錯誤最佳實踐控制可以使用的語言特性和強制代碼風(fēng)格規(guī)范。但是，該命令一定要慎用。
CSS不能算是嚴(yán)格意義的編程語言，但是在前端體系中卻不能小覷。 CSS 是以描述為主的樣式表，如果描述得混亂、沒有規(guī)則，對于其他開發(fā)者一定是一個定時炸彈，特別是有強迫癥的人群。CSS 看似簡單，想要寫出漂亮的 CSS 還是相當(dāng)困難。所以校驗 CSS 規(guī)則的行動迫在眉睫。stylelint是一個強大的現(xiàn)代 CSS 檢測器，可以讓開發(fā)者在樣式表中遵循一致的約定和避免錯誤。本文將詳細(xì)介紹CSS代碼檢查工具stylelint
stylelint擁有超過150條的規(guī)則，包括捕捉錯誤、最佳實踐、控制可以使用的語言特性和強制代碼風(fēng)格規(guī)范。它支持最新的CSS語法，并且靈活可配置
下面在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、在根目錄下創(chuàng)建.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中使用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版本后，導(dǎo)致styled-components中的CSS代碼無法正常校驗，所以穩(wěn)妥起見，使用9.1.3版本的stylelint
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多條規(guī)則中，使用fix命令，可以自動修復(fù)一些命令。但是，該fix命令一定要慎用。筆者在使用fix命令后，stylelint將React工程中的所有js文件里的代碼全部清除，只留著了下可以識別的css部分
stylelint **/*.js --fix
2、配置scripts
可以在package.json中配置stylelint的快捷方式
"scripts": { "lintcss": "stylelint src/**/*.js" }
這樣，使用npm run lintcss 命令即可實現(xiàn)相同效果
3、如果提示如下錯誤
Error: No configuration provided for
是因為在根路徑下沒有發(fā)現(xiàn)配置文件，如.stylelintrc
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/2236.html
摘要：形成良好統(tǒng)一的代碼規(guī)范，有利于提高代碼的可讀性，減少潛在的錯誤，便于團(tuán)隊協(xié)作開發(fā)。其中是可選的，如果沒有則禁用所有規(guī)則，如果有則禁用所有規(guī)則。也可以定義一個命令同時運行這兩個命令，我在這里使用了我們定義了在鉤子觸發(fā)時會執(zhí)行命令。 形成良好統(tǒng)一的代碼規(guī)范，有利于提高代碼的可讀性，減少潛在的錯誤，便于團(tuán)隊協(xié)作開發(fā)。本文簡單介紹JS、CSS、 Git Commit 的規(guī)范工具及用法。 Lin...
摘要：代碼質(zhì)量這個術(shù)語對于程序員來說并不陌生。在本文中，我們將探討我們?nèi)绾文軌蚶脦椭覀儯３治覀兊拇a質(zhì)量更高。怎樣使用在這篇文章中，我們重點介紹幾個插件，可以幫助我們提高代碼質(zhì)量。使用相當(dāng)簡單的。這兩個插件可用于代碼分析。 代碼質(zhì)量這個術(shù)語對于程序員來說并不陌生。畢竟，每個開發(fā)人員都知道，代碼只是能工作是不夠的。它還應(yīng)該具備其他要素：它應(yīng)該是可讀的，良好的格式和一致性。它也應(yīng)該符合一些...
摘要：搭建自己的前端腳手架一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。搭建腳手架可以用等命令行工具，也可以直接用等模板，如果這些都不能滿足你的個性化需求，可以嘗試搭建自己的前端腳手架。 搭建自己的前端腳手架 一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。搭建腳手架可以用 create-react-app、vue-cli、yeoman 等命令行...
摘要：如何為你的項目添加配置如何為你的項目添加配置現(xiàn)在已經(jīng)是年了，網(wǎng)上許多教程和分享帖都已經(jīng)過期，照著他們的步驟來會踩一些坑，如已經(jīng)不再維護(hù)，以及之后文件只剩下部分等。如有疑問或授權(quán)協(xié)商請與我聯(lián)系。如何為你的 Vue 項目添加配置 Stylelint 現(xiàn)在已經(jīng)是 9102 年了，網(wǎng)上許多教程和分享帖都已經(jīng)過期，照著他們的步驟來會踩一些坑，如 stylelint-processor-html 已經(jīng)不...
摘要：有一百多條校驗規(guī)則這些規(guī)則可以分為三類用于校對風(fēng)格的規(guī)則用于判別代碼可維護(hù)性的規(guī)則以及用于判斷代碼錯誤的規(guī)則。所有規(guī)則默認(rèn)都是關(guān)閉的。聲明后還需要在中使用它，具體規(guī)則名稱以及可能的取值需要去查看每個插件的文檔。 stylelint有一百多條校驗規(guī)則, 這些規(guī)則可以分為三類：用于校對風(fēng)格的規(guī)則、用于判別代碼可維護(hù)性的規(guī)則、以及用于判斷代碼錯誤的規(guī)則。雖然條數(shù)眾多，但是不用怕，因為都是默認(rèn)...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
