トップ > HTMLテンプレートエンジン「slim」の解析ツールslim-lintを導入してみた！

HTMLテンプレートエンジン「slim」の解析ツールslim-lintを導入してみた！

こんにちは、エンジニアの井戸田です。 弊社ではmamanokoという子育てをするママのためのメディアをRuby on Railsで運営しており、viewではHTMLテンプレートエンジンであるslimを使用しています。今までrubyの解析ツール rubocop や、scssの解析ツール scss-lint は導入しましたが、slimの解析ツールを導入していなかったということで、今回導入してみました。

f:id:cluex-developers:20161105201859j:plain

インストール

$ gem install slim_lint

又は Gemfile に下記を記入して bundle install をすることでインストールが可能です。

gem 'slim_lint', require: false

require: false を指定することで、 autorequire をしないようにしています。

実行方法

スキャンするディレクトリ、又は複数のディレクトリを指定することによって、コマンドラインから slim-lint を実行することが可能です。

$ slim-lint app/views

$ slim-lint app/**/*.slim

又 slim-lint -v/--version を指定するとバージョンを確認ができます。他にもいろいろなオプションがあるので、下記のURLから御覧ください。
ref) https://github.com/sds/slim-lint#usage

実装

slim-lintはデフォルトで下記のような設定になっています。
ref) https://github.com/sds/slim-lint/blob/master/config/default.yml

# Default application configuration that all configurations inherit from.
#
# This is an opinionated list of which hooks are valuable to run and what their
# out of the box settings should be.
# Whether to ignore frontmatter at the beginning of Slim documents for
# frameworks such as Jekyll/Middleman
skip_frontmatter: false

linters:
  CommentControlStatement:
    enabled: true

  ConsecutiveControlStatements:
    enabled: true
    max_consecutive: 2

  EmptyControlStatement:
    enabled: true

  RedundantDiv:
    enabled: true

  LineLength:
    enabled: true
    max: 80

  RuboCop:
    enabled: true
    # These cops are incredibly noisy since the Ruby we extract from Slim
    # templates isn't well-formatted, so we ignore them.
    # WARNING: If you define this list in your own .slim-lint.yml file, you'll
    # be overriding the list defined here.
    ignored_cops:
      - Lint/BlockAlignment
      - Lint/EndAlignment
      - Lint/Void
      - Metrics/LineLength
      - Style/AlignHash
      - Style/AlignParameters
      - Style/BlockNesting
      - Style/FileName
      - Style/FirstParameterIndentation
      - Style/FrozenStringLiteralComment
      - Style/IfUnlessModifier
      - Style/IndentationConsistency
      - Style/IndentationWidth
      - Style/MultilineArrayBraceLayout
      - Style/MultilineAssignmentLayout
      - Style/MultilineHashBraceLayout
      - Style/MultilineMethodCallBraceLayout
      - Style/MultilineMethodDefinitionBraceLayout
      - Style/MultilineMethodCallIndentation
      - Style/MultilineOperationIndentation
      - Style/Next
      - Style/TrailingBlankLines
      - Style/TrailingWhitespace
      - Style/WhileUntilModifier

  TagCase:
    enabled: true

  TrailingWhitespace:
    enabled: true

この設定の中で、不要・変更したい設定に対して、ホームディレクトリに .slim-lint.yml というファイルを作成し、記述することで無効化・変更します。

.slim-lint.yml の記述例

exclude:
  - 'repository_name/app/views/**/*.slim'

linters:
  CommentControlStatement:
    enabled: false

  LineLength:
    include: 'repository_name/app/views/**/*.slim'
    max: 80
    
  EmptyControlStatement:
    exclude: 'repository_name/app/views/**/*.slim'
オプション 説明
exclude slim-lintや各linterから除外したいファイルがある時に使用します。
include 指定したファイルで絞り込みを行います。
enable false とした時には、そのlinterが走ることはありません。そのlinterが不要な時に使用します。

linterの説明

CommentControlStatement

コメントの書き方についての制御するlinterです。

  • Bad
# commentout
  • Good
/ commentout

ConsecutiveControlStatements

連続の制御文に対して制御するlinterです。
ConsecutiveControlStatements には下記ようなオプションがあります。 制御構文が同じインデントで2行以上続くのでしたら、見やすさからviewに書かずに helper にその制御を移動させた方がいいと思います。

オプション 説明
max_consecutive 行に指定できる制御文の最大数
  • Bad
- code1
- code2
- code3
  • Better
ruby:
  code1
  code2
  code3
  • Good
- helper_method_name

EmptyControlStatement

空行に対して制御するlinterです。 こちらのlinterを true にすると空行がなくなり、場合によっては見づらくなる可能性があるので、注意する必要がありそうですね。

  • Bad
p pタグ
-
p pタグ
  • Good
p pタグ
p pタグ

RedundantDiv

div タグに対して制御するlinterです。
slimでは div.class_name と書かずに .class_name と記述するだけで divタグ になります。不要な場合に div と記述しないというのが、このlinterの役割です。

  • Bad
div.class_name
  • Good
    class・idを指定せず、ただの改行などの場合に使用する場合には div と記述する必要があります。
div
  • Good
.class_name

RuboCop

このlinterはテンプレート内に存在する Ruby コードをチェックする為のものです。
ホームディレクトリに作成された .rubocop.yml の内容が反映されるようです。
ref) https://github.com/bbatsov/rubocop

オプション 説明
ignored_cops 無視したいRubocopの設定を記述

TagCase

大文字のタグ名を報告するlinterです。 HTMLの標準では、小文字のタグ名を限定するということはなく、大文字でも対応できるのですが、XHTMLでは小文字の記述が必須なので、一貫性としてこのlinterが作られたようです。
個人的に大文字・小文字が混ざっているいると見づらい点や、小文字にすることで大文字より見やすくなる点があるので、小文字で揃えた方がいいと思います。

  • Bad
BODY
  p pタグ
  • Good
body
  p pタグ

いかがでしたでしょうか？ slim-lint を導入することで、気をつけて同じフォーマットにしようとしていても、どうしても見逃してしまう部分や、行数を制限することで、１つのファイルだけで処理するのではなく、partial化させることにより見やすくなると思います。

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

We’re hiring!

フロントエンジニアの方で、サーバーサイドを触ってみたい方、ぜひ一度Cluexに遊びに来てください！！

www.wantedly.com

www.wantedly.com