トップ «前の日記(2011-03-31 [J]) 最新 次の日記(2012-10-01 [J])» 編集

『よだきがり』のたわごと

2007|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|11|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|07|08|09|10|
2011|03|04|
2012|10|12|
2013|04|

2011-04-24 [J] いろんなエディタにhtml css javascript phpのコードチェッカー(lint)を入れてみる1

_ Another lint、CSS Validator、Google Closure Tools、php lintをインストールする

10年前に比べココ数年webのフロントエンジニアはただのhtmlだけではなくcss、javascriptはもちろんphpなどのサーバーサイドの言語まで記述しないといけないようになってきました。

MVCのModelやContorollerなどのプログラムの割合が多いものならばせっせとEclipseやNetBeansなどのIDEを入れるのですが、私のような中途半端者だったり「絶対にEclipseを使わない!」や「I love ○○エディタ」のような方も多いと思います。

とは言え、前述した4つの言語を効率よくエディタ上で言語チェックをしたくなるのも当たり前なので、さっそくやってみました。

_ とりかかる前の環境と心構えを先に…

流れとしては「各種言語のチェック環境をローカルのみでできるようにする」→「エディタのマクロから呼び出し」→「エディタにレスポンスを表示」になります。

OSはwindows環境に限定しますがマクロファイル以外はMacの方Linuxの方も大丈夫だと思います。

というかEmacsやvimでも使えば…(windowsでもxyzzyがあるけどね)

ということでサポート(マクロファイルを書いた)するエディタは下記にしました。

・EmEditor(Standerd以上)

・HeTeMuLu Creator

・サクラエディタ

・TeraPad

他にもマクロに対応しているエディタであれば問題ないと思います。

ただ、問題があってですねこんな事を書くのはアレですが環境を作るのがめんどくさすぎます。(特にcss)

あと、xamppをインストールしている事を前提としています。

また、c:\直下にlintというフォルダを作っておいてください。

_ HTML/XHTMLのチェッカーAnother lintをインストール

まぁ、ココでわざわざ記述するまでもないですが、perlで書かれているHTMLの文法チェッカーです。

1.http://www.pythagoras.bz/htmllint/download.htmlにアクセス。

2.htmllint.lzhをDLしてください。(windpwsのsjis版がlzhなので必ずlzh版をDLすること)

3.解凍したものを「c:\lint」直下にいれる(「C:\lint\htmllint」という構成になると思います。)

4.「C:\lint\htmllint」にある「htmllintenv」を「htmllint.env」にリネーム

5ftp://ftp.iij.ad.jp/pub/IIJ/dist/utashiro/perl/にアクセス

6.jcode.pl-X.XXをDL(Xの部分は数字で、私の時はjcode.pl-2.13でした)

7.「C:\lint\htmllint」に6でDLしたファイル「jcode.pl-X.XX」を「jcode.pl」リネーム

8.DOS窓を開いて「perl -v」を入れてperlのヴァージョンが表示されていれば準備は大丈夫です。(ダメな場合はperlへのpathを通しておいてください)

_ JavaScriptのチェッカー「Google Closure Tools」をインストール

JavaScriptのlintはいくつかあって色々試した(例:jslint)のですが、Google Closure ToolsがjQuery記述が対応してないものがあったりするので「Google Closure Tools」を選びました。

1.Active Python2.7.X.X-win32-x86.msi もしくは 2.7.X.X-win64-x86.msiをDLしインストール

2.「C:\Python27\Scripts」のpathを通す

3.Dos窓を開いて「easy_install -Z http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz」を入力して終了

_ CSSのチェッカー「CSS Validator」をインストール

これが一番の山場です、インストールの項目の情報が古いしファイルをDLするのにCVSインストールしないといけないとか色々大変でした。

0.ファイル一覧をDLする為にCVS環境を整える…ってアフォか!面倒な方は私がまとめておいったのでこちらをDLしてください。

1.sourceforgeからservlet.jarをDLする

2.JAVAのJDKのインストールhttp://java.sun.com/javase/ja/6/download.htmlのJDKをクリックしてPlatform windows I agree to the〜をチェックしてDLしてインストール

3.windowsの環境変数に「JAVA_HOME」「C:\Program Files\Java\jdk1.6.0_18」(ヴァージョンは環境に合わせて)を追加

4.http://ant.apache.org/bindownload.cgiでantの.zip版をDL

5.windowsの環境変数のpathに「C:\apache-ant-1.8.2\lib」にantのpathを通す

6.0でDLして解凍したフォルダかCVSでDLしたファイルを「C:\lint\css-validator」に置く。

7.1でDLしたファイルを「C:\lint\css-validator」の下に入れる

8.http://jigsaw.w3.org/css-validator/DOWNLOAD.html.ja内のcss-validator.jarをDL

9.DLしたcss-validator.jarを「C:\lint\css-validator」に置く。

10.C:\lint\css-validator\build.xml の下記を変更

10-1.9行目「value=」の中の値を「C:/lint/css-validator/servlet.jar」に変更

10-2.52行目「engine/1.6.4」を「engine/1.7」へ変更

10-3.54行目「Xerces-J-bin.2.10.0.tar.gz」を「Xerces-J-bin.2.11.0.tar.gz」へ変更(同じ行に2箇所)

10-4.60行目「Xerces-J-bin.2.11.0.tar.gz」を「Xerces-J-bin.2.11.0.tar.gz」へ変更(同じ行に2箇所)

10-5.66、67行目「2_10_0」とあるところを「2_11_0」へ変更

10-6.74行目の末尾「/>」「 includeantruntime="false"/>」へ変更

10-7.「commons-lang-2.5」 と書いてあるところを「commons-lang-2.6」へ一括置換

10-8.「velocity-1.6.4」を「velocity-1.7」へ一括置換

11.DOS窓から「C:\lint\css-validator\ant」を実行(無事にbuildが成功すれば大丈夫です)

ファイルのDLにCVS入れたりxmlの中身を変えたりで超絶に面倒でした。

_ PHPのチェッカーphpのlintモードを使う

一番簡単なのはphpなんですよね、なんせlintモードがあるのでこれは引数を-lやるだけなんで、基本pathを通すだけで大丈夫です。

_ これで晴れて各言語のlint環境が整いました。

というか、JavaScriptの言語チェックにPythonをcssの言語チェックにJAVAをHTMLの言語チェックにperlをってなんだかなぁ…と思いました。

マクロファイルについては別途記述します。

お名前:
E-mail:
コメント: