JavaScript/CSSのLint系ライブラリまとめ
システム開発プロジェクトが進むと、だんだんとコードの方向性などを見失いがちになり、そのままでは潜在的なバグや問題を引き起こしかねません。そのようなエラーと潜在的な問題を事前に検出するためにはLint系ライブラリが役に立ちます。
JavaScriptとCSSのLintライブラリについて、簡単にセットアップと実行方法も合わせて紹介していきます。
まずはJavaScriptのLintから
JSHint
JSHintは、後述のJSLintからフォークされました。JSLintが厳しい設定となっているのに比べ、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アプリケーションへ影響を与えているのではないでしょうか。
Webサイトではソースコードを貼り付けることですぐに利用が可能です。
コマンドラインからの実行
npmでのインストールで、コマンドラインからの実行が可能です。
$ npm install -g jslint
$ eslint test.js test2.js
タスクランナーからの実行
JSLintのタスクランナーはgulp-jslintとgrunt-jslintを参考にして下さい。
ESLint
ESLintはJSHintやJSLintと違い、独自ルールをプラグインで追加できるという特徴を持っています。独自ルールは設定ファイルである .eslintrc をJSONかYAMLを編集して追加します。また、直接コメントに記述することでルールを設定できますので、グローバルに設定ファイルを利用し各コメントにてローカル設定を記述すると柔軟に各プロジェクトに対応できるでしょう。
コマンドラインからの実行
npmでのインストールで、コマンドラインからの実行が可能です。
$ npm install -g eslint
質問形式で設定ファイルの .eslintrc を生成します。
$ eslint --init
プロジェクトルートから対象のディレクトリやファイルを指定して実行します。
$ eslint test.js test2.js
タスクランナーからの実行
ESLintのタスクランナーはgulp-eslintとgrunt-eslintを参考にして下さい。
CSSのLint系ライブラリ
CSS Lint
CSS LintはCSSを書くためのベストプラクティス集の意味合いが強いツールです。CSS自体はある程度無理をしても動いてしまいますが、その結果として人によってコードが左右されてしまうことが多くなってしまいます。その辺りの指針として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']
}
}
タスクランナーからの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系のプラグインとしても設定可能なものがあります。ぜひ紹介したライブラリを活用してみて下さい。
hifive開発者ブログ 
コメントは受け付けていません。