eslint-config-fhfe

stylelint-config-fhfe 是烽火 UED 前端组为了帮助保持团队的代码风格统一，发现代码潜在错误而定制出了友好的 styleLint 配置。

使用

• 安装 stylelint

  npm install -g stylelint 

• 项目中使用

  npm install --save-dev stylelint-config-fhfe

  在你的项目根目录下创建 .stylelintrc，并将以下内容复制到文件中：

  {
      extends: [
          'stylelint-config-fhfe',
      ],
      rules: {
          // 这里填入你的项目需要的个性化配置
      }
  }

  运行

  stylelint demo.css

规则

[stylelint](http://stylelint.cn/user-guide/rules/) 有百余条内置规则。它们希望为广大开发者提供更有价值的 标准 CSS 。每个规则都是独立的，默认情况下为关闭状态并没有默认值。

#stylefmt 表示可以用 stylefmt 修复

• 颜色

  • color-hex-case lower 颜色值为小写字母 #stylefmt
  • color-no-invalid-hex true 颜色值不能为无效值

• At-rule

  • at-rule-name-space-after always @xx 后需空格
  • at-rule-semicolon-new-new-line alway @xx 分号后要换行

• 函数

  • function-calc-no-unspaced-operator true 方法中的计算符号左右需空格
  • function-comma-space-after always 方法中逗号后需空格
  • function-linear-gradient-no-nonstandard-direction true linear-gradient() 内参数严格按照 css 规范
  • function-max-line-lines 0 方法中参数允许 0 行空行
  • function-parentheses-newline-inside never-multi-line 方法中参数允许逗号后换行
  • function-url-quotes always 地址一定要写引号
  • function-whitespace-after always 方法之间一定要空格

• 数值

  • number-leading-zero never 数字不以 0 开头。错误：0.5；正确：.5 #stylefmt
  • number-no-trailing-zeros true 不能有数字末尾多余的 0。错误：1.000；正确：1 #stylefmt

• 字符串

  • string-no-newline true 字符串之前不能有 “\n" #stylefmt
  • string-quotes double 字符串最外层用双引号，而不是单引号 #stylefmt

• 长度

  • length-zero-no-unit true 长度为 0 时，禁止使用单位 #stylefmt

• 单位

  • unit-case lower 单位小写
  • unit-no-unknown true 不允许未知的单位

• 值

  • value-keyword-case lower 属性值小写
  • value-list-comma-newline-after always-multi-line 属性值列不允许逗号前换行
  • value-list-comma-space-after always 属性值列表逗号后需空格

• 简写

  • shorthand-properyu-no-redundat-values true 可简写的属性不重复写，错误：margin: 1px 1px; #stylefmt

• 声明

  • declaration-bang-space-after never !important 中！后不空格
  • declatation-bang-space-before always !important 中！前空一格
  • declatation-colon-space-after always 属性名冒号后空一格 #stylefmt
  • declatation-colon-space-before never 属性名冒号前不空格 #stylefmt
  • declatation-block-no-ignored-properties true 禁止那些由于在同一规则的另一个属性值忽略的属性值。
  • declaration-block-no-shorthand-property-overrides true 错误：border-top-width: 1px; border: 2px solid blue;
  • declaration-block-semicolon-newline-after always-multi-line 一个模块要么整个模块一行显示，要么分号后分行显示
  • declaration-block-semicolon-space-after always-single-line 属性之间分号后空一格或换行
  • declaration-block-semicolon-newline-before never-multi-line 分号前不允许换行
  • declaration-block-semicolon-space-before never 分号前不允许空格
  • declaration-block-trailing-semicolon always 模块内最后一个属性必须有分号

• 块

  • block-no-empty true 不允许模块内为空
  • block-opening-brace-space-after always-single-line 模块单行时 “{” 后空一格 #stylefmt
  • block-opening-brace-space-before always “{” 前空一格 #stylefmt
  • block-closing-brace-space-before always-single-line 模块单行时 “}” 前空一格 #stylefmt

• 选择器

  • selector-attribute-brackets-space-inside always “[” 后空一格，“]” 前空一格
  • selector-attribute-operator-space-after always “[]” 内的 “=” 后空一格
  • selector-attribute-operator-space-before always “[]” 内的 “=” 前空一格
  • selector-combinator-space-after always 选择器后空一格，例如：ul> li #stylefmt
  • selector-combinator-space-before always 选择器前空一格，例如：ul >li #stylefmt
  • selector-max-compound-selectors 4 最多 4 层选择器
  • selector-no-universal true 不允许通用选择器
  • selector-pseudo-class-case lower 伪类选择器小写（：hover 之类）
  • selector-pseudo-class-no-unknown true 不允许 css 规范外的伪类选择器（：hover 之类）
  • selector-pseudo-element-case lower 伪类选择器小写（：: before 之类）
  • selector-pseudo-element-no-unknown true 不允许 css 规范外的伪类选择器（：: before 之类）
  • selector-type-case lower 标签选择器小写
  • selector-max-empty-lines 0 选择器共用一个模块，选择器之间允许 0 行空白
  • selector-list-comma-newline-before never-multi-line 选择器共用一个模块，选择器之间要么一行，要么逗号后换行 #stylefmt
  • selector-list-comma-space-after always-single-line 选择器共用一个模块，选择器一行时，逗号后空一格 #stylefmt

• 媒体规则

  • media-query-list-comma-newline-before always-single-line 媒体查询列表中不允许逗号之前换行
  • media-query-list-comma-space-after always-single-line 媒体查询列表中单行逗号之后空一格

• 注释

  • comment-whitespace-inside always 注释符之间空格。正确：/* haha */

• 常用样式

  • indentation 4 缩进 4 个空格 #stylefmt
  • max-empty-lines 1 内容之间最多允许 1 行空白行
  • max-nesting-depth 4 sass 中允许嵌套的深度为 4
  • no-descending-specificity true 选择的同一元素，不允许权重较轻的选择器出现在权重较重的之后
  • no-duplicate-selectors true 一个样式表不允许相同的选择器出现
  • no-empty-source true 样式表不允许为空
  • no-eol-whitespace true 样式表末尾不允许空行
  • no-extra-semicolons true 不允许多余的分号
  • no-invalid-double-slash-comments false 不允许 // 注释
  • no-unknown-animations true> animation 的 name 不能是 keyframes 没有定义的

其它

• vscode 插件
• 官方参考 配置
• stylelint 中文