I have never work in any vscode extension neither witch nodejs/npm
im trying to compile this extension:
gutter-preview
I have download nodejs, installed, then i download the extension source, open cmd:
cd 'folder where is the extension src' > npm install package.json
it installed and created a folder node_modules
am i doing it correctly? what's the next steps?
The easiest way will be from the extension directory in your VSCode, you can open that using one of these three ways:
a. View > Extension
b. From sidebar, click on extension icon
c. CTRL + Shift + x
Then search for "gutter preview" with quotations, you'll get one result called Image Preview, that's the extension, just click on install.
Another way is visit this url
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview.
Then press on 'Download Extension' on the right hand side, download the file then inside your vscode open the command pallet (CTRL + Shift + p) and type:
extensions install from vsix, click that command, then choose the .VSIX file you just downloaded.
And last if you must do it from the github repo, then inside the directory where you ran npm install and found the node_modules directory, run npm run webpack-prod (a command specified in the package.json file in the root of the project folder, which describes how to build the app). Then you should find a .VSIX file in the ./dist/extension directory in the project, and you apply step 2 on the generated .VSIX file
The process to follow is the same like for any extension development. When you have the code ready to build the extension package follow the publishing guidelines.
However, instead of really publishing the downloaded extension you would just build the package using:
vsce package (see also the Usage section on this page)
If you need to debug the extension code follow the Your First Extension page (jumping over the sections that explain how to create the initial extension code). See also the follow up pages like Extension Anatomy, which explain more details you might need.
Related
I have old project it is using geckofx45 with "xulrunner" folder in project.
I tried to replace it and update with geckofx60 from Nuget package but it doesn't have xulrunner folder after completed but instead it added "Firefox" called folder.
So what should I do? I can't even rebuild project now since I didn't make a copy of old project.
Could you try different initiation path?
Instead of
Xpcom.Initialize();
You could rename your Firefox folder to xulrunner then use
Xpcom.Initialize("xulrunner");
Or you keep the Firefox folder, and use
Xpcom.Initialize("Firefox");
I find various different approaches to updating packages using node. I am trying to update using the package.json packages in Visual Studio 2017 Community, when using their SPA Angular site.
Can anyone confirm the 'correct way' of doing this.
For example, I am trying to update to bootstrap v4 on this project. So i have changed the entry in the `package.json' to be;
"bootstrap": "4.0.0",
I have then tried the following;
Right-clicking package.json -> restore packages (this then runs a background task I can see this from the icon in the bottom left hand corner of the screen) and get 'Installing Packages Complete' once the task has run.
(Does this invoke npm update?)
I have also tried running the cmd `npm update --save/--save-dev1 in the package command console (I get the same response as above regarding a background task being run and then completed).
I assume the packages will be downloaded and stored in the node_modules folder in the project directory? In which case it appears the packages are not updating? As I have navigated to the node_module/bootstrap and when I look at the .js in the dist folder of the package it is still referencing 3.3.7?
I have tried deleting the entire contents of the node_modules folder and then the 2 above commands (which does repopulate, but with the same modules??).
Also to add if I navigate (in the solution explorer) to depedencies -> npm 3.3.7 of bootstrap is referenced here also.
I am also attempting to update angular to v6 as well, again unsuccessfully and v4 is still referenced everywhere (even though the package.json is updated.)
I am running the standard template for core 2 with angular 4 spa with Visusal Studio 2017 community edition.
Can someone explain the process and what I am doing wrong here please?
Edit - Update
I have managed to get singular packages to update, by right clicking the package in the solution explorer under dependencies -> npm -> .
this then runs another background task, but it then updates the package to match that what is in the package.json file?
It works at least, but surely there must be an easier way??
I have a Team Foundation Build server behind a firewall, and I would like to check in a node_modules/ directory (powering both a Browserify client app and Node server app) associated with a project so that all of the files and dependencies needed to deploy a build are available without fetching anything.
Checking node_modules/ in to TFS seemed to work at first, except that the bin/ directories appearing in around 20 of my NPM dependencies were not checked in. bin/ does not appear in my .tfignore (or anywhere else I know of that could be preventing the check in).
These bin/ directories don't appear in the included/excluded changes in Team Explorer, at all. It's possible to locate one of these folders in Windows Explorer and add it with the TFS context menu, but doing that for all of the dependencies would be horrifically tedious and error prone.
How can I persuade TFS to detect changes in these folders? Is there some other configuration affecting included/excluded changes that I'm not aware of?
It is not recommended to upload "bin" folder or "node_modules" folder into Version Control. But if you do want to do this, following the steps below:
Go to "C:\Users\youraccount\AppData\Local\Microsoft\Team Foundation\x.0\Configuration\VersionControl" folder and open "LocalItemExclusions.config" file. (There may several folders named like 1.0, 2.0, 3.0, you need to make sure open the folder your VS current use.)
Delete the lines like following and save the file:
<Exclusion>bin</Exclusion>
<Exclusion>*.dll</Exclusion>
Close Visual Studio.
Delete "node_modules" folder.
Restart Visual Studio.
Run "npm install" command to reinstall the node modules.
Check "Pending Changes", files in "bin" folder should be listed in "Excluded Changes" section.
To check if the files and bin folders will get ignored by TFS. You could try to manually add them (such as drag to source control explorer). If you couldn't, then must related to some .tfignore settings , you may double check this such as if there is a .tfignore file in the root of the project folder level.
If you could, there maybe something wrong with your workspace or source control mapping of the bin folder. Try to remove the source control bindings and rebinding to TFS. Also give a try with delete the old workspace and use a new workspace.
You shouldn't check in node_modules - ever.
Rather use browserify or WebPack (I'd recommend WebPack) to package up your bundle.js.
Add the bundle.js to your source/scripts folder. Reference your bundle.js from your html instead of any <../node_modules/../scripts>.
Remove the npm install from your build script. you won't need it now due to referencing your bundle.js
WebPack is a dev-step, but it secures the version of packages you used during development and also saves you the npm install headache during deployment.
I try to build and debug an extension in Code.
I downloaded the sample of word-count from https://github.com/microsoft/vscode-wordcount.
When I clicked F5, ./out folder was not generated and I saw failure: Activating extension ms-vscode.wordcount failed: Cannot find module 'd:/VSCode/vscode-wordcount/out/extension'.
I found the post
https://github.com/Microsoft/vscode-go/issues/35
and I think this was because I failed to build the extension.
And I checked my path that node and npm were both set.
I found there were 2 possible issues.
I could not find .\node_modules folder in my extension folder. The folder structure is like
.vscode\
-- launch.json
-- settings.json
-- tasks.json
image\
test\
typings\
-- vscode-typings.d.ts
extension.ts
package.json
tsconfig.json
My node version is v0.12.2.
Could you give me some hints how to investigate the issue?
You probably downloaded directly from GitHub.
You will need to run npm install in your project's folder in order to create the node_modules directory and add the required dependencies.
If you simply want to install the extension to use it, you will also need to:
Move the folder to the correct place
npm install
OR
Install the built version directly from the Visual Studio Marketplace through the command pallet.
Is there a way to add the NPM NodeJS External modules so my node project modules appear in 'External Libraries' and are resolved by code completion and navigate?
Thanks
Yes, besides enabling code completion in Settings (Ctrl + Alt + S) > Languages and Frameworks > Node.js after downloading it via the Settings > Plugins section, You have to actually install the Node.js kind of manually.
First, create a basic package.json file containing all the config info needed to install Node.js,
for more info look here: https://nodejs.dev/learn/the-package-json-guide
After you've done that, simply open up the terminal emulator (Alt + f12) and type in npm install.
As long as you have the package.json file in the same directory, everything should work fine, and your IDE - webstorm in this case, should add Node's external modules automatically,to the External libraries > Node.js core section in your project tab.
Cheers.
on webstorm go to:
file
settings
javascript
libraries
download or add