深圳网站建设骏域网站建设,wordpress商店网页,十堰的网站建设,wordpress增加底部导航栏样式规范工具#xff08;StyleLint#xff09;
Stylelint 是一个灵活且强大的工具#xff0c;适用于保持 CSS 代码的质量和一致性。结合其他工具#xff08;如 Prettier 和 ESLint#xff09;#xff0c;可以更全面地保障前端代码的整洁性和可维护性。 目录 样式规范工具…样式规范工具StyleLint
Stylelint 是一个灵活且强大的工具适用于保持 CSS 代码的质量和一致性。结合其他工具如 Prettier 和 ESLint可以更全面地保障前端代码的整洁性和可维护性。 目录 样式规范工具StyleLint1、安装 VSCode 插件StyleLint2、在项目中下载 StyleLint 相关依赖3、在目录的 .vscode 文件夹下的 settings.json 文件中加入如下配置4、配置 StyleLint.stylelintrc.cjs5、package.json添加脚本命令 1、安装 VSCode 插件StyleLint VS Code插件StyleLint可以在编辑器中提供实时的 CSS 代码检查和提示但是它仅仅是基于 Stylelint 包的扩展不能完全取代在项目中导入 Stylelint 包并做一些配置的操作
2、在项目中下载 StyleLint 相关依赖
pnpm add stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss stylelint-config-recess-order postcss postcss-html stylelint-config-prettier -D注意最新的stylelint版本可能和后面的其他包的版本产生冲突如果你没有使用pnpm而是npm建议直接加上了强制安装依赖项 --legacy-peer-deps或者--force 依赖作用描述stylelintstylelint 核心库stylelint-config-htmlStylelint 的可共享 HTML和类似 HTML配置捆绑 postcss-html 并对其进行配置。stylelint-config-recommended-scss扩展 stylelint-config-recommended 共享配置并为 SCSS 配置其规则stylelint-config-recommended-vue扩展 stylelint-config-recommended 共享配置并为 Vue 配置其规则stylelint-config-standard打开额外的规则来执行在规范和一些 CSS 样式指南中发现的通用约定包括惯用 CSS 原则谷歌的 CSS 样式指南Airbnb 的样式指南和 mdo 的代码指南。stylelint-config-standard-scss扩展 stylelint-config-standard 共享配置并为 SCSS 配置其规则stylelint-config-recess-order属性的排序插件包postcsspostcss-html 的依赖包postcss-html用于解析 HTML和类似 HTML的 PostCSS 语法stylelint-config-prettier关闭所有不必要的或可能与 Prettier 冲突的规则
3、在目录的 .vscode 文件夹下的 settings.json 文件中加入如下配置
{editor.formatOnSave: true,editor.codeActionsOnSave: {source.fixAll.stylelint: explicit},stylelint.enable: true,stylelint.validate: [css,less,postcss,scss,vue,sass,html],files.eol: \n
}4、配置 StyleLint.stylelintrc.cjs
// see: https://stylelint.iomodule.exports {root: true,// 继承某些已有的规则extends: [stylelint-config-standard, // 配置 stylelint 拓展插件stylelint-config-html/vue, // 配置 vue 中 template 样式格式化stylelint-config-standard-scss, // 配置 stylelint scss 插件stylelint-config-recommended-vue/scss, // 配置 vue 中 scss 样式格式化stylelint-config-recess-order, // 配置 stylelint css 属性书写顺序插件,stylelint-config-prettier, // 配置 stylelint 和 prettier 兼容],overrides: [// 扫描 .vue/html 文件中的 style 标签内的样式{files: [**/*.{vue,html}],customSyntax: postcss-html,},],rules: {function-url-quotes: always, // URL 的引号 always(必须加上引号)|never(没有引号)string-quotes: double, // 指定字符串使用单引号或双引号 single(单引号)|double(双引号)unit-case: lower, // 指定单位的大小写 lower(全小写)|upper(全大写)color-hex-case: lower, // 指定 16 进制颜色的大小写 lower(全小写)|upper(全大写)color-hex-length: long, // 指定 16 进制颜色的简写或扩写 short(16进制简写)|long(16进制扩写)rule-empty-line-before: never, // 要求或禁止在规则之前的空行 always(规则之前必须始终有一个空行)|never(规则前绝不能有空行)|always-multi-line(多行规则之前必须始终有一个空行)|never-multi-line(多行规则之前绝不能有空行)block-opening-brace-space-before: always, // 要求在块的开大括号之前必须有一个空格或不能有空白符 always(大括号前必须始终有一个空格)|never(左大括号之前绝不能有空格)|always-single-line(在单行块中的左大括号之前必须始终有一个空格)|never-single-line(在单行块中的左大括号之前绝不能有空格)|always-multi-line(在多行块中左大括号之前必须始终有一个空格)|never-multi-line(多行块中的左大括号之前绝不能有空格)font-family-no-missing-generic-family-keyword: null, // 禁止在字体族名称列表中缺少通用字体族关键字scss/at-import-partial-extension: null, // 解决不能使用 import 引入 scss 文件property-no-unknown: null, // 禁止未知的属性no-empty-source: null, // 禁止空源码selector-class-pattern: null, // 强制选择器类名的格式value-no-vendor-prefix: null, // 关闭 vendor-prefix (为了解决多行省略 -webkit-box)no-descending-specificity: null, // 不允许较低特异性的选择器出现在覆盖较高特异性的选择器value-keyword-case: null, // 解决在 scss 中使用 v-bind 大写单词报错selector-pseudo-class-no-unknown: [true,{ignorePseudoClasses: [global, v-deep, deep],},],},ignoreFiles: [**/*.js, **/*.jsx, **/*.tsx, **/*.ts],
};这么配置完之后其实在已经生成的css文件中没有按照规范书写的css就会提示红色波浪线的错误信息了我们创建了一个测试的css文件如下 5、package.json添加脚本命令
scripts:{//...其他省略lint:stylelint: stylelint --cache --fix \**/*.{vue,less,postcss,css,scss}\ --cache --cache-location node_modules/.cache/stylelint/,
}运行脚本npm run lint:stylelint 如果出现如下图这种情况报错...powershell.exe -Command pnpm run lint:stylelint已经终止退出代码1。请使用管理员模式打开vscode原因是vscode执行终端受系统策略限制可参考我之前的文章pnpm : 无法加载文件 D:\Program Files\nvm_nodejs\pnpm.ps1因为在此系统上禁止运行脚本。。 记得配置这种个选项的时候需要关闭所有vscode否则重新打开会警告并关闭自身 执行命令后的最终效果未能自动化处理的需要手动处理。
会修复格式排版比如缩进关键字优先级上一张图全部红色波浪线的问题就是关键字优先级排序
