Salesforce B2C Commerce SFRA での Lint について

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

今回の記事ではSFRAのデフォルトではでどのようにLintを行なっているかを紹介したいと思います。


## 利用方法
SFARでは(JS, CSSに関しては)[テスト](https://qiita.com/syunyama/items/506edc77a660f61252fa)と同様にLintも[sgmf-scripts](https://www.npmjs.com/package/sgmf-scripts) を利用して行います。
コードがすでにpackage.json内のスクリプトとして記載されていますので、npm 〜 といった形で利用することになります。

今回は [SFRA のレポジトリ](https://github.com/SalesforceCommerceCloud/storefront-reference-architecture)（要Account Managerアカウント）からクローンしてきた環境の`cartridges` 内に `app_custom_sample` というカートリッジを作成して利用方法を紹介します。
## Javascript の Lint

#### 利用しているツール

[eslint](https://github.com/eslint/eslint)


#### 利用方法

```sh
npm run lint:js
```

SFARAではルードディレクトリにルールを記入する `.eslintrc.json` とリントを適用しないファイルを指定する `.eslintignore`  があらかじめ設定されています。
ES Lint のルールについては[公式ドキュメント](https://eslint.org/docs/latest/rules/)をご覧ください。


#### サンプル

実際に`app_custom_sample`カートリッジ内にエラー（[no-unused-vars](https://eslint.org/docs/latest/rules/no-unused-vars)）が出るようなJSを設置して実行してみます。

```js:cartridges/app_custom_sample/cartridge/controllers/Sample.js
'use strict';
var server = require('server');

```


```js:cartridges/app_custom_sample/cartridge/client/js/sample.js
var processInclude = require('./util');

```

`npm run lint:js` を実行すると下記のようにエラーが発生します。
![スクリーンショット 2022-09-29 16.07.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/8a43d780-c4be-c8c0-aeb0-77fc85a942dd.png)





## SCSS の Lint

#### 利用しているツール

[stylelint](https://github.com/stylelint/stylelint)

#### 利用方法

```sh
npm run lint:css
```

SFARAではルードディレクトリにルールを記入する `.stylelintrc.json` があらかじめ設定されています。
stylelint のルールについては[公式ドキュメント](https://stylelint.io/user-guide/rules/list)をご覧ください。またデフォルトで stylelint-scss プラグインも利用しているので、[こちらのルール](https://www.npmjs.com/package/stylelint-scss)も参照ください。



#### サンプル

実際に`app_custom_sample`カートリッジ内にエラー（[at-rule-no-unknown](https://stylelint.io/user-guide/rules/list/at-rule-no-unknown)）が出るようなSCSSを設置して実行してみます。

```scss:cartridges/app_custom_sample/cartridge/client/scss/sample.scss
@unknown {
    color: red;
}

```

`npm run lint:css` を実行すると下記のようにエラーが発生します。
![スクリーンショット 2022-09-29 16.39.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/838fcbd1-c3ff-caeb-7753-d6b8d5467fa6.png)



## ISML の Lint

#### 利用しているツール

[isml-linter](https://github.com/FabiowQuixada/isml-linter)


#### 利用方法

```sh
npm run lint:isml
```

SFARAではルードディレクトリにルールを記入する `ismllinter.config.js` があらかじめ設定されています。
isml-linter のルールについては[公式ドキュメント](https://github.com/FabiowQuixada/isml-linter#available-rules)をご覧ください。




#### サンプル

実際に`app_custom_sample`カートリッジ内にエラー（[no-space-only-lines](https://github.com/FabiowQuixada/isml-linter/blob/master/docs/rules/no-space-only-lines.md)）が出るようなISMLを設置して実行してみます。また、`app_storefront_base` カートリッジ内にエラーが出る部分があったので、`ismllinter.config.js`に `ignore` プロパティを足して下記のようにし、対象から外しています。
 
```js:ismllinter.config.js
var config = {
    enableCache: true,
    rules: {
        'no-space-only-lines': {},
        'no-tabs': {},
        'no-trailing-spaces': {}
    },
    ignore: ['cartridges/app_storefront_base']
};

module.exports = config;
```


```html:cartridges/app_custom_sample/cartridge/templates/default/sample/sample.isml
<div class="test"></div>
{ここに空白}
    
```


`npm run lint:isml` を実行すると下記のようにエラーが発生します。
![スクリーンショット 2022-09-29 17.00.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/ff5dd890-1d93-64a2-bde8-b32e449c61c5.png)




## VS Code プラグイン

もし、VS Codeをお使いであれば下記のようなプラグインを導入するとフォーマットを自動でしてくれたり、エラー部分をハイライトしてくれたりするので、開発の効率が上がるかと思います。よければお試しください。

* [vscode-stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
* [ISML Linter](https://marketplace.visualstudio.com/items?itemName=fabiowquixada.vscode-isml-linter)