VSコードでPrettierが効かない時の対処法

はじめに

今回は、VSコードでの開発中にPrettierが効かない問題を解決する方法を備忘録として記録しておきます。開発しているときに、Prettierが正しく動作しているはずなのに、以下のように赤く表示されることはありませんか？

この記事では、その問題の解決方法を紹介します。

解決法

まず、VSコードの左下にある歯車アイコンをクリックし、設定を開きます。右上に次のようなアイコンが表示されるので、それをクリックしてください。

すると、以下のような settings.json ファイルが表示されるはずです。

setting.json

{
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  },
  "[c]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.formatOnSave": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.printWidth": 1000,
  "files.autoSave": "afterDelay",
  "explorer.compactFolders": false,
  "files.insertFinalNewline": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "never",
  "editor.fontSize": 15
}

この設定では、"editor.tabSize": 2 の部分がそれぞれの言語におけるタブのサイズを指定しています。今回の場合、私はTypeScriptのコードを書いていて、CSSファイルにコードを書いたときにPrettierが効かなくなりました。上記の設定をよく見ると、CSSファイルの設定がありません。そこで、以下のコードを追加してください。

"[css]": {
   "editor.tabSize": 2, 
   "editor.formatOnSave": true
 },

ここの変更を行うと、次のように赤い警告が消え、正常に表示されるはずです。

終わりに

Prettierが効かないと感じたら、まず settings.json を確認して、その言語の設定が適切に行われているかを見直してください。雑記事でしたがこの記事が役に立てば幸いです。