CSS代码检查工具stylelint的使用方法详解(2)

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版本后,导致styled-components中的CSS代码无法正常校验,所以稳妥起见,使用9.1.3版本的

CSS代码检查工具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多条规则中,使用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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzxpy.html