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

こんにちは、エンジニアの井戸田です。

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

ref) https://github.com/sds/slim-lint

インストール

$ 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」を導入することで、気をつけて同じフォーマットにしようとしていても、どうしても見逃してしまう部分や、一行に書くのではなく、改行をし複数行で記述することで、コード自体がかなり見やすくなると思います。

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