こんにちは。たかやまです。
コードフォーマットツールにPrettierを使っているかたは多いと思います。私もVS Code上でPrettierを日々使っています。
そんなある日、CloudWatch SyntheticsのCanaryスクリプトをコーディングしようとした際にPrettierが効かないことがありましたので、その対処法をご紹介します。
原因
Canaryスクリプトをコーディングした時のディレクトリ構成は以下の通りです。
.
├── bin
│ └── cdk.ts
├── lib
│ ├── nodejs
│ │ └── node_modules
│ │ └── index.js
│ └── cdk-stack.ts
├── test
│ └── cdk.test.ts
├── README.md
├── cdk.json
├── jest.config.js
├── package-lock.json
├── package.json
└── tsconfig.jsonnCanaryスクリプトはlib/nodejs/node_modules/index.jsに記述しています。
お察しの方もいると思いますが、Prettierはデフォルトだとnode_modules配下のファイルを無視する仕様となっているためCanaryスクリプトが記載されているlib/nodejs/node_modules/index.jsに対してフォーマットが効かない状態となっていました。
By default prettier ignores files in version control systems directories (".git", ".svn" and ".hg") and node_modules (if --with-node-modules CLI option not specified)
そもそもnode_modules配下で記述する理由としては、CanaryスクリプトをCloudWatch Syntheticsにアップロードする場合にnodejs/node_modules/にスクリプトが含まれている必要があるためです。(ここではCDKを使ってnodejsディレクトリをzip化してアップロードすることを想定しています。)
Amazon S3 の場所を使用して Canary スクリプトをアップロードする場合、zip ファイルにはフォルダ構造 nodejs/node_modules/myCanaryFilename.js file にスクリプトが含まれている必要があります。
一時的にnode_modules以外のディレクトリ名で作業することでフォーマットを効かせることもできますが、正直面倒です。
Prettierの設定を変更することでnode_modules配下に対してもフォーマットが効かせることもできるので次の対処法でそちらをご紹介します。
対処法
以下のいずれかの方法でnode_modulesへのPrettierの適用を有効にすることができます。
- Settings.jsonで
"prettier.withNodeModules": trueを追加する - GUIモードで
With Node Modulesにチェックを入れる
Settings.json
ショートカットキーCommand + ,(Windows: Ctrl + ,)で設定画面が開くので、右上のアイコンを選択します。
開かれたsettings.jsonに"prettier.withNodeModules": trueを追加すればOKです。
GUI
GUIも同様にCommand + ,(Windows: Ctrl + ,)で開く設定画面でWith Node Modulesを入力し、表示された項目にチェックを入れればOKです。
実態はSettings.jsonに"prettier.withNodeModules": trueを追加することと同じです。
既存のnode_modulesへの影響
基本的に対象ファイルを編集しない限りVS CodeのPrettierがフォーマットをかけることはないので大丈夫です。ただそれでも心配という方は、.prettierignoreを作成してnode_modulesを除外するように設定してもらえればと思います。
以下の設定はCanaryスクリプトのあるlib/nodejs/node_modulesのみをフォーマット対象にする設定です。
**/node_modules
!/lib/nodejs/node_modules最後に
Prettierのデフォルト設定を知らずにハマっていたので、同じようにハマっている方へこちらの記事が助けになれば幸いです。
以上、たかやま(@nyan_kotaroo)でした。
8
