14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Visual Studio Codeでとあるjsonの編集で補完を効かせる

Posted at

小ネタです。最近 Visual Studio Codeを使っていますが、その設定関連です。

やること

Visual Studio Codeでjsonの編集中にIntelliSenseを効かせる。

たとえば、package.jsonとかの場合、すでにIntelliSenseが有効なので、適当なところでctrl+spaceを押すと、その文脈にそって入力可能な候補を表示してくれます。

しかし、すべてのjsonファイルで候補を表示してくれるかというとそうでもなく、tsd.jsonのように何も教えてくれない場合もあります。このようなファイルも候補を表示してくれるようにしたいです!

そもそもなぜ候補が出るか

JSON Schemaを利用しているようです。ので、編集したいjsonファイルのschemaをVisual Studio Codeに教えてあげる必要があります。

設定方法

tsd.jsonを例にします。

メニューのFile -> Preferences から、User SettingsWorkspace Settingsを選びます。プロジェクト内で他の人と共通で利用するならWorkspace Settingsがよさそうです。

そうすると、Visual Studio Code が左右分割されて表示されますが、左側はデフォルトの設定なので、編集できません。右側を修正します。
これはsettings.jsonというファイルなのですが、これは候補が表示されてくれます。
ので、jsonくらいまで打つとjson.schemasという候補が出るかと思いますので、それで確定します。
すると、デフォルトの設定がまるっと入力されるので、一番下にでも追加します。

settings.json抜粋
    {
      "fileMatch": [
        "/tsd.json"
      ],
      "url": "http://json.schemastore.org/tsd"
    }

このurlはJSON Schemaの場所を指定するのですが、ここではJSON Schema Storeというサイトを使わせていただきました。いろんなjsonファイルがありそうなので、たいていはここで足りそうです。(デフォルトの設定もだいたいはここを見ていますね)

というわけで、IntelliSense使えるようになりました。ありがとうございます。

14
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?