CSS代码检查工具stylelint的使用方法详解_CSS/HTML

来源:脚本之家  责任编辑:小易  

首先明白什么是静态?什么是动态?静态动态最根本的区别就在于“程序是否是运行的”。静态就是不运行程序去测试,那么又要问了:不运行怎么测试呢?那最简单的静态测试方法就是“code review”也就是看代码。看代码有没有什么地方明显是错误的www.zgxue.com防采集请勿采集本网。

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

删除多余的css,首先我们需要明确是,确实不需要这个css样式了,或者是这个css的样式重复了,我们才会去删除,删除的方法就是找到多余的css代码的位置,然后在选中用del删除就行了,具体看代码:

概述

CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。3.用删除法确定错误发生的位置 如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。4.利用

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

Vue

CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一,没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生,实际上无论你用

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

CSS问题检查工具:CSS Lint CSS Lint是一个开源的校验CSS文件质量的工具,最初是由 Nicholas C.Zakas和 Nicole Sullivan编写的,最初版本在Velocity会议上于2011年6月发布。CSS Lint的检测规则包括错误的

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

Css代码*/ class1 {color:black;} class2 {color:red;} 而某个元素指定class时采用 class=\"class2 class1\"这种方式指定,此时虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于

npm install stylelint --save-devnpm install stylelint-config-standard --save-devnpm 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.3npm install --save-dev stylelint-processor-styled-componentsnpm install --save-dev stylelint-config-styled-componentsnpm install --save-dev stylelint-config-recommendednpm 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的使用方法请查看下面的相关链接

IE9浏览器默认情况下隐藏了浏览器菜单栏,因此在打开IE9浏览器以后,需要按键盘上的ALT键来显示浏览器工具栏。2在显示出来的IE菜单栏上点击菜单“查看”→“源文件”。3IE浏览器会自动打开一个新的窗口来显示网页源代码。4哦~这份缘文件实在太难看懂了~别着急,其实IE9提供了一个更为强大的网页源代码查看工具—开发者工具。点击IE9浏览器右上角的齿轮图标,在下拉菜单中点击“F12开发者工具”,或者直接按键盘上的快捷键F12也可以打开开发者工具。5IE9的开发者工具提供更为强大的网页开发查看代码和调试功能,你可以使用开发者工具更方便地查看网页HTML代码,CSS样式代码和脚本等信息。END使用Firefox火狐浏览器查看网页源代码1Windows Vista/7用户:点击Firefox浏览器左上角的快捷菜单,在下拉菜单中点击“Web开发者”→“查看页面源代码”。Windows XP/Linux用户:点击Firefox浏览器的菜单“工具”→“Web开发者”→“查看页面源代码”。键盘快7a686964616fe78988e69d8331333361313330捷键:Ctrl+U2Firfox浏览器会打开网页源代码窗口显示网页HTML源代码。3如果想要查看其中外联的CSS源文件,可以用鼠标点击源代码中的CSS外联文件链接网址。4不过自带的之中网页源文件查看器并不好用,你可以尝试使用插件Firebug来获取更好用的网页开发功能。点击“Web开发者”→“获取更多工具”。5在弹出的Firefox新标签页中安装插件“Firebug”。6安装完成以后会在Firefox浏览器的右上角工具栏中添加Firebug的图标,点击它就可以使用Firebug网页调试工具了。这个工具相当强大哦~END使用谷歌Chrome浏览器查看网页源代码点击Chrome浏览器右上角的快捷菜单“工具”→“查看源代码”。Chrome浏览器会打开一个网页源代码显示窗口,这个源代码显示窗口好像也是不那么友好,一大堆网页代码实在不知道如何下手呀。如果你想要更好的网页源代码显示和开发工具,那就点击Chrome浏览器右上角的快捷菜单“工具”→“开发者工具”。看看,不需要下载任何插件,Chrome浏览器就已经为你提供了一个相当强大的网页开发者工具了。使用Chrome浏览器开发者工具来查看和调试CSS也相当好用内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue单文件组件lint error自动fix与stylelint报错自动fix详解
  • 使用 stylelint检查css_stylelint
  • windows的listview一样,而且不能把表头从表格里面独立出来
  • html中的图象标签属性
  • 在div+css排版中新闻列表的制作方法
  • html标记
  • 如何设置一个指定高度的div
  • 自定义容器和字体大小
  • 在线asc码查询
  • 利用css控制select中的option是否不允许选
  • firefox推荐与个人理解的css书写顺序
  • 凸起的按钮效果
  • 怎样使用浏览器查看网页HTML和CSS源代码
  • 代码为什么需要静态代码检查工具
  • 使用工具检测网站,结果被要求合并几个CSS文件,要怎么合并?
  • css是什么意思
  • 如何删除 多余 css?
  • 如何检查调试CSS布局代码
  • CSS是什么
  • Web 设计的CSS 工具有哪些
  • css的auto-fill怎么清楚
  • 用什么软件检查CSS错误
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页css/htmlvue单文件组件lint error自动fix与stylelint报错自动fix详解使用 stylelint检查css_stylelintwindows的listview一样,而且不能把表头从表格里面独立出来html中的图象标签属性在div+css排版中新闻列表的制作方法html标记如何设置一个指定高度的div自定义容器和字体大小在线asc码查询利用css控制select中的option是否不允许选firefox推荐与个人理解的css书写顺序凸起的按钮效果漂亮的表格页面遮罩层,并且阻止页面body滚相对路径与绝对路径的区别html清除浮动的6种方法示例css透明属性详解代码css绘制五角星文字或图片元素在div中垂直居中css如何使div层居中css3+js实现响应式导航条css图文混排的几种方案css之自动换行对display:inline;与float:left;的认识w3c技术架构介绍文字应用css滤镜集锦div+css排版的样例china.com网站开发规范css实现的对联广告代码页面遮罩层,并且阻止页面body滚动。boot文字或图片元素在div中垂直居中如何以及何时使用sifr
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved