[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 に設定 というようなコメントを残しています。
日本語の解説記事だと以下の記事を参考にしました。