Skip to content

JavaScript/CSSのLint系ライブラリまとめ

by : 2016/01/29

システム開発プロジェクトが進むと、だんだんとコードの方向性などを見失いがちになり、そのままでは潜在的なバグや問題を引き起こしかねません。そのようなエラーと潜在的な問題を事前に検出するためにはLint系ライブラリが役に立ちます。

JavaScriptとCSSのLintライブラリについて、簡単にセットアップと実行方法も合わせて紹介していきます。

まずはJavaScriptのLintから

JSHint

JSHintは、後述のJSLintからフォークされました。JSLintが厳しい設定となっているのに比べ、JSHintはルールが非常に緩くなっています。

JSHint
JSHint

JSHintはそのままでは殆どチェックを行いません。よって、利用する時はルールの設定ファイルが必要です。設定ファイルはプロジェクトルートに .jshintrc ファイルを設置して行います。

{
  "indent": 4,
  "strict":true
}

各ルールオプションはJSHint Options Referenceを参考にして下さい。

コマンドラインからの実行

npmでのインストールで、コマンドラインからの実行が可能です。

$ npm install -g jshint
$ jshint test.js

タスクランナーからの実行

JSHintのタスクランナーはGulp:gulp-jshintとGrunt:gruntjs/grunt-contrib-jshint · GitHubを参考にして下さい。

JSLint

JSLintはダグラス・クロックフォード氏によって作られました。かなり制約が厳しいことで評判になっていますが、そのチェックを乗り越えるという、いわば修行とも取れるこのツールの特徴が今現在まで利用され続け、各Lintアプリケーションへ影響を与えているのではないでしょうか。

JSLint
JSLint

Webサイトではソースコードを貼り付けることですぐに利用が可能です。

コマンドラインからの実行

npmでのインストールで、コマンドラインからの実行が可能です。

$ npm install -g jslint
$ eslint test.js test2.js

タスクランナーからの実行

JSLintのタスクランナーはgulp-jslintgrunt-jslintを参考にして下さい。

ESLint

ESLintはJSHintやJSLintと違い、独自ルールをプラグインで追加できるという特徴を持っています。独自ルールは設定ファイルである .eslintrc をJSONかYAMLを編集して追加します。また、直接コメントに記述することでルールを設定できますので、グローバルに設定ファイルを利用し各コメントにてローカル設定を記述すると柔軟に各プロジェクトに対応できるでしょう。

ESLint
ESLint

コマンドラインからの実行

npmでのインストールで、コマンドラインからの実行が可能です。

$ npm install -g eslint

質問形式で設定ファイルの .eslintrc を生成します。

$ eslint --init

プロジェクトルートから対象のディレクトリやファイルを指定して実行します。

$ eslint test.js test2.js

タスクランナーからの実行

ESLintのタスクランナーはgulp-eslintgrunt-eslintを参考にして下さい。

CSSのLint系ライブラリ

CSS Lint

CSS LintはCSSを書くためのベストプラクティス集の意味合いが強いツールです。CSS自体はある程度無理をしても動いてしまいますが、その結果として人によってコードが左右されてしまうことが多くなってしまいます。その辺りの指針としてCSS Lintを利用することで、プロジェクト全体でコーディングの統一化が図れるでしょう。

CSS Lint
CSS Lint

Webサイトでは、コードを貼り付けることで利用が可能です。

コマンドラインからの実行

npmでのインストールで、コマンドラインからの実行が可能です。

$ npm install -g eslint
$ csslint target.css

設定ファイル

プロジェクトルートに.csslintc として設定を記述します。以下は.csslintcの記述例です。


{
  "bulletproof-font-face": false,
  "compatible-vendor-prefixes": false,
}

タスクランナーからの実行

Gulpの場合:lazd/gulp-csslint

インストール

$ npm install --save-dev gulp-csslint

gulpfile.js

var csslint = require('gulp-csslint');

gulp.task('css', function() {
  gulp.src('client/css/*.css')
    .pipe(csslint())
    .pipe(csslint.reporter());
});
Gruntの場合:gruntjs/grunt-contrib-csslint

インストール

$ npm install grunt-contrib-csslint --save-dev

Gruntfile.js

csslint: {
  strict: {
    options: {
      import: 2
    },
    src: ['path/to/**/*.css']
  },
  lax: {
    options: {
      import: false
    },
    src: ['path/to/**/*.css']
  }
}

CSSLint/csslint · GitHub


タスクランナーからのCSSチェックツール

ここからはタスクランナーでの利用においてCSSをチェックするツールを紹介します。CSS Lintでも同様の対応が可能なものもありますが、特定の実用性の高いライブラリを紹介していきます。

CSSプロパティ重複チェック

peterkeating/grunt-csscss · GitHub

CSSのプロパティの重複チェックを行うツールです。このプラグインを起動するには事前にRubyの csscss をセットアップします。

$ gem install csscss
$ npm install grunt-csscss --save-dev

Gruntfile.jsの記述例です。

grunt.initConfig({
  csscss: {
    dist: {
      src: ['css/style.css']
    }
  }
});

grunt.loadNpmTasks('grunt-csscss');

grunt.registerTask('default', ['csscss']);

CSSで利用中のクラスとIDをチェックする

利用中のCSSに対して、指定したURLやHTMLファイル内で、利用されているクラスやIDだけを抽出して、新たにCSSを作成するプラグインです。複数のHTMLファイルに対応していますので、CSSをまとめるのにも便利そうです。

Gulpの場合:ben-eb/gulp-uncss · GitHub

インストール

$ npm install gulp-uncss --save-dev

gulpfile.jsの利用例です。

var gulp = require('gulp');
var uncss = require('gulp-uncss');

gulp.task('default', function () {
    return gulp.src('site.css')
        .pipe(uncss({
            html: ['index.html', 'posts/**/*.html', 'http://example.com']
        }))
        .pipe(gulp.dest('./out'));
});

Gruntの場合:addyosmani/grunt-uncss · GitHub

インストール

npm install grunt-uncss --save-dev

Gulpfile.js の利用例です。

module.exports = function(grunt) {
  grunt.initConfig({
    uncss: {
      dist: {
        files: {
          'dist/css/tidy.css': ['app/index.html', 'app/about.html']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-uncss');

  grunt.registerTask('default', ['uncss']);
}

最後に

いかがでしょうか。おそらくCLIから利用するのは限定的だと思います。殆どのライブラリではタスクランナーから利用できますので定期的な実行を行うでしょう。さらにタスクランナーではwatchをすることで都度確認ができますので、コーディング中に迷うことなくプロジェクトを進められるでしょう。また、IDEやSublimeText、AtomなどのエディタではLint系のプラグインとしても設定可能なものがあります。ぜひ紹介したライブラリを活用してみて下さい。

From → テスト, HTML5

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。