, ,

[Front-End General] sass-lint: .sass/.scss ファイルを lint する

公開日: 2016/03/29
更新日: 2018/12/26

css-lint から乗り換えを検討。

sass-lint は、.sass と .scss、つまり SASS 記法と SCSS記法の両方に対応。

しばらく放置していたものを自己解決した。

Contents

Install

プロジェクト内で利用する場合。

% npm install sass-lint --save-dev

IDE

例えば atom に導入するには、下記でインストール。

% apm install linter-sass-lint

が、うまく動いていないように見える。保留。

Config

下記のサンプルから .sass-lint.yml ファイルを作成。

#########################
## Sample Sass Lint File
#########################
# Linter Options
options:
  # Don't merge default rules
  merge-default-rules: false
  # Set the formatter to 'html'
  formatter: html
  # Output file instead of logging results
  output-file: 'linters/sass-lint.html'
# File Options
files:
  include: 'source/stylesheets/**/*.s+(a|c)ss'
  ignore:
    - 'source/stylesheets/foundations/**/*.*'
# Rule Configuration
rules:
  extends-before-mixins: 2
  extends-before-declarations: 2
    :

Converter

.scss-lint.yml からのコンバーターがある。

Usage

CLI での実行は、下記オプション付きだった。
わかりにくい。

% $(npm bin)/sass-lint -c .sass-lint.yml -q -v
Output successfully written to /Users/****/projects/****/linters/sass-lint.html

公式で紹介されている標準設定ファイルのように、CLI 上に出力するよう formatter: stylish へ設定を変更する。

#########################
## Sample Sass Lint File
#########################
# Linter Options
options:
  # Don't merge default rules
  merge-default-rules: false
  # Set the formatter to 'stylish'
  formatter: stylish
# File Options
files:
  include: 'source/stylesheets/**/*.s+(a|c)ss'
  ignore:
    - 'source/stylesheets/foundations/**/*.*'
# Rule Configuration
rules:
  extends-before-mixins: 2
  extends-before-declarations: 2
    :

実行。

% $(npm bin)/sass-lint -c .sass-lint.yml -q -v
source/stylesheets/all.css.sass
  23:1  error  Indentation of 0, expected 2  indentation
  24:1  error  Indentation of 0, expected 4  indentation
source/stylesheets/layouts/_footer.sass
   7:1   error    Indentation of 0, expected 2                                  indentation
   7:27  error    Hex notation should all be upper case                         hex-notation
  10:1   error    Indentation of 0, expected 4                                  indentation
  10:14  error    Hex notation should all be upper case                         hex-notation
  13:1   error    Indentation of 0, expected 4                                  indentation
  22:1   error    Indentation of 0, expected 2                                  indentation
  24:12  error    Hex notation should all be upper case                         hex-notation

何とか動かせるようになったが、sass-lint のエラーが分かりづらく、運用でつまづいて手間取りそう。
SASS 記法を止めて、SCSS 記法へするかな。

補遺

SCSS の lint ツールは幾つかありましたが、コード内で特定箇所のみルールの除外が可能だった為 Ruby 実装ではありますが scss-lint にしました。
できれば Node.js だけで完結したかったのですが、Node.js 実装の lint ツールは現時点ではルールの除外ができなかったり、CLI 出力やオプション設定などで総合的に満足いくものが現状ありませんでした。