【初心者向け】VSCodeでPrettierを導入してReact/TypeScript開発を快適に！.tsxファイルのフォーマットもバッチリ

Visual Studio Code で Prettier が .tsx ファイルをフォーマットしない問題とその解決策

この問題は、いくつかの原因が考えられます。

原因と解決策

1. デフォルトのフォーマッターが Prettier に設定されていない

   Visual Studio Code では、デフォルトで別のフォーマッターが設定されている場合があります。 Prettier をデフォルトのフォーマッターとして設定するには、以下の手順を行います。

   1. Code メニュー > 設定 を開きます。
   2. 「テキストエディター」 > 「既定のフォーマッター」 を検索します。
   3. 「Prettier - コードフォーマッター」 を選択します。

2. Prettier の設定が .tsx ファイルに適用されていない

   Prettier の設定ファイル (.prettier.json) に、.tsx ファイルをフォーマットする設定が明示的に記述されていない場合があります。 この場合は、設定ファイルに以下の内容を追加します。

   {
     "supports": {
       "*.tsx": true
     }
   }
   

3. 拡張機能の競合

4. 古いバージョンの Prettier を使用している

上記以外にも、いくつかの原因が考えられます。 詳細については、以下のリソースを参照してください。

これらの解決策を試しても問題が解決しない場合は、Prettier の GitHub リポジトリで問題を報告することができます:

• Prettier の設定は、プロジェクトルートにある .prettier.json ファイルでカスタマイズできます。
• Visual Studio Code で 「保存時にフォーマットする」 機能を有効にすると、ファイルを保存するたびに Prettier が自動的に実行されます。

• Prettier 拡張機能がインストールされている
• React と TypeScript がインストールされている
• Node.js と npm がインストールされている
• Visual Studio Code がインストールされている

手順

1. 新しい React プロジェクトを作成します。

   npx create-react-app my-app --template typescript
   

2. プロジェクトディレクトリに移動します。

   cd my-app
   

3. 以下のコマンドを実行して、Prettier をインストールします。

   npm install --save-dev prettier
   

4. package.json ファイルに以下のスクリプトを追加します。

   {
     "scripts": {
       "format": "prettier --write src/**/*.tsx"
     }
   }
   

5. .vscode フォルダ内に settings.json ファイルを作成します。

   {
     "[typescript]": {
       "editor.formatOnSave": true
     },
     "[javascript]": {
       "editor.formatOnSave": true
     }
   }
   

6. src フォルダ内に App.tsx ファイルを作成し、以下のコードを追加します。

   import React from 'react';
   
   const App: React.FC = () => {
     return (
       <div>
         <h1>Hello, world!</h1>
       </div>
     );
   };
   
   export default App;
   

Prettier が App.tsx ファイルを自動的にフォーマットします。

• .vscode フォルダ内の settings.json ファイルを使用して、Prettier の設定をカスタマイズすることもできます。
• package.json ファイルの scripts スクリプトを使用して、コマンドラインから Prettier を実行することもできます。

TypeScript 拡張機能の設定で 「フォーマット: 有効化」 オプションが有効になっていることを確認してください。 このオプションが有効になっていると、TypeScript 拡張機能が Prettier よりも優先的にファイルをフォーマットする可能性があります。

ESLint 拡張機能の設定を確認する

Prettier のキャッシュをクリアする

Prettier は、フォーマットされたコードのキャッシュを保存します。 このキャッシュが破損している場合、問題が発生する可能性があります。 Prettier のキャッシュをクリアするには、以下の手順を行います。

1. 「ワークスペース設定」 > 「設定リセット」 を選択します。
2. 「キャッシュをクリア」 > 「すべてのリセット」 を選択します。

Visual Studio Code を再起動する

問題が解決しない場合は、Visual Studio Code を再起動してみてください。