VS CodeやSublimeTextなどWEB関連のソース(HTML,CSS,プログラム)を記述する時の環境についてのTipsをメモっていきます

Sublime Text で sass(scss)の最速構文チェック(lint)を行う

● SublimeLinter-contrib-sass-lint

1. SublimeTextの パッケージ SublimeLinter-contrib-sass-lintのインストール

Sublime Text から 「Command + Shift + P」 → 「Package Control : Install Package」を選択し、「SublimeLinter-contrib-sass-lint」をインストールします。

2. node sass-lint のインストール

npm install -g sass-lint

インストール後にインストールされたパスが表示されるのでそれをコピーして .bash_profile に書き込みます。

vi .bash_profile
#sass-lint
export PATH="$HOME/.anyenv/envs/ndenv/versions/v9.11.2/bin/:$PATH"

2. sass-lint のバージョンの確認

 sass-lint -V

バージョン 1.2.0 以上 であればOKです。

3. 構文チェック(lint)の実行

sass (sass)ファイルを開くと画面一番下に lint 結果が自動的に表示されます。 ファイル更新のたびに自動チェックが走ります。

4. 構文チェック(lint)のルールの変更

デフォルトではlintルールが厳しめなので ホームディレクトリに .sass-lint.yml ファイルを作成して lintルールをゆるくします。

・デフォルトのルール設定ファイルはこちら

https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml

・オススメのルール設定ファイルはこちら

options:
  formatter: stylish
files:
  include: '**/*.s+(a|c)ss'
rules:
  # Extends
  extends-before-mixins: 1
  extends-before-declarations: 1
  placeholder-in-extend: 1

  # Mixins
  mixins-before-declarations: 1

  # Line Spacing
  one-declaration-per-line: 1
  empty-line-between-blocks: 0
  single-line-per-selector: 0

  # Disallows
  no-attribute-selectors: 0
  no-color-hex: 0
  no-color-keywords: 0
  no-color-literals: 0
  no-combinators: 0
  no-css-comments: 0
  no-debug: 1
  no-disallowed-properties: 0
  no-duplicate-properties: 1
  no-empty-rulesets: 1
  no-extends: 0
  no-ids: 1
  no-important: 0
  no-invalid-hex: 1
  no-mergeable-selectors: 1
  no-misspelled-properties: 1
  no-qualifying-elements: 0
  no-trailing-whitespace: 0
  no-trailing-zero: 0


  no-transition-all: 0
  
  
  no-universal-selectors: 0
  no-url-domains: 1
  no-url-protocols: 1
  no-vendor-prefixes: 0
  no-warn: 1
  property-units: 0

  # Nesting
  declarations-before-nesting: 1
  force-attribute-nesting: 1
  force-element-nesting: 0
  force-pseudo-nesting: 0

  # Name Formats
  class-name-format: 0
  function-name-format: 1
  id-name-format: 0
  mixin-name-format: 1
  placeholder-name-format: 1
  variable-name-format: 0

  # Style Guide
  attribute-quotes: 1
  bem-depth: 0
  border-zero: 1
  brace-style: 1
  clean-import-paths: 0
  empty-args: 1
  hex-length: 0
  hex-notation: 0
  indentation: 0
  leading-zero: 0
  max-line-length: 0
  max-file-line-count: 0
  nesting-depth: 1
  property-sort-order: 0
  pseudo-element: 0
  quotes: 0
  shorthand-values: 0
  url-quotes: 1
  variable-for-property: 1
  zero-unit: 0

  # Inner Spacing
  space-after-comma: 0
  space-before-colon: 0
  space-after-colon: 0
  space-before-brace: 0
  space-before-bang: 1
  space-after-bang: 1
  space-between-parens: 0
  space-around-operator: 0

  # Final Items
  trailing-semicolon: 1
  final-newline: 1
No.1290
01/06 09:33

edit