validation をする

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

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

[markdown]
> * [一歩進んだHTML/CSS/JSを目指すために | 1000ch.net](http://1000ch.net/2013/08/01/FrontendCodingEnvironment/)

## インストール

> * [gruntjs/grunt-contrib-csslint · GitHub](https://github.com/gruntjs/grunt-contrib-csslint)
> * [gruntjs/grunt-contrib-jshint · GitHub](https://github.com/gruntjs/grunt-contrib-jshint)

“`prettyprinted
% 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 の実行

失敗

“`prettyprinted
% 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.
“`

成功

“`prettyprinted
% 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

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

“`
{
}
“`

> * [grunt-contrib-csslint](https://npmjs.org/package/grunt-contrib-csslint)

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

> * [Rules · stubbornella/csslint Wiki · GitHub](https://github.com/stubbornella/csslint/wiki/Rules)
> * [CSSLintのRulesの超訳](https://gist.github.com/hail2u/1303613)
> * [CSS3対応、スタイルシートの記述で気をつけるべき19のポイント | コリス](http://coliss.com/articles/build-websites/operation/css/css-lint-rules.html)

.csslintrc のサンプル

> * [javascript – CSSLint : How to config tasks just print error not warning – Stack Overflow](http://stackoverflow.com/questions/20207220/csslint-how-to-config-tasks-just-print-error-not-warning)

## jshint の実行

失敗

“`prettyprinted
% 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.
“`

成功

“`prettyprinted
% 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
}
“`

> * [JSHint Options Reference](http://www.jshint.com/docs/options/)
> * [JavaScript – JSHint入門 – JSHintを使ってJSコードの信頼性を高める – Qiita [キータ]](http://qiita.com/yuku_t/items/717d636a174ec37ad967)
> * [JSHintでJavascriptの構文チェック&Sublime Text2でのチェック｜ Developers.IO](http://dev.classmethod.jp/tool/jshint-javascript-sublime-text2/)

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

### 補遺

> * [HTMLやCSSの妥当性チェックができるバリデーションサービスいろいろ – W3Q](http://w3q.jp/t/1662)
> * [HTMLコーディングの問題点を浮かび上がらせてくれるブックマーク「DiagnostiCSS」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ](http://www.moongift.jp/2013/10/20131020-2/)
[/markdown]