[Sass] .scss-lint.yml の導入方法・オススメの設定

Sass (Scss) 用 Linter scss-lint の設定ファイル .scss-lint.yml を導入する方法とオススメの設定をご紹介します。

.scss-lint.yml のダウンロード

scss-lint の設定ファイルは GitHub Repository に default.yml というファイル名で .scss-lint.yml のサンプルファイルが置いてあります。

ダウンロードしてきて .scss-lint.yml に名前を変更して使いましょう。以下のように curl コマンドを使ってダウンロードするのもありです。

curl https://raw.githubusercontent.com/brigade/scss-lint/master/config/default.yml \
-o .scss-lint.yml

.scss-lint.yml のカスタマイズ

デフォルトのままだとわざわざ設定ファイルをダウンロードしてきた意味が無いので、自分のプロジェクトにあった内容にカスタマイズします。

僕の場合は、以下のようにカスタマイズして使ってます。

.scss-lint.yml のカスタマイズ例

scss_files: "**/*.scss"
plugin_directories: ['.scss-linters']
 
# List of gem names to load custom linters from (make sure they are already
# installed)
plugin_gems: []
 
# Default severity of all linters.
severity: warning
 
linters:
  BangFormat:
    enabled: true
    space_before_bang: true
    space_after_bang: false
 
  BemDepth:
    enabled: false
    max_elements: 1
 
  BorderZero:
    enabled: true
    convention: zero # or `none`
 
  ChainedClasses:
    enabled: false
 
  ColorKeyword:
    enabled: true
 
  ColorVariable:
    enabled: true # なるべくカラーコードも変数化して定義を共通化できるようにする方針
 
  Comment:
    enabled: false # 残したいコメントが書けなくなるため false を設定
    style: silent
 
  DebugStatement:
    enabled: true
 
  DeclarationOrder:
    enabled: true
 
  DisableLinterReason:
    enabled: false
 
  DuplicateProperty:
    enabled: true
 
  ElsePlacement:
    enabled: true
    style: same_line # or 'new_line'
 
  EmptyLineBetweenBlocks:
    enabled: true
    ignore_single_line_blocks: true
 
  EmptyRule:
    enabled: true
 
  ExtendDirective:
    enabled: false
 
  FinalNewline:
    enabled: true
    present: true
 
  HexLength:
    enabled: false # 記述にゆらぎが発生するため false に設定
    style: short # or 'long'
 
  HexNotation:
    enabled: true
    style: lowercase # or 'uppercase'
 
  HexValidation:
    enabled: true
 
  IdSelector:
    enabled: true
 
  ImportantRule:
    enabled: true
 
  ImportPath:
    enabled: true
    leading_underscore: false
    filename_extension: false
 
  Indentation:
    enabled: true
    allow_non_nested_indentation: false
    character: space # or 'tab'
    width: 2
 
  LeadingZero:
    enabled: true
    style: include_zero # . 始まりの小数は可読性が低くなるので 0 を含める設定へ変更
 
  MergeableSelector:
    enabled: true
    force_nesting: true
 
  NameFormat:
    enabled: true
    allow_leading_underscore: true
    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
 
  NestingDepth:
    enabled: true
    max_depth: 4
    ignore_parent_selectors: false
 
  PlaceholderInExtend:
    enabled: true
 
  PrivateNamingConvention:
    enabled: false
    prefix: _
 
  PropertyCount:
    enabled: false
    include_nested: false
    max_properties: 10
 
  PropertySortOrder:
    enabled: false # sort by A-Z は意味あるグルーピングができなくなるので false を設定
    ignore_unspecified: false
    min_properties: 2
    separate_groups: false
 
  PropertySpelling:
    enabled: true
    extra_properties: []
    disabled_properties: []
 
  PropertyUnits:
    enabled: true
    global: [
      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
      'deg', 'grad', 'rad', 'turn',            # Angle
      'ms', 's',                               # Duration
      'Hz', 'kHz',                             # Frequency
      'dpi', 'dpcm', 'dppx',                   # Resolution
      '%']                                     # Other
    properties: {}
 
  PseudoElement:
    enabled: true
 
  QualifyingElement:
    enabled: true
    allow_element_with_attribute: false
    allow_element_with_class: false
    allow_element_with_id: false
 
  SelectorDepth:
    enabled: true
    max_depth: 4
 
  SelectorFormat:
    enabled: true
    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
 
  Shorthand:
    enabled: false # 省略しない方が可読性が高いので false を設定。圧縮ツールに任せる。
    allowed_shorthands: [1, 2, 3, 4]
 
  SingleLinePerProperty:
    enabled: true
    allow_single_line_rule_sets: true
 
  SingleLinePerSelector:
    enabled: true
 
  SpaceAfterComma:
    enabled: true
    style: one_space # or 'no_space', or 'at_least_one_space'
 
  SpaceAfterComment:
    enabled: false
    style: one_space # or 'no_space', or 'at_least_one_space'
    allow_empty_comments: true
 
  SpaceAfterPropertyColon:
    enabled: true
    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
 
  SpaceAfterPropertyName:
    enabled: true
 
  SpaceAfterVariableColon:
    enabled: false
    style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'
 
  SpaceAfterVariableName:
    enabled: true
 
  SpaceAroundOperator:
    enabled: true
    style: one_space # or 'at_least_one_space', or 'no_space'
 
  SpaceBeforeBrace:
    enabled: true
    style: space # or 'new_line'
    allow_single_line_padding: false
 
  SpaceBetweenParens:
    enabled: true
    spaces: 0
 
  StringQuotes:
    enabled: true
    style: single_quotes # or double_quotes
 
  TrailingSemicolon:
    enabled: true
 
  TrailingWhitespace:
    enabled: true
 
  TrailingZero:
    enabled: false
 
  TransitionAll:
    enabled: false
 
  UnnecessaryMantissa:
    enabled: true
 
  UnnecessaryParentReference:
    enabled: true
 
  UrlFormat:
    enabled: true
 
  UrlQuotes:
    enabled: true
 
  VariableForProperty:
    enabled: false
    properties: []
 
  VendorPrefix:
    enabled: true
    identifier_list: base
    additional_identifiers: []
    excluded_identifiers: []
 
  ZeroUnit:
    enabled: true
 
  Compass::*:
    enabled: false

デフォルト設定から変更している箇所のみ # 記述にゆらぎが発生するため false に設定 というようなコメントを残しています。

日本語の解説記事だと以下の記事を参考にしました。

参考情報