ESLint と Prettier を入れる

こちらの kintone 開発の続きです。

次は、 ESLint と Prettier を入れます。

ESLint

kintone の公式でも紹介されています。

cybozu.dev

なので、この手順で入れます。

D:\work\tmp\kintone_tutorial\webpack_sample>npm install --save-dev eslint @cybozu/eslint-config

added 275 packages, and audited 395 packages in 24s

142 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

D:\work\tmp\kintone_tutorial\webpack_sample>

インストールされたか確認します。

D:\work\tmp\kintone_tutorial\webpack_sample>npm ls --depth=0
webpack_sample@1.0.0 D:\work\tmp\kintone_tutorial\webpack_sample>
├── @cybozu/eslint-config@22.0.2
├── eslint@8.55.0
├── webpack-cli@5.1.4
└── webpack@5.89.0


D:\work\tmp\kintone_tutorial\webpack_sample>

大丈夫ですね。

動かしてみます。

D:\work\tmp\kintone_tutorial\webpack_sample>npx eslint src/master_customer.js

D:\work\tmp\kintone_tutorial\webpack_sample>D:\work\tmp\kintone_tutorial\webpack_sample\src\master_customer.js
   1:30  warning  Strings must use singlequote                                           quotes
   1:53  warning  Expected linebreaks to be 'LF' but found 'CRLF'                        linebreak-style
   2:23  warning  Strings must use singlequote                                           quotes

いろいろと警告が出ますが、とりあえず動いているようなので、大丈夫そうですね。

VSCode 拡張機能

ESLint を VSCode でも使えるようにします。拡張機能から ESLint を選んで、インストールすれば完了です。

設定変更

ただ、このままだと、改行コードやインデントに関して山ほど警告がでて、本当に大事な警告がよくわからなくなります。

なので、下記などを参考にして、設定ファイル .eslintrc.js をちょっと変更します。

ESLintとPrettierの使い方(静的検証, スタイル統一) - わくわくBank

module.exports = {
    extends: [
        '@cybozu',
        '@cybozu/eslint-config/globals/kintone'
    ],
    rules: {
        indent: ['warn', 4],
        'linebreak-style': ['error', 'windows'],
    }
};

• インデントは４
• 改行コードは CRLF

にしました。

Prettier

で、コードフォーマッターの Prettier （プリティアと読むそうです）もインストールします。

D:\work\tmp\kintone_tutorial\webpack_sample>npm install --save-dev prettier

up to date, audited 395 packages in 758ms

142 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

D:\work\tmp\kintone_tutorial\webpack_sample>

VSCode 拡張機能

ESLint と同様に Prettier も VSCode でも使えるように、拡張機能をインストールしておきます。

設定ファイル

下記などを参考に Prettier の設定ファイル .prettierrc.js を作成しました。

• 【初心者向け】Visual Studio Code へ ESLint と Prettier を導入する #VSCode - Qiita
• .prettierrc #prettier - Qiita
• Prettierの設定オプションについてまとめてみた

module.exports = {
    printWidth: 150, // 自動折返し文字数
    trailingComma: "all", // 複数行の場合、可能な限り末尾のコンマを出力
    tabWidth: 4, // インデントサイズ
    semi: true, // ステートメントの最後にセミコロンを付与
    singleQuote: false, // 二重引用符を使用
    endOfLine: "auto", // 改行の文字コードはそのまま
    bracketSpacing: false, // {test} のようにブラケット内にスペースを入れない
};

とりあえず、これでやってみます。

Prettier を適用

VSCode でファイル保存時に Prettier を使うには、『設定』より

    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"

の２つを変更する必要があります。

また、ファイルを修正時にその場で、使いたい場合は、 Prettier を適用したいコードを選択して、右クリックし、

『選択範囲をフォーマット...』を選ぶと、フォーマットーの選択肢が表示されるので、

『Prettier』を選べが、フォーマットしてくれます。

まとめ

とりあえず、 ESLint と Prettier による整形ができるようになりました。

が、 kintone の JS カスタマイズの場合、 Kintone REST API Client や Kintone UI Component を正しく認識してくれないため、エラーがあちこちに出て、なかなか扱いにくいです。

とはいえ、最低限のことはチェックできるようになったと思うので、まずはこれで進めようと思います。

おまけ

VSCode で ESLint を有効にしている kintone REST API Client がエラーとなります。これ、はっきり言って、かなりうざいです。うざいだけでなく、実際面でも、赤く警告が出ていても、 kintone Rest API Client のエラーだと思い込み、大事なエラーを見逃しく易くなってしまいます。

なので、仕方なく、

• js-sdk/packages/rest-api-client at master · kintone/js-sdk · GitHub
• GitHub - kintone-labs/kintone-ui-component: kintone UI Component

などを参考にして、 kintone REST API Client と kintone UI Component を node 環境に入れておきました。

npm install @kintone/rest-api-client
npm install kintone-ui-component

こうすると、かなりエラーが減ったので、ずいぶんと見やすくなりました。 webpack でバンドルするときにこれらもまとめられてしまうけど、当面は仕方ないとして諦めようと思います。