kintoneのカスタマイズ効率をあげよう1 – エディタ設定

Featured Image(Photo) by Pankaj Patel on Unsplash

更新履歴

はじめに

JavaScriptに関する技術は日々進歩し、次々と新しいソフトウェアが生まれています。webpackやBabelなどを利用することが一般的になっていますが、こういったソフトウェアに詳しくない人が一足飛びに導入すると、詳しいことはよく分からないけど動いているから使っている、別のことをやろうとした場合に応用が効かない、という状況になりかねません。

そこで本シリーズではモダンな開発環境やコーディングスタイルをstep by stepで紹介します。以下のような悩みを抱えている人は是非試してください。

  • JavaScriptファイルの手動アップロードが面倒だと思っている人
  • customize-uploaderを利用しているけど、アップロード反映までの時間が長いと思っている人
  • モダンな開発環境、コーディングスタイルを身に着けたい人

本記事ではコーディングに必要なエディタの環境を整備します。エディタはVisual Studio Codeを利用します。

Visual Studio Codeのインストール

以下からダウンロードしてインストールします。

Node.jsのインストール

以下からダウンロードしてインストールします。

Visual Studio Codeの設定

ESLint

やってくれること

コードのおかしいところを指摘してくれます。ESLintなしの状態でもある程度指摘してくれますが、ESLintを入れるとさらに指摘してくれる範囲が拡がります。

インストールと設定

まずはエクスプローラー上からプロジェクトフォルダを作りましょう。例えば「C:\Users\user-name\Documents\git\customize-example」です。

VS Code ESLint extensionを開き、Installをクリックしてインストールします。

これだけだと動作しないので、npmのESLintもインストールします。またサイボウズさんオススメのESLintの設定があるのでこれも合わせてインストールします。

Visual Studio Codeで作成したフォルダ(例の場合はcustomize-example)を開きます。Ctrl + @を押してターミナルを表示し、以下のコマンドを実行します。

> npm init
> npm install --save-dev eslint @cybozu/eslint-config

npm init後に入力を求められますが、よくわからない人は全部Enterで大丈夫です。

ESLintの設定ファイルを作成します。ファイル名は.eslintrc.jsです。指定するルールはこちらを参考にしてください。よくわからない人はES5のルールにしておきましょう。prettier系のルールを指定することで後ほどインストールするPrettierも有効になります。

module.exports = {
  extends: ["@cybozu/eslint-config/presets/kintone-customize-es5-prettier"]
};

保存時にESLintが実行されるようにします。settings.jsonを開いて以下の内容を貼り付けます。すでに設定が存在する人は追記してください。
settings.jsonの開き方がわからない人はこちら

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
}

Prettier

やってくれること

インデントなどが統一されていない、こんなコードを

このように整形してくれます。

また、ESLintはCSSファイルやJSONファイルの整形に対応していないので、Prettierで整形します。

インストールと設定

VS Code Prettier extensionを開き、Installをクリックしてインストールします。

先ほどと同じフォルダ上で以下のコマンドを実行します。

> npm install --save-dev prettier

Settings.jsonにコードを追記します。

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[css]": {
        "editor.formatOnSave": true,
    },
    "[json]": {
        "editor.formatOnSave": true,
    },
    "[html]": {
        "editor.formatOnSave": true,
    },
}

ここまでの作業を確認

JavaScriptファイルやCSSファイルを作成してください。保存時に整形されるはずです。また、VS Code ESLint extensionをインストールしたことで入力途中にもエラーを表示してくれるはずです。

これで最低限のコーディング環境が整いました。次はカスタマイズ適用を楽にしましょう。

その2に続く

kintoneのカスタマイズ効率をあげよう2 – 自動適用

この記事を書いた人