【徹底解説】Visual Studio CodeでJavaScriptとTypeScriptの構文強調表示が機能しない時の解決策
Visual Studio Code で JavaScript と TypeScript の構文強調表示が機能しない場合の対処方法
設定を確認する
VSCode には、JavaScript と TypeScript の構文強調表示を制御するいくつかの設定があります。これらの設定を確認して、正しく構成されていることを確認してください。
- 「editor.colorTheme」設定
この設定を使用して、VSCode で使用する配色テーマを指定します。一部の配色テーマは、構文強調表示が正しく表示されない場合があります。 - 「editor.rulers」設定
この設定を使用して、エディターの行番号マーカーを表示するかどうかを制御します。行番号マーカーが表示されていないと、構文強調表示が正しく表示されない場合があります。 - 「files.associations」設定
この設定を使用して、VSCode が特定の拡張子をどの言語と関連付けるかを指定します。JavaScript の場合はjavascript、TypeScript の場合はtypescriptに設定する必要があります。
これらの設定を確認するには、以下の手順を実行します。
- VSCode で 「Code」 メニューを開き、「Preferences」 を選択します。
- 「設定」 エディターが開きます。
- 左側の検索バーに、設定名を入力します。
- 検索結果から設定を選択します。
- 設定値を編集して、ニーズに合致するようにします。
拡張機能を無効化する
VSCode でインストールされている拡張機能が、構文強調表示の問題を引き起こしている可能性があります。問題を解決するには、すべての拡張機能を無効にしてから、1 つずつ有効にしてみてください。問題がいつ発生するかを確認することで、問題を引き起こしている拡張機能を特定できます。
拡張機能を無効にするには、以下の手順を実行します。
- 「拡張機能」 パネルが開きます。
- 問題があると思われる拡張機能を見つけます。
- 拡張機能のスイッチをオフにして無効化します。
VSCode を再起動する
上記の手順を試しても問題が解決しない場合は、VSCode を再起動してみてください。場合によっては、単にエディターを再起動することで問題が解決することがあります。
TypeScript をインストールする
TypeScript を使用している場合は、TypeScript がコンピューターにインストールされていることを確認してください。TypeScript がインストールされていない場合は、 からダウンロードしてインストールできます。
tsconfig.json ファイルを作成する
TypeScript プロジェクトの場合は、tsconfig.json ファイルを作成する必要があります。このファイルは、VSCode が TypeScript コンパイラをどのように使用するかを構成するために使用されます。tsconfig.json ファイルの作成方法については、 を参照してください。
function greet(name) {
console.log('Hello, ' + name + '!');
}
greet('World');
TypeScript
interface Person {
name: string;
age: number;
}
function greetPerson(person: Person): void {
console.log('Hello, ' + person.name + '!');
}
greetPerson({ name: 'John Doe', age: 30 });
これらの例で、変数、関数、キーワードなどの構文要素が適切に色分けされていることが確認できます。
VSCode を最新バージョンに更新すると、問題が解決される場合があります。最新バージョンをダウンロードするには、 にアクセスしてください。
ユーザー データを削除する
VSCode のユーザー データを削除すると、問題が解決される場合があります。ユーザー データを削除するには、以下の手順を実行します。
- VSCode を終了します。
- コンピューターのファイル エクスプローラーを開きます。
- 以下のディレクトリに移動します。
- Windows
%AppData%\Code\VSCode - Mac
~/Library/Application Support/Code/VSCode - Linux
~/.config/Code/VSCode
- Windows
CacheフォルダーとDataフォルダーを削除します。
コンピューターを再起動する
場合によっては、単にコンピューターを再起動することで問題が解決することがあります。
別のテキスト エディターを使用する
上記の手順を試しても問題が解決しない場合は、別のテキスト エディターを使用することを検討してください。 JavaScript と TypeScript に対応している無料のテキスト エディターはたくさんあります。
追加リソース
javascript typescript visual-studio-code
