Develop Reference

Visual Studio Code extension development problem with typescript

as you see above, the building process never finishes and no extension host window appears.
the problem also exists when all extensions all disabled
but this problem doesn't exist when creating project with javascript (the problem is only with typescript)
the steps that I follow is from this tutorial
and I also tried the hello world sample from github.
but none of them worked.
EDIT:
I tried to open extension development host window manually by code --extensionDevelopmentPath="path/to/my/project" and it worked.
I think the issue is with some of vscode's configurations
possible fix: I should check the configurations such as npm: watch. but I don't know where are they and what should I do with them??
so any idea?
EDIT 2:
task.json
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "watch",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"presentation": {
"reveal": "never"
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
launch.json
// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
],
"outFiles": [
"${workspaceFolder}/out/test/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
}
]
}
then I noticed that if I comment out "preLaunchTask": "${defaultBuildTask}" in launch.json file, the problem solves.

Finally I caught the issue. that was because of the locale of my system that was set to Persian which typescript problem matcher couldn't recognize(Persian digits).
By setting system locale to English the problem solved and everything now works fine as expected.
please see the issue on github

Composer: Including a custom js script via composer (then load via require.js)?

I've been tackling this for hours...
When it comes to components, composer creates require.js and require.css files. I want to include my own script, so it can be loaded via the same require.js.
Right now, even though it detects core.js and puts it in /core/libs folder:
libs\WootWoot\core\js\core.js
It doesn't load via the require.js :(
What am I doing wrong? This is my composer.json file:
{
"name": "WootWoot",
"config": {
"component-dir": "public_html/core/libs",
"component-baseurl": "/core/libs"
},
"require": {
"robloach/component-installer": "^0.2.3",
"components/jquery": "^3.3",
},
"extra": {
"component": {
"script": [
"/core/js/core.js"
]
}
}
}

How to configure gulp build with tasks.json version 2?

Right now we are using the tasks.json 0.1.0 version of tasks in Visual Studio Code.
Navigating to https://code.visualstudio.com/docs/editor/tasks indicates that VS code will automatically detect all of my tasks in my gulp file.
I've installed various extensions to try and autodetect my tasks and they are still not being detected.
At this point, I'm looking into creating a new version of tasks.json that handles all of our gulp tasks.
How do I do this? Here is my tasks.json 0.1.0:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [],
"showOutput": "always",
"options": {
"cwd": "${workspaceRoot}/MyAppName"
},
"tasks": [
{
"taskName": "build",
"args": ["build:debug"]
},
{
"taskName": "build:debug",
"args": ["build:debug"]
},
{
"taskName": "build:release",
"args": ["build:release"]
}
]
}
I've looked at other questions and there doesn't seem to be anything at the moment that indicates how to get gulp running in tasks.json 2.0.
I want to be able to use this build task from outside of the folder that contains the gulpfile. I know VS will automatically detect the tasks if the folder where my gulpfile is opened.

After scouring the web, I couldn't find anything. I wanted to setup a custom build in code for our build:debug gulp task.
So, I built my own:
(buildDebug.sh)
#!/bin/bash
clear
pwd
cd [your gulpfile.js directory]
gulp build:debug
(tasks.json)
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"taskName": "Run Build",
"type": "shell",
"command": "/c/[where you saved buildDebug.sh]/buildDebug.sh",
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"reveal": "always",
"panel": "shared"
}
}
]
}

Node webkit application with USB module failing

I am writing an desktop application using node-webkit. I have written script using Node USB module which is working fine if i run that script using node. It lists all usb devices , connects,reads,writes. Now I want to achieve same using node-webkit application where HTML has a button on which we have to do these things. Now for this we require to configure node modules. I have added that module to my project and then did process as mentioned
package.json:
{
"name": "node-webkit-angular-bootstrap-starter",
"version": "0.0.1",
"description": "Starter destkop app using node-webkit, html5, angular, and bootstrap",
"main": "app/index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"window": {
"title": "node-webkit-angular-bootstrap-starter",
"toolbar": true,
"frame": true,
"width": 1024,
"height": 768,
"position": "center"
},
"dependencies" : {
"node-pre-gyp": "0.6.9"
},
"bundledDependencies":["node-pre-gyp"],
"devDependencies": {
"aws-sdk": "~2.0.0-rc.15"
},
"scripts": {
"install": "node-pre-gyp install --fallback-to-build"
},
"binary": {
"module_name": "usb",
"module_path": "./app/lib/binding/",
"host": "https://github.com/camsoupa/node-usb"
}
}
Home.js:
(function () { 'use strict'; app.controller('homeController', function ($scope) {alert("Heelooooo");
var gui = require('nw.gui');
var os = require('os');
$scope.settings = [];
$scope.usb = require('usb'); });})();
I am getting following error for running the application using nw
"%1 is not a valid Win32 application.
↵D:\Projects\…er\node_modules\usb\src\binding\usb_bindings.node"}
Can some one please help me?

I solved this issue in my case by compiling for the correct architecture. In my environment, node is 32-bit while nw is 64-bit. Changing directories to the usb module, the following two commands resolved the issue by creating a 64-bit version of the native bindings:
nw-gyp configure --target=0.12.3 --module_name=usb_bindings --module_path=..\src\binding\ --target_arch=x64
nw-gyp build --target=0.12.3 --module_name=usb_bindings --module_path=..\src\binding\ --target_arch=x64
The module_name and module_path variables are necessary because for whatever reason, nw-gyp isn't getting their values from the binding.gyp file.
One more thing that can cause the error you described is renaming nw.exe to something else. As long as it is named nw.exe, the symbols will bind correctly.

Creating Dojo Build Layer from Bootstrap Files, Preferably without Exporting the Entire Dojo Library

I have a simple Dojo 1.8 AMD web app. It has a couple of bootstrap files for different MVC views, and 3 custom modules. I want to build the two bootstrap files to include their relative dependencies.
File structure
- js
- tournament_organiser
- Alert
- templates
- Alert.html
- ImportDialog
- templates
- ImportDialog.html
- SquadronPicker
- templates
- SquadronPicker.html
- Alert.js // module
- config.js // Dojo config file
- form_run.js // bootstrap for "from" view
- list_run.js // bootstrap for "list" list
- package.json
- ImportDialog.js // module
- SquadronPicker.js // module
- tournament_organiser.profile.js
- dojo_toolkit
- dojo
- dijit
- dojox
I want to build 2 layer files, one for each bootstrap. Each contains several Dijit requires for declarative widgets in the view, plus form_run.js uses the custom modules.
So far, I have this for package.json:
{
"name": "tournament_organiser",
"description": "Tournament organiser app for X-Wing Miniatures Game",
"version": "0.1",
"dependencies": {
"dojo": "~1.8.5",
"dijit": "~1.8.5",
"dojox": "~1.8.5"
},
"main": "src",
"homepage": "http://xwing-builder.co.uk/tournament",
"dojoBuild": "tournament_organiser.profile.js"
}
And this for tournament_organiser.profile.js:
var profile = (function(){
return {
resourceTags: {
// tag all.js files as modules
amd: function(filename, mid) {
return /\.js$/.test(filename);
}
},
basePath: "./",
releaseDir: "../tournament_organiser_built",
action: "release",
packages:[{
name: "dojo",
location: "../dojo_toolkit/dojo"
},{
name: "dijit",
location: "../dojo_toolkit/dijit"
},{
name: "dojox",
location: "../dojo_toolkit/dojox"
},{
name: "squad_builder",
location: "../squad_builder"
}],
// this is the bit I'm stuck on... how do I define layers for each bootstrap?
layers: {
"form_run": {},
"list_run": {}
}
};
})();
An example bootstrap file (form_run.js):
require( [ 'dojo/parser',
'dojo/on',
'dijit/registry',
'dojo/dom',
'dojo/dom-style',
'dojo/_base/array',
'dojo/_base/lang',
'dojo/aspect',
'squad_builder/loadingPane',
'tournament_organiser/SquadronPicker',
'tournament_organiser/Alert',
// used by declarative dijits on page
'dijit/form/Button',
'dijit/form/Form',
'dijit/form/ValidationTextBox',
'dijit/form/DateTextBox',
'dijit/form/NumberSpinner',
'dijit/form/CheckBox',
'dijit/form/Select',
'dijit/form/FilteringSelect',
'dojo/domReady!' ],
function ( parser, on, registry, dom, domStyle, array, lang, aspect, loadingPane, SquadronPicker, alert )
{
...
} );
How do I tell the build tool to read my bootstraps to find the necessary dependencies, and bundle them all up into a single file?
Also, is it possible to output just the built layers without copying over all of the Dojo Toolkit? In production, I use the Google CDN-hosted Dojo, so would only need my layer to be included on the page.
In fact, I would prefer to just put the built layers into the same folder as the source and then load the layers in production and the original files in development. Is this a bad idea?
Edit:
I tried:
layers: {
"form_run": { include: [ "tournament_organiser/form_run" ] },
"list_run": { include: [ "tournament_organiser/list_run" ] }
}
But got a lot of warnings and an error: http://pastebin.com/Yqz5zhT1