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

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

（编辑：ASP站长网）