質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • Node.js

    1854questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • TypeScript

    341questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • npm

    277questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

  • Visual Studio Code

    254questions

    Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

VSCode拡張機能の開発に必要な"types/node"パッケージがインストールできない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,036

NumAniCloud

score 40

Visual Studio Codeの拡張機能を開発しようとしています。Hello, Worldでつまづいているので質問させていただきたいと思います。

環境と状況

  • OS: Windows 10
  • npmバージョン:1.4.9
  • nodeバージョン:6.6.0
    (node.jsはChocolateyによってインストールしました。)

https://code.visualstudio.com/docs/extensions/example-hello-world
こちらのページを参考にHello, Worldを表示するコマンドをVSCodeに追加するものを作ろうとしています。
Hello, Worldを表示すること自体はできるのですが、エラーがいくつか出ることが気になっています。
そのエラーについていくつかお伝えします。

 プロジェクトの生成時のエラー

適当なディレクトリでyo codeコマンドを実行し、拡張機能のプロジェクトを生成します。
このとき、パッケージのインストールの段階で以下のような出力が得られます。

npm WARN package.json teratail@0.0.1 No repository field.
npm http GET https://registry.npmjs.org/mocha
npm http GET https://registry.npmjs.org/vscode
npm http GET https://registry.npmjs.org/types/node
npm http GET https://registry.npmjs.org/types/mocha
npm http GET https://registry.npmjs.org/typescript
npm http 304 https://registry.npmjs.org/mocha
npm http 304 https://registry.npmjs.org/typescript
npm http 304 https://registry.npmjs.org/vscode
npm http 404 https://registry.npmjs.org/types/node
npm ERR! 404 Not Found
npm ERR! 404
npm ERR! 404 'types/node' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 It was specified as a dependency of 'teratail'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.

npm ERR! System Windows_NT 10.0.14393
npm ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\Applications\\Chocolatey\\lib\\npm\\tools\\node_modules\\npm
\\bin\\npm-cli.js" "install"
npm ERR! cwd D:\Documents\Visual Studio Code\teratail
npm ERR! node -v v6.6.0
npm ERR! npm -v 1.4.9
npm ERR! code E404
npm http 404 https://registry.npmjs.org/types/mocha
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     D:\Documents\Visual Studio Code\teratail\npm-debug.log
npm ERR! not ok code 0


この出力には、'types/node' is not in the npm registry.なるエラーが含まれています。
https://registry.npmjs.org/types/node
にアクセスしてみると、

{}


とだけ書かれたページが開きます。一時的にページが壊れているのかと思いましたが、方法が間違っている可能性もあると考えています。このエラーに対処する方法はありますでしょうか?

ビルド時のエラー

yo codeコマンドは上記のエラーを出しつつも一応プロジェクトを生成します。プロジェクトのフォルダをVSCodeで開き、F5キーでビルドすると以下のようなエラーが出ます。
エラー
おそらくパッケージがうまくインストールできていないことに起因すると思っていますが、このエラーも出ないようにしたいです。

ディレクトリ構造がおかしい

yo codeが生成したプロジェクトのフォルダにはnode_modulesフォルダが作られませんでした。以下のようなディレクトリ構造になりました。
ディレクトリ構造

Intellisenceが効かない

TypeScriptコード上でIntellisenceも効かなくなっており、それは上記それぞれのエラーに起因するものと考えています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

以下のバージョン(最新)なら特に問題はないようです。
アップデートしてみたらどうでしょうか?(yoが古い?)

PS D:\> yo --version
1.8.5
PS D:\> node -v
v6.10.2
PS D:\> npm -v
5.0.0
PS D:\>

yo codeコマンド実行履歴

PS D:\> yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? test
? What's the identifier of your extension? test
? What's the description of your extension? teratail-test
? What's your publisher name (more info: https://code.visualstudio.com/docs/tools/vscecli#_publishing-extensions)? no
? Initialize a git repository? No
   create test\.vscode\launch.json
   create test\.vscode\settings.json
   create test\.vscode\tasks.json
   create test\test\extension.test.ts
   create test\test\index.ts
   create test\.vscodeignore
   create test\.gitignore
   create test\README.md
   create test\CHANGELOG.md
   create test\vsc-extension-quickstart.md
   create test\tsconfig.json
   create test\src\extension.ts
   create test\package.json


I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.


npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated jade@0.26.3: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated to-iso-string@0.0.2: to-iso-string has been deprecated, use @segment/to-iso-string instead.

> test@0.0.1 postinstall D:\test
> node ./node_modules/vscode/bin/install

Detected VS Code engine version: ^1.12.0
Found minimal version that qualifies engine range: 1.12.0
Fetching vscode.d.ts from: https://raw.githubusercontent.com/Microsoft/vscode/1.12.0/src/vs/vscode.d.ts
vscode.d.ts successfully installed!

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test@0.0.1 No repository field.
npm WARN test@0.0.1 No license field.

added 309 packages in 20.308s

Your extension test has been created!

To start editing with Visual Studio Code, use the following commands:

     cd test
     code .

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.


PS D:\>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/03 15:02

    npmのバージョンが古いことが原因だったようです。パッケージマネージャとして使っているChocolateyでnpmをインストールすると v1.4.9.20150213 までしか最新版がなく、 https://chocolatey.org/packages/npm の警告に従ってChocolateyからアンインストールしてみるとnpm v5.0.0 が使えるようになりました(おそらくnode.jsをインストールしたときについてきたもの?)。

    tenpaさんの回答のおかげで問題に気づくことができました。ありがとうございました。

    キャンセル

  • 2017/06/03 15:04

    補足情報:
    最終的にバージョンは次のようになりました。
    yoバージョン:1.8.5
    node.jsバージョン:8.0.0
    npmバージョン:5.0.0

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Node.js

    1854questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • TypeScript

    341questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • npm

    277questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

  • Visual Studio Code

    254questions

    Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。