時と場合によりけり

日々のアップデートとイノベーションに翻弄され彷徨える IT エンジニアの覚書

Atom に linter-scss-lint をインストールして SCSS のコードをチェックする

概要

Atom で SCSS のコードをチェックするために linter を導入してみます。

Atom については、次のエントリーをご参照ください。

macOS Sierra に Homebrew Cask で Atom をインストールする - 時と場合によりけり

ハードウェア

  • マシン: Macbook Pro Early 2011
  • OS: macOS 10.12 Sierra
  • メモリ: 16 GB
  • ストレージ: SSD 512 GB

ソフトウェア

  • anyenv
  • rbenv 1.0.0-33-gc7dcaf1
  • rbenv-gemset v0.4.0
  • Ruby 2.3.1p112
  • Atom 1.10.2
  • apm 1.12.5
  • scss_lint 0.50.2
  • linter 1.11.16
  • linter-scss-lint 3.0.4

手順

  1. scss_lint インストール
  2. linter インストール
  3. linter-scss-lint インストール
  4. Atom で実行
  5. 独自ルール設定

scss_lint

scss_lint とは

SCSS の構文チェックをしてくれる Ruby の Gem(ライブラリ)です。
Atom で linter-scss-lint を稼働させるためには、この Gem が必要となります。

github.com

linter 用の gemset 作成

作成の前に

rbenv や Ruby や gemset についてよくわからない方は、次のエントリーをご参照ください。

stangler.hatenablog.com

Ruby バージョン確認

マシンにインストールされている、どのバージョンを使用するかどうか判断するために、次のコマンドを打ちます。

% rbenv versions
system
* 2.3.1 (set by /Users/xxxxx/.anyenv/envs/rbenv/version)

gemset 作成

Ruby 2.3.1 で lint-set という名前の gem セットを作成します。

% rbenv gemset create 2.3.1 lint-set

gemset 確認

上記でセットができたかどうかの確認。

% rbenv gemset list
2.3.1:
  lint-set

セット適用

できたセットをユーザーのディレクトリに適用します。

% echo >.rbenv-gemsets  lint-set

ユーザーのディレクトリでアクティブな gemset がどれかを確認

% rbenv gemset active
lint-set global

global がついているので、マシン全体に lint-set が適用されています。

bundler インストール

% rbenv exec gem install bundler --no-ri --no-rdoc
% rbenv rehash

rehash を忘れずに。

Gemfile の作成と編集

以下のコマンドで Gemfile を作成。

% rbenv exec bundle init

Gemfile を編集します。

% vim Gemfile
source "https://rubygems.org"

gem 'scss_lint', require: false

scss_lint インストール

% rbenv exec bundle install
% rbenv rehash

インストールされた gem の確認

% rbenv exec gem list
*** LOCAL GEMS ***

bigdecimal (1.2.8)
bundler (1.13.1)
did_you_mean (1.0.0)
io-console (0.4.5)
json (1.8.3)
minitest (5.8.3)
net-telnet (0.1.1)
power_assert (0.2.6)
psych (2.0.17)
rake (11.3.0, 10.4.2)
rdoc (4.2.1)
sass (3.4.22)
scss_lint (0.50.2)
test-unit (3.1.5)

linter

linter とは

Atom で使用できる各プログラミング言語のコードチェック機能のベースとなるパッケージです。

github.com

linter-scss-lint をインストールするためには、まず、これが必要となります。

linter インストール

% apm install linter

linter-scss-lint

linter-scss-lint インストール

ようやく Atom の linter-scss-lint パッケージをインストールできます。

% apm install linter-scss-lint

実行ファイルの場所を確認

% rbenv which scss-lint
/Users/xxxxx/.anyenv/envs/rbenv/versions/2.3.1/gemsets/lint-set/bin/scss-lint

設定

Settings > Packages > linter-scss-lint > Settings > Excutable Path

以下を記入します。

/Users/xxxxx/.anyenv/envs/rbenv/versions/2.3.1/gemsets/lint-set/bin/scss-lint

f:id:stangler:20160930160320p:plain

config.cson 確認

ここは必須ではないです。
こんな風に、ここで設定しているんだなってことを知っておくのもよいと思います。

% vim ~/.atom/config.cson
"*":
  core:
    automaticallyUpdate: false
    disabledPackages: [
      "wrap-guide"
    ]
    themes: [
      "atom-light-ui"
      "atom-light-syntax"
    ]
  editor:
    fontSize: 13
    showIndentGuide: true
    showInvisibles: true
    softWrap: true
  "exception-reporting":
    userId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  "linter-scss-lint":
    executablePath: "/Users/xxxxx/.anyenv/envs/rbenv/versions/2.3.1/gemsets/lint-set/bin/scss-lint"
  welcome:
    showOnStartup: false

Atom で実行

Atom で scss ファイルを開くと、以下のように自動で lint が走ります。

f:id:stangler:20160930155908p:plain

独自ルールを設定してみる

デフォルトのルールを確認

どんなルールがあるのか、知っておくのもよいと思います。

% vim /Users/xxxxx/.anyenv/envs/rbenv/versions/2.3.1/gemsets/lint-set/gems/scss_lint-0.50.2/config/default.yml
# Default application configuration that all configurations inherit from.

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: true
    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: true
    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: exclude_zero # or 'include_zero'

  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: 3
    ignore_parent_selectors: false

  PlaceholderInExtend:
    enabled: true

  PrivateNamingConvention:
    enabled: false
    prefix: _

  PropertyCount:
    enabled: false
    include_nested: false
    max_properties: 10

  PropertySortOrder:
    enabled: true
    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: 3

  SelectorFormat:
    enabled: true
    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern

  Shorthand:
    enabled: true
    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

独自ルール設定

独自ルールを設定する例として、ここではコメント設定をやってみます。
デフォルトのままだと、コメントは「//」のみが許されているので、「/**/」は使えません。
厳しすぎるので、コメントを lint でチェックしないように、.scss.yml を作成し、デフォルト設定を上書きします。

% vim .scss.yml
linters:
  Comment:
    enabled: false

enabled を false にしたので、コメントのチェックは行われなくなりました。
以上です。