SCSS-Lint

審查代碼是非常重要的事情。通常來(lái)說(shuō)，遵從一份樣式指南的規(guī)范可以幫助減少代碼質(zhì)量上的問(wèn)題，但是沒(méi)有人的工作是無(wú)懈可擊的，何況總有些地方需要改善。所以，可以認(rèn)為，審查代碼和注釋文檔一樣重要。

SCSS-lint?是一個(gè)幫你保持 SCSS 文件簡(jiǎn)潔而又具有可讀性的工具。它是完全可定制化的，并且非常易于和其他工具集成。

幸運(yùn)的是，本文檔的描述非常類似于 SCSS-lint 的使用建議。為了根據(jù) Sass 樣式指南配置 SCSS-lint，建議如下配置：

# For SCSS-Lint v0.32.0

linters:

  BangFormat:
    enabled: true
    space_before_bang: true
    space_after_bang: false

  BorderZero:
    enabled: true

  ColorKeyword:
    enabled: false

  Comment:
    enabled: false

  DebugStatement:
    enabled: true

  DeclarationOrder:
    enabled: true

  DuplicateProperty:
    enabled: false

  ElsePlacement:
    enabled: true
    style: same_line

  EmptyLineBetweenBlocks:
    enabled: true
    ignore_single_line_blocks: false

  EmptyRule:
    enabled: true

  FinalNewline:
    enabled: true
    present: true

  HexLength:
    enabled: true
    style: short

  HexNotation:
    enabled: true
    style: lowercase

  HexValidation:
    enabled: true

  IdSelector:
    enabled: true

  ImportPath:
    enabled: true
    leading_underscore: false
    filename_extension: false

  Indentation:
    enabled: true
    character: space
    width: 2

  LeadingZero:
    enabled: true
    style: include_zero

  MergeableSelector:
    enabled: false
    force_nesting: false

  NameFormat:
    enabled: true
    convention: hyphenated_lowercase
    allow_leading_underscore: true

  NestingDepth:
    enabled: true
    max_depth: 3

  PlaceholderInExtend:
    enabled: true

  PropertySortOrder:
    enabled: false
    ignore_unspecified: false

  PropertySpelling:
    enabled: true
    extra_properties: []

  QualifyingElement:
    enabled: true
    allow_element_with_attribute: false
    allow_element_with_class: false
    allow_element_with_id: false

  SelectorDepth:
    enabled: true
    max_depth: 3

  SelectorFormat:
    enabled: true
    convention: hyphenated_lowercase
    class_convention: '^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-z][a-zA-Z0-9]*)?$'

  Shorthand:
    enabled: true

  SingleLinePerProperty:
    enabled: true
    allow_single_line_rule_sets: false

  SingleLinePerSelector:
    enabled: true

  SpaceAfterComma:
    enabled: true

  SpaceAfterPropertyColon:
    enabled: true
    style: one_space

  SpaceAfterPropertyName:
    enabled: true

  SpaceBeforeBrace:
    enabled: true
    style: space
    allow_single_line_padding: true

  SpaceBetweenParens:
    enabled: true
    spaces: 0

  StringQuotes:
    enabled: true
    style: single_quotes

  TrailingSemicolon:
    enabled: true

  TrailingZero:
    enabled: true

  UnnecessaryMantissa:
    enabled: true

  UnnecessaryParentReference:
    enabled: true

  UrlFormat:
    enabled: false

  UrlQuotes:
    enabled: true

  VendorPrefixes:
    enabled: true
    identifier_list: base
    include: []
    exclude: []

  ZeroUnit:
    enabled: true

如果你想將 SCSS-lint 插入到 Grunt 構(gòu)建過(guò)程中，那么 Grunt 插件grunt-scss-lint?一定會(huì)對(duì)你有所幫助。

此外，如果你在尋找一個(gè)運(yùn)行 SCSS-lint 的簡(jiǎn)潔工具，那么?Thoughtbot(Bourbon, Neat...) 正在開發(fā)的?Hound?也會(huì)對(duì)你有所幫助。

擴(kuò)展閱讀

• SCSS-lint
• Clean Up your Sass with SCSS-lint
• Improving Sass code quality on theguardian.com
• grunt-scss-lint
• An Auto-Enforceable SCSS Styleguide