引入代码检查工具stylelint实战问题经验总结分享

目录
  • 前言
  • 正文
    • 1. 安装stylelint
    • 2. 配置文件
    • 3. 使用stylelint
      • 踩坑点1:
    • 4. 配置规则
    • 5. 忽略lint文件
    • 6. 自动格式化
      • 6.1 stylelint vs-code 插件
      • 6.3 插件踩坑集锦
    • 7. commit检测

前言

团队合作时,当每个人的代码都拥有自定义的格式化方式时,在提交merge的时候往往要解决很多冲突,此时我们可以使用eslint+stylelint来对团队的代码进行约束。

正文

stylelint是一个强大的,现代的代码检查工具,可以帮助你在团队合作中强制执行样式约定。

1. 安装stylelint

yarn add -D stylelint

2. 配置文件

使用 stylelint检测器需要一个配置对象,你可以使用三种方式来创建这个对象。

package.json 中的stylelint 属性。

.stylelintrc.js文件

stylelint.config.js 文件输出的js对象

一旦发现它们中的任何一个,将不再继续进行查找,进行解析,将使用解析后的对象。 本次使用的是.stylelintrc.js 文件来进行配置。

3. 使用stylelint

安装官方文档的说法你可以按照以下方法运行stylelint检测样式代码。

--fix 用来自动修复,但不能修复所有的问题。

// package.json
"scripts":{
  "lint:css":"stylelint src/**/*.css --fix"
}

踩坑点1:

由于我的项目里使用的样式语言是less。所以检测css是肯定不对的,所以这里我们需要做一点改动

// package.json
"scripts":{
  "lint:css":"stylelint src/**/*.less --fix"
}

于是我们可以运行这串代码了

yarn lint:css postcss-less

大家可以看到,这里报了一些提醒,简单翻译为让我们用对应的语法去解析我们的样式。而这对应的语法解析器是需要我们去安装的。

yarn add -D   postcss-less

于是再次对脚本进行修改。

// package.json
"scripts":{
  "lint:css":"stylelint src/**/*.less --fix  --custom-syntax postcss-less"
}

OK 到这里我们就可以正常的去跑lint命令对我们的样式代码进行格式化了。接下来我们来配置lint规则

4. 配置规则

我们首先需要安装三个npm包帮助我们完善规则

yarn add -D stylelint-config-standard stylelint-order stylelint-config-css-modules

stylelint-config-standard 是stylelint的推荐配置,stylelint-order是用来在格式化css文件时对代码的属性进行排序。

 stylelint-config-css-modules 是css-module的方案来处理样式文件

我的配置文件长这样:

// .stylelintrc.js
module.exports = {
    processors: [],
    plugins: ['stylelint-order'],
    extends: [
        "stylelint-config-standard",
        "stylelint-config-css-modules"
    ],
    rules: {
        "selector-class-pattern": [ // 命名规范 -
            "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
            {
                "message": "Expected class selector to be kebab-case"
            }
        ],
        "string-quotes":"single", // 单引号
        "at-rule-empty-line-before": null,
        "at-rule-no-unknown":null,
        "at-rule-name-case": "lower",// 指定@规则名的大小写
        "length-zero-no-unit": true,  // 禁止零长度的单位(可自动修复)
        "shorthand-property-no-redundant-values": true, // 简写属性
        "number-leading-zero": "never", // 小数不带0
        "declaration-block-no-duplicate-properties": true, // 禁止声明快重复属性
        "no-descending-specificity": true, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器。
        "selector-max-id": 0, // 限制一个选择器中 ID 选择器的数量
        "max-nesting-depth": 3,
        "indentation": [2, {  // 指定缩进  warning 提醒
            "severity": "warning"
        }],
        "order/properties-order": [ // 规则顺序
            "position",
            "top",
            "right",
            "bottom",
            "left",
            "z-index",
            "display",
            "float",
            "width",
            "height",
            'max-width',
            'max-height',
            'min-width',
            'min-height',
            'padding',
            'padding-top',
            'padding-right',
            'padding-bottom',
            'padding-left',
            'margin',
            'margin-top',
            'margin-right',
            'margin-bottom',
            'margin-left',
            'margin-collapse',
            'margin-top-collapse',
            'margin-right-collapse',
            'margin-bottom-collapse',
            'margin-left-collapse',
            'overflow',
            'overflow-x',
            'overflow-y',
            'clip',
            'clear',
            'font',
            'font-family',
            'font-size',
            'font-smoothing',
            'osx-font-smoothing',
            'font-style',
            'font-weight',
            "line-height",
            'letter-spacing',
            'word-spacing',
            "color",
            "text-align",
            'text-decoration',
            'text-indent',
            'text-overflow',
            'text-rendering',
            'text-size-adjust',
            'text-shadow',
            'text-transform',
            'word-break',
            'word-wrap',
            'white-space',
            'vertical-align',
            'list-style',
            'list-style-type',
            'list-style-position',
            'list-style-image',
            'pointer-events',
            'cursor',
            "background",
            "background-color",
            "border",
            "border-radius",
            'content',
            'outline',
            'outline-offset',
            'opacity',
            'filter',
            'visibility',
            'size',
            'transform',
        ],
    }
};

processors 属性由于此次并没有使用,所以不做介绍,有兴趣的同学可以查询官方文档。

plugins 是由社区创建的规则或规则集,支持方法论、工具集,非标准 的 CSS 特性,或非常特定的用例。

extends 继承一个已存在的配置文件。(在我的配置中,继承了css-module和官方推荐的配置)

rules 规则决定检测器要查找什么和要解决什么,所以,通过该选项你就可以开启相应规则,进行相应的检测。所有规则必须显式的进行配置,因为 没有默认值

注意: null为禁用规则。可以在rules里面重写覆盖官方推荐的配置规则。

5. 忽略lint文件

此时我们已经可以正常的使用stylelint来格式化样式代码了。但是在项目中往往会存在一些不需要格式化的代码,比如我们会单独抽离一个overrides文件来重写antd的样式。显然这里是不需要格式化的,因为antd的选择器命名可能跟我们的规范不尽相同。所以我们需要在运行lint时忽略这个文件。

我们可以在.stylelintrc.js中配置ignoreFiles

创建.stylelintignore文件。

我们可以通过 /* stylelint-disable */的方法,来对代码快进行忽略lint检测。

我采用的是第二种方法,配置如下:

// .stylelintignore
*.js
*.tsx
*.ts
*.json
*.png
*.eot
*.ttf
*.woff
*.css
src/styles/antd-overrides.less

6. 自动格式化

在进行完上文的配置之后,其实我们已经达到了规范的目的,但是如果每次都要跑一次lint无疑就会加重我们的编码负担。这里介绍两种方式在我们写样式代码时,对代码自动格式化的方法。

6.1 stylelint vs-code 插件

6.2 webpack plugin

为什么一个webpack插件可以帮助我们格式化样式代码呢,这是因为我们在热更新重新编译的时候,这个插件会帮我们检测代码。并根据.stylelintrc.js文件中配置的规则进行fix。 如果有lint错误可以选择让项目无法运行,避免将没有lint的样式上传到代码库。

于是我在使用这个插件的时候踩了好多坑,接下来我一一的说。

6.3 插件踩坑集锦

最开始时。按百度到的各路大神的写法,只需要这么配置就可以:

new StyleLintPlugin({
    context: "src",
    configFile: path.resolve(__dirname, './stylelintrc.js'),
    files: '**/*.less',
    failOnError: false,
    quiet: true,
    syntax: 'less'
})

结局不出意料,没有用。最恐怖的是他会给你一种假象,你本地运行的时候没有任务问题,让你误以为你的代码没有任何问题!其实,是这个插件没有作用到。

另外这么配置如果使用stylelint的vscode扩展时,还会有一大堆的让你心态爆炸的红波浪~~~~。

经过我的踩坑,终于完成了一个没有报错,没有假象,没有错误检查,没有忽略我的忽略配置的配置!

    new StylelintPlugin({
      configFile: path.resolve(__dirname, './.stylelintrc.js'),
      extensions: ['less'],
      files: 'src/**/*.less',
      fix: true,
      customSyntax: 'postcss-less',
      lintDirtyModulesOnly: true,
      threads: true,
      exclude: ['node_modules', 'src/styles/antd-overrides.less'],
    })

7. commit检测

这个就比较简单了,如果项目之前配置过eslint时的commit检测,这里只需要在脚本中加入检测样式就可以。配置如下

  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --ext js,ts,tsx --fix",
      "git add"
    ],
    "*.less": [
      "stylelint --fix  --custom-syntax postcss-less",
      "git add"
    ]
  }

这里其实是不需要跑yarn lint:css的,因为如果这样在commit时会全量检测所有src下的样式,然而其实我们只需要检测修改的文件即可。

特别注意: 一定要加上 --custom-syntax postcss-less

以上就是引入stylelint实战遇到问题经验总结分享的详细内容,更多关于引入stylelint实战问题分享的资料请关注我们其它相关文章!

(0)

相关推荐

  • 使用 stylelint检查CSS_StyleLint

    当你书写大量的CSS代码时,可能会出现不止一个的错误.可能需要某个工具来阻止你CSS书写的错误. 可能,有的时候你的错误真的是一个bug.也有可能仅仅因为草率造成的不一致或者不明确的代码风格.可能它们当中的许多看起来微不足道(取决于你的性子),但是随着代码库的增多以及时间累积,许多人使用时就会做出有丑陋的东西.事情的后果不是你可以想象的. 你尝试去控制自己.你的同事也帮助你,当你游离及时纠正你的错误.但是,你和你的同事都是错误的制造者,所以最后至少在一定程度上都不可避免的失败了.后来,你或者其他

  • CSS代码检查工具stylelint的使用方法详解

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

  • vue单文件组件lint error自动fix与styleLint报错自动fix详解

    问题描述 之前用Vue(多入口打包成多页)的项目,要修改迁移并修改为一个单页应用,且使用Vue脚手架生成项目,要对js,vue,css文件的代码做lint,在修改Webpack配置后第一次跑lint居然报了几万个Error,且是在eslint加了--fix选项的情况下,且错误大多集中在顺序问题上也就是vue/order-in-components和order/properties-order的错误.以下是问题的解决方式及过程记录. stylelint中css属性顺序错误 .stylelint的配

  • 引入代码检查工具stylelint实战问题经验总结分享

    目录 前言 正文 1. 安装stylelint 2. 配置文件 3. 使用stylelint 踩坑点1: 4. 配置规则 5. 忽略lint文件 6. 自动格式化 6.1 stylelint vs-code 插件 6.3 插件踩坑集锦 7. commit检测 前言 团队合作时,当每个人的代码都拥有自定义的格式化方式时,在提交merge的时候往往要解决很多冲突,此时我们可以使用eslint+stylelint来对团队的代码进行约束. 正文 stylelint是一个强大的,现代的代码检查工具,可以帮

  • 在React项目中使用Eslint代码检查工具及常见问题

    背景 最近使用 create-react-app 创建了一个项目.但是众所周知的是,这个脚手架创建的项目并没有默认加入 Eslint 等 lint 插件来规范代码. 考虑到项目中很多项目没有使用类似的代码检查工具,为了规范开发.这次有必要记录一下流程. 使用 Eslint 流程 1. 安装 Eslint 首先,先安装 Eslint 到项目本地(全局安装亦可). npm --save-dev install eslint 安装完成之后,我们先创建基础的 .eslintrc.yml (建议使用 .y

  • JS代码检查工具ESLint介绍与使用方法

    ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码. 发展历史 Douglas Crockford大神根据自己的理念用JavaScript写了一个JavaScript代码规范检查工具,这就是JSLint.后来非常流行,也的确帮助了广大的JavaScript程序员.但是,大神对于自己的代码规范不做丝毫的妥协,对开源社区的反馈的回应也不礼貌.于是,JSLint从一个帮助程序员规范代码,避免Bug的工具,变成了一个让代码像Crockford的工具.在最不信神的

  • Java 代码检查工具之PMD入门使用详细教程

    介绍 PMD是一个静态源代码分析器.它发现了常见的编程缺陷,如未使用的变量.空捕获块.不必要的对象创建等等. 官网:点这里 官方文档:点这里 使用方式 1.使用插件的方式 下载:File -> Settings -> Plugins -> Marketplace 搜索 "PMDPlugin" ,下载插件. 使用方法:在代码编辑框或Project 窗口的文件夹.包.文件右键,选择"Run PMD"->"Pre Defined"

  • python代码检查工具pylint 让你的python更规范

    1.pylint是什么? Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准(Pylint 默认使用的代码风格是 PEP 8,具体信息,请参阅参考资料)和有潜在问题的代码.目前 Pylint 的最新版本是 pylint-0.18.1. Pylint 是一个 Python 工具,除了平常代码分析工具的作用之外,它提供了更多的功能:如检查一行代码的长度,变量名是否符合命名标准,一个声明过的接口是否被真正实现等等. Pylint 的一个很大的好

  • Go代码检查的推荐工具及使用详解

    目录 1. Golint 2. Golangci-lint 3. Go-reporter 1. Golint (1)安装golint git clone https://github.com/golang/lint.git cd lint/golint go install (2)使用方式 # 检查单个文件 golint service.go # 检查当前目录所有.go文件,不会递归查找 golint (3)golint校验规则 不能使用下划线命名法,使用驼峰命名法 外部可见程序结构体.变量.函

  • python如何实现代码检查

    前言 通常我们的python代码都是遵循PEP8的规范化格式,目的是为了保持代码的一致性.可读性.,这里给大家推荐几个常用的静态代码检查工具,大家可以酌情选择使用 1. pylint Pylint是一个Python静态代码分析工具,它可以查找编程错误,帮助强制执行编码标准,嗅探代码异味并提供简单的重构建议. 它具有高度可配置性,具有特殊的编译指示来控制代码中的错误和警告,以及广泛的配置文件.也可以编写自己的插件来添加自己的检查或以某种方式扩展pylint. 缺省情况下,PyLint 启用许多规则

  • python中pylint使用方法(pylint代码检查)

    一.Pylint 是什么 Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准和有潜在问题的代码. Pylint 是一个 Python 工具,除了平常代码分析工具的作用之外,它提供了更多的功能:如检查一行代码的长度,变量名是否符合命名标准,一个声明过的接口是否被真正实现等等. Pylint 的一个很大的好处是它的高可配置性,高可定制性,并且可以很容易写小插件来添加功能. 如果运行两次 Pylint,它会同时显示出当前和上次的运行结果,从而可

  • Android使用注解进行代码检查的实现方法

    Android Studio 内置了代码检查工具 Lint,可在菜单栏选择 Analyze > Inspect Code 执行相应的代码检查,代码检查能够根据推断一些不合法的潜在问题,有助于在开发阶段发现开发者因为主管原因导致的一下代码问题,Android 官方提供了注解库 support-annotations 来帮助开发者及早发现问题,下面是常用的一些注解,主要内容如下: Nullness注解 资源注解 线程注解 值约束注解 权限注解 返回值注解 CallSuper注解 Typedef注解

随机推荐