, ,

[Grunt & Yeoman] grunt-contrib-csslint と grunt-contrib-jshint で css/js の lint/hint/validation をする

公開日: 2013/11/17
更新日: 2019/09/19

grunt-contrib-csslint と grunt-contrib-jshint を利用します。

Contents

インストール

% npm install grunt-contrib-csslint --save-dev
% npm install grunt-contrib-jshint --save-dev

Gruntfile

一部のみ抜粋。

# csslint
csslint:
  # options:
  #   csslintrc: '.csslintrc'
  strict:
    options:
      import: 2
    src: ['<%= pkg.path.src %>/stylesheets/*.css']
  lax:
    options:
      import: false
    src: ['<%= pkg.path.src %>/stylesheets/*.css']
# jshint
jshint:
  # options:
  #   jshintrc: '.jshintrc'
  dev: ['<%= pkg.path.src %>/javascripts/*.js']

csslint の実行

失敗

% grunt csslint
Running "csslint:strict" (csslint) task
Linting dist/stylesheets/foo.css...ERROR
[L1:C1]
Rule is empty. Rules without any properties specified should be removed. (empty-rules)
[L5:C1]
>> Unexpected token '{' at line 5, col 1. This rule looks for recoverable syntax errors. (errors)
[L5:C2]
>> Unexpected token '}' at line 5, col 2. This rule looks for recoverable syntax errors. (errors)
Skipping empty file dist/stylesheets/ie.css
Skipping empty file dist/stylesheets/print.css
Skipping empty file dist/stylesheets/style.css
Warning: Task "csslint:strict" failed. Use --force to continue.
Aborted due to warnings.

成功

% grunt csslint
Running "csslint:strict" (csslint) task
Skipping empty file dist/stylesheets/ie.css
Skipping empty file dist/stylesheets/print.css
Skipping empty file dist/stylesheets/style.css
>> 4 files lint free.
Running "csslint:lax" (csslint) task
Skipping empty file dist/stylesheets/ie.css
Skipping empty file dist/stylesheets/print.css
Skipping empty file dist/stylesheets/style.css
>> 4 files lint free.
Done, without errors.

.csslintrc

とりあえずディフォルトで。
みなさん、どんな感じなのかな。

{
}

チェックするルールについて。

.csslintrc のサンプル

jshint の実行

失敗

% grunt jshint
Running "jshint:dev" (jshint) task
Linting ./src/javascripts/sample.js ...ERROR
[L3:C12] W004: 'hoge' is already defined.
  var hoge = " hoge  fuga";
Warning: Task "jshint:dev" failed. Use --force to continue.
Aborted due to warnings.

成功

% grunt jshint
Running "jshint:dev" (jshint) task
>> 2 files lint free.
Done, without errors.

.jshintrc

とりあえずこんな形で試してみました。
コメントを入れるとエラーで動きませんでした。

{
  "strict": true,
  "indent": 2,
  "maxlen": 80,
  "unused": true,
  "camelcase":true,
  "eqeqeq":true,
  "undef": true,
  "browser": true,
  "devel": true,
  "debug": true
}

あとは watch 等にうまく組み込む。

補遺