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