Visual Studio Codeを、Webサイト制作に適した設定にカスタマイズする。
関連リンク
Documentation for Visual Studio Code
Script
VS Codeを、Webサイト制作に適した設定にカスタマイズしていきます。
フォントサイズ、タブサイズ、ワードラップを変更する
まずはフォントサイズなどを変更します。「左下の管理ボタン > 設定」へと進みます。
「Font Size」は、フォントサイズのピクセル。 「Tab Size」は、インデントの幅。 「Word Wrap」は、テキストをウインドウの端で折り返すか。
です。
ここでは、Font Sizeを14、Tab Sizeを2、Word Wrapをonにします。
カラーテーマを変更する
「左下の管理ボタン > 設定」へと進んで、「ワークベンチ > 外観」から、カラーテーマの変更ができます。
他にも、このページからお気に入りを探すこともできます。言語をHTMLかCSSに変えて、たとえば「Trending」で並び替えます。
おすすめは「Monokai」ですが、グッとくるものを探してみてください。また、いつでも変更できるので、いったんお気に入りのテーマをインストールしたら、ここに戻ってきてください。
ファイルを開くアプリケーションを変更する
VS Code自体のカスタマイズというよりは、Macの設定なのですが、ダブルクリックでファイルを開いた時に、どのアプリで開くかを設定しておきます。
設定用のファイルを用意しましたのでダウンロードしてください。html、css、js、3つのファイルが入っています。
（サンプルのダミーファイル）
まずはCSSファイルを選択して、メニューバーの「ファイル」から「情報を見る」を選択してください。ショートカットは「⌘command + I」です。
「このアプリケーションで開く」のポップアップメニューをクリックして「その他」へと進みます。「Visual Studio Code.app」を選択してください。
そして「すべてを変更…」を押して、「続ける」を選択します。
次に、HTMLファイルを選択して「⌘command + I」、「このアプリケーションで開く」から「Visual Studio Code.app」を選択します。
さらに、JSファイルを選択して「⌘command + I」、「このアプリケーションで開く」から「Visual Studio Code.app」を選択します。
これで、html、css、jsファイルをダブルクリックした時にVS Codeで開かれるようになりました。
設定を同期する
VS Codeにログインして設定を同期することで、パソコンを買い替えた場合や、2台目のパソコンでもそのままの設定が同期されます。
「左下のアカウントボタン」から「設定の同期をオンにする」へと進みます。MicrosoftかGitHubのアカウントが必要です。持っていなければアカウントを作成してください。