持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

前言

对于一个项目来说，使用CSS规范是很有必要的，因为它可以统一项目开发人员所书写的所有CSS语法规范，以增加可维护性和可阅读性，有助于我们代码审阅。

正文

首先需要安装依赖配置项，一般都是安装标准的stylelint

npm install --save-dev stylelint stylelint-config-standard

随后再创建.stylelintrc.json文件，我们已经安装了标准的CSS代码规范依赖，所以我们就可以写入下载好的配置

{
    "extends": ["stylelint-config-standard"],
    "rules": {}
}

随后也可以进行Prettier格式化工具来进行代码的格式化，这里可以根据自己的需求或者是大项目已经协定好的需求来进行统一的格式化代码操作。具体操作是在根目录下面创建一个.prettierr文件，里面用来存放各种格式化具体参数。

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "insertPragma": false
}

如果想要直接通过命令行去修复项目中的css文件，我们可以在 package.json 文件的 scripts 加上命令, 规则检查自动修复css：

"style": "stylelint \"src/**/*.css\" --fix",

另外，我们还需要在vscode中进行vscode的相关配置，需要先安装StyleLint这个插件，在.vscode文件下的setting.json文件进行相关参数的设置

...
...
"editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true  // 保存自动检查并修复
 },

以上就是一个基本的项目CSS规范的配置，除了日常开发现在CSS书写存在哪些问题，如果是一个大项目的背景下，我们应该需要进行提交时检查的操作，顾名思义，提交时检查就是为了反正自己书写的代码不符合规范而推入远程仓库，一旦发现commit代码存在问题，那么就可以使提交的代码被拦截而不能够提交成功，需要安装husky和lint-staged，husky添加.husky用来对git hook进行统一管理，而安装lint-staged生成.lintstagedrc.json以用来管理不同文件类型需要执行的命令。

总结

至此，以上的步骤就基本完成了一个项目的CSS规范配置，还需要补充的就是，可能需要针对公司或者团队的不同的项目做出不同的规则制定，后续补充只需要修改对应文件即可。

CSS规范接入项目——stylelint配置使用

前言

正文

总结