Visual Studio Code で JavaScript と TypeScript の構文強調表示が機能しない場合の対処方法
設定を確認する
VSCode には、JavaScript と TypeScript の構文強調表示を制御するいくつかの設定があります。これらの設定を確認して、正しく構成されていることを確認してください。
- 「files.associations」設定: この設定を使用して、VSCode が特定の拡張子をどの言語と関連付けるかを指定します。JavaScript の場合は
javascript、TypeScript の場合はtypescriptに設定する必要があります。 - 「editor.rulers」設定: この設定を使用して、エディターの行番号マーカーを表示するかどうかを制御します。行番号マーカーが表示されていないと、構文強調表示が正しく表示されない場合があります。
- 「editor.colorTheme」設定: この設定を使用して、VSCode で使用する配色テーマを指定します。一部の配色テーマは、構文強調表示が正しく表示されない場合があります。
これらの設定を確認するには、以下の手順を実行します。
- VSCode で 「Code」 メニューを開き、「Preferences」 を選択します。
- 「設定」 エディターが開きます。
- 左側の検索バーに、設定名を入力します。
- 検索結果から設定を選択します。
- 設定値を編集して、ニーズに合致するようにします。
拡張機能を無効化する
VSCode でインストールされている拡張機能が、構文強調表示の問題を引き起こしている可能性があります。問題を解決するには、すべての拡張機能を無効にしてから、1 つずつ有効にしてみてください。問題がいつ発生するかを確認することで、問題を引き起こしている拡張機能を特定できます。
拡張機能を無効にするには、以下の手順を実行します。
- 「拡張機能」 パネルが開きます。
- 問題があると思われる拡張機能を見つけます。
- 拡張機能のスイッチをオフにして無効化します。
VSCode を再起動する
上記の手順を試しても問題が解決しない場合は、VSCode を再起動してみてください。場合によっては、単にエディターを再起動することで問題が解決することがあります。
TypeScript をインストールする
TypeScript を使用している場合は、TypeScript がコンピューターにインストールされていることを確認してください。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
