Visual Studio CodeでPrettierのフォーマット機能を言語単位で無効にする

2020.09.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部の若槻です。

今回は、Visual Studio Codeに導入したPrettierプラグインのフォーマット機能を言語単位で無効にしてみました。

Prettierとは?

コードフォーマッターです。2020年9月時点で、8種類以上のエディター、24種類以上の言語に対応しています。

image

なぜPrettierのフォーマット機能を言語単位で無効にしたかったのか?

わたしはVisual Studio CodeにPrettierエクステンションを導入して使用しています。開発時のコードフォーマット機能としてはとても便利なのですが、ひとつ困っていたのがマークダウン文書の作成時に意図しないフォーマットがPrettierにより行われてしまうことでした。

その中でも一番困っていたのが、下記のようにマークダウン文書(名前がXXXX.MDのファイル)を編集していると、 image

ファイル保存時にPrettierの機能で日本語と英語の間に半角スペースが自動挿入されてしまうことです。 image

人によるかと思いますが、私の場合はおせっかい機能でしかなかったので、マークダウン言語の時のみPrettierのフォーマット機能を無効にしたいです。

Prettierのフォーマット機能を言語単位で無効にする

VS Codeでマークダウンの時だけPrettierのフォーマット機能を無効にしてみます。

VS Codeのエクステンション一覧でPrettierの[Extention Settings]を開きます。 image

[Prettier: Disable Languages]という項目があるので、[Add Item]をクリックします。 image

入力欄に無効化したい言語名(今回はmarkdown)を入力して[OK]をクリックします。 image

Disable Languagesの一覧にmarkdownが追加されました。 image

これでマークダウン言語に対するフォーマット機能が無効化されたので、マークダウン文書を編集して保存しても英語と日本語の間に自動で半角スペースが挿入されなくなりました。 image

おわりに

Visual Studio Codeに導入したPrettierプラグインのフォーマット機能を言語単位で無効にしてみました。

現在VS CodeでDeveloper.IOのブログを書いてみるなんてことに挑戦しているので、執筆環境を少しずつ快適にしていきたいです。

参考

以上