scss-lintの導入方法とその紹介

エンジニアの井戸田です。

今回は自分たちが導入したscss-lintについての実装方法を紹介したいと思います！

scss-lintとはCSS拡張メタ言語scssのRuby製解析ツールで、scssのコードが設定に違反していた場合、警告をしてくれるツールです。

ついfatになってしまいがちで、１度書いてしまうと中々修正しにくいcssですが、scss-lintを使用することにより、統一感を持ったコードになり、リファクタリング時にも修正がしやすいと思います。

scss-lint - Configurable tool for writing clean and consistent SCSS

インストール

$ gem install scss_lint

またGimfileに以下を入力してbundle installでインストールすることができます。

gem 'scss_lint', require: false

実行方法

スキャンするディレクトリまたはファイル名をコマンドラインに渡すことによって、scss-lintを実行することができます。

$ scss-lint app/assets/stylesheets/

$ scss-lint app/assets/stylesheets/base.scss

またオプションで-v/--versionでバージョンを確認することができます。

様々なオプションがあるので、上記のURLからご覧ください。

$ scss-lint -v/--version

実装

scss-lintはデフォルトで下記のような設定になっています。

https://github.com/brigade/scss-lint/blob/master/config/default.yml

この設定の中で、自分たちが不必要だと思う設定に対して、ホームディレクトリに .scss.ymlをいうファイルを作成し記述することで、その設定を無効化していきます。

.scss.ymlの記述例

exclude: 'app/assets/stylesheets/plugins/**'

linters:
  ColorVariable:
    enabled: false

exclude : スキャンして欲しくないディレクトリまたはファイルを記載します。
linters : linters:以下に無効化したい設定を記述していきます。
enabled : こちらにはlinterを実行するかどうかをtrueまたはfalseで記述していきます。上記の設定はColorVariableをenables: falseと記述しており、ColorVariableという設定を無効化させています。

設定の紹介

下記のURLに各設定の内容が記述されています。

ここで自分たちが重要だと思った設定をいくつか紹介していきたいと思います。

https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md

EmptyLineBetweenBlocks

個別のルール、機能、@mixin宣言の後に空行をいれるという設定です。このようにすることでコードが一気に見やすくなります。

// Bad

div {
  margin: 10px;
  a {
  
    ...
  }
}
p {
  margin: 0;
}

// Good

div {
  margin: 10px;
  
  a {
    ...
  }
}

p {
  margin: 0;
}

EmptyRule

空のルールがある場合警告するという設定です。つい見逃してしまいがちですが、この設定で気付くことができますね。

// Bad

p {
}

HexLength

短い又は長いスタイルオプションを設定することすることができます。

// long
color: #ffffff;

//short
color: #fff;

項目としてshort又はlongがありデフォルトでshortになります。

ImportantRule

!importantを使用しないという項目です。

つい使ってしまいがちの!importantですが使用することで、脆いコードになってしまいます。なので弊社では使用しないようにしています。

// Bad

p {
  color: #f00 !important;
}

MergeableSelector

同じ深さで２度同じプロパティを使わないという設定です。

// Bad

h1 {
  margin: 10px;
}

.baz {
  color: red;
}

h1 {
  text-transform: uppercase;
}


h1.new {
  color: #000;
}

// Good

h1 {
  margin: 10px;
  text-transform: uppercase;
  
  &.new {
    color: #000;
  }
}

.baz {
  color: red;
}

PropertySortOrder

記入するプロパティの順番を決めます。自分の好きな順番にカスタマイズすることもできますが、下記のように記載することで元々設定されているsmacssの順番にすることができます。

  PropertySortOrder:
    order: smacss

またsmacss以外にもconcentric, recessなどがありプロパティの順番については以下のURLからご覧ください。

property-sort-orders

Shorthand

サポートするプロパティに可能な最も短い表記で書くという設定です。

// Bad

margin: 1px 1px 1px 1px;

margin: 1px 0 1px 0;

margin: 1px 1px 0 1px;

// Good

margin: 1px;

margin: 1px 0;

margin: 1px 1px 0;

UnnecessaryParentReference

不要な時に親セレクタ（&）を使用しないという設定です。

// Bad

div {
  & > a {
    ...
  }
}

// Good

div {
  > a {
    ...
  }
}

ZeroUnit

値が0の時には単位を省略するという設定です。

// Bad

p {
  margin: 0px;
}

// God

p {
  margin: 0;
}

最後に

今回は「scss-lintの導入方法とその紹介」でした。 scssを使って実装されている方がいましたらぜひ導入してみてください。開発が複数人いる企業にとって統一感をもったコードを書くのは難しいですが、こちらを導入することで、皆同じ記述で実装ができレビュー時も見やすくなると思います。紹介した設定の他にもscss-lintには様々な設定があるので、ぜひ調べてみてください。

最後まで読んでいただきありがとうございます。　

井戸田

参考文献