2016年4月にLightning CLI Heroku Pluginというツールが公開され、Salesforce Developer Blogで紹介されていました。このツールを利用すると開発しているLightning Componentのセキュリティチェックてきなことができるみたいです。
Lightning CLI Heroku Plugin | Salesforce Developers Japan Blog
事前準備
このツールを利用するには、Node.jsとHeroku Toolbeltが必要となっているみたいです。一番最初に実行できるようにインストールしておきます。(Heroku Toolbeltとはコマンドラインからherokuコマンドを実行できるライブラリです)
次のコマンドでインストール済みか確認できると思います。
$ heroku version
Lightning CLI Heroku Pluginのインストール方法
次のコマンドを実行するだけでインストールできます。
$ heroku plugins:install salesforce-lightning-cli
インストール後に『$ heroku version』を実行するとInstalled Pluginsのところにsalesforce-lightning-cli@1.0.0が表示されるようになっていました。
使い方
このツールを利用するには対象コンポーネントのファイルパスを以下のように指定して実行します。
$ heroku lightning:lint ./path/to/lightning/components/
たとえばこんなプロジェクトがあった場合
次のような感じで実行すればいいと思います。
$ heroku lightning:lint /Users/tyoshikawa1106/pg/salesforce/workspace/tyoshikawa1106_work/src/aura
実行してみると次のような結果が取得できました。
errorが見つかりましたが、Lightning CLI Heroku Plugin自体は問題なく実行できていると思います。今回のエラーですが、利用していない引数が存在するためにエラーとなっているみたいです。
試しに引数をすべて除外してもう一度実行してみました。
これで先程のerrorは無事に解決したみたいです。
ツールの基本的な使い方は確認できたので、次はLightning Componentがたくさん作成されているプロジェクトで確認してみます。
ターミナルでファイルのパスを確認して・・・
先ほどと同じようにコマンドを実行します。
$ heroku lightning:lint /Users/tyoshikawa1106/pg/salesforce/workspace/tyoshikawa1106_app/src/aura
実行結果はこんな感じ。
結構キレイにかけているつもりでしたが、warningとerrorのメッセージが大量に表示されました。せっかくなのでいくつか紹介します。
Lightning Component開発実装注意点
arning comma-dangle Unexpected trailing comma
controller.jsなどで『}』の後ろに不要な『,』を宣言しない。
warning no-trailing-spaces Trailing spaces not allowed
行の末尾に不要な空白スペースを宣言しない(おそらく)
error no-unused-vars 'event' is defined but never used
使われてない変数を宣言しない。(この場合引数のevent変数が不要だった)
doSaveBtn : function(component, event) {
warning comma-spacing A space is required after ','
区切り文字『,』の後にスペースを宣言していない
component.set("v.ext","plus");
arning no-trailing-spaces Trailing spaces not allowed
『 } 』の後ろに不要な半角スペースが宣言されている
error eqeqeq Expected '===' and instead saw '=='
文字列の一致判定に '==' を利用している。ここは '===' であるべき
if (e.style.display == 'block' || e.style.display==''){
error no-unused-vars 'self' is defined but never use
『this』変数の値を『self』変数にセットして利用している
warning brace-style Closing curly brace should be on the same line as opening curly brace or on the line after the previous block
『{ ... }』の処理を一行で表記している。
error no-undef 'Chart' is not defined
未定義のものを利用している。(解決方法ちょっと不明かも)
warning semi Missing semicolon
セミコロンの宣言がない(...おそらくこれ)
warning no-param-reassign Assignment to function parameter 'isError'
引数の渡し方がよくない？
error no-redeclare 'errorMsgKey' is already defined
既に定義済みの変数？引数の変数と処理中の変数で名前が重複していた。
warning camelcase Identifier 'value_title_icon' is not in camel case
変数名にキャメルケースが利用されていない。
value_close_icon = value_close_icon.replace("", "");
error no-console Unexpected console statement
予期しないコンソールステートメント。(console.logの宣言は残してはいけない？)
error no-alert Unexpected confirm
予期しない確認。confirmの宣言の仕方が間違っているのかも。(そもそも使ってはいけない可能性？)
f (confirm('Are you Sure?')) {
error consistent-return Expected to return a value at the end of this function
return の宣言が正しくできていない。(たぶんこの場合処理の最後にも必要だった)
error consistent-return Expected no return value
これもreturnの使い方が正しくない。
return alert('Image file not supported');
warning curly Expected { after 'if' condition
if処理の{}が省略されている。
if (aData < bData) return -1;
error aura-api Invalid Aura API
無効になったAPIを利用している
$A.clientService.runActions([action]);
error secure-document Invalid SecureDocument API
これダメなのか・・・
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
だいたいこんな感じでした。たくさん出ていましたが、基本的には同じ理由の問題がいろんな場所で使われていることが原因です。末尾に不要な半角スペースが宣言されているのは気づかない内にやってしまったパターンが多いのでこまめにツールでチェックしておいた方が良さそうです。
Lightning CLI Heroku Pluginのオプション
helpコマンドで利用できるコマンドとオプションを確認できるみたいです。
$ heroku lightning:lint --help
Lightning CLI Heroku Pluginではこんな感じのことができるみたいです。最後にチェックして修正していくのは大変なので、Lightning Componentを開発する場合はこまめにこのツールを実行してチェックするようにしておいた方がいいみたいです。
追記
このツールでチェックしてくれるのはController.jsやHelper.jsなどのJS側の処理となるみたいです。例えばcomponentファイルとcssファイルしかない場合は、『Did not find matching files.』となりました。
追記の追記
まじめにエラー解決してみようとやってみたのですが、ちょっとムリっぽい感じがしました。
