I have a WinJS-UWP-Application, where I use TypeScript 2.5. I just upgraded from VS2015 to VS2017. When I want to debug my WinJS-UWP-Application the Breakpoints inside my .ts-Files are not noted, because the SourceMap isnt read properly. I didn't change any configuration of the project.
In the output I get this message:
SourceMap
ms-appx://8d7814f6-7286-4475-8ed8-be1c489c2253/js/main.js.map read
failed: The URI prefix is not recognized..
My CompilerOptions are:
"compilerOptions": {
"target": "es5",
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
}
The min and target version of the application are: 10.0.14393.0
Do I need to setup anything else in VS2017?
EDIT:
Steps to reproduce:
Create a new UWP WinJS-App in VS 17 with Min and Target Version: 10.0.14393.0
Remove the js\main.js
Add a main.ts file in the js folder
Create a tslib folder and insert the winjs.d.ts inside [For example from DefinetlyTyped]
Add the following code inside the main.ts:
/// <reference path="../tslib/winjs.d.ts"/>
WinJS.UI.processAll().then(() => {
let div: HTMLDivElement = document.createElement("div");
let label: HTMLLabelElement = document.createElement("label");
label.textContent = "Hello from the TypeScript-Side";
div.appendChild(label);
document.body.appendChild(div);
});
Add a new tsconfig.json from the VS17 template.
Start the app with the AnyCPU Configuration
Expected result:
Inside the App you see the text:
Content goes here!
Hello from the TypeScript-Side
In the ouput you see these two messages:
'WWAHost.exe' (Script): Loaded 'Script Code (MSAppHost/3.0)'.
SourceMap ms-appx://32fb2864-03cf-4387-8a05-6c65a66c5a48/js/main.js.map read failed: The URI prefix is not recognized..
EDIT 2:
The content of the main.js.map:
{
"version": 3,
"file": "main.js",
"sourceRoot": "",
"sources": [ "main.ts" ],
"names": [],
"mappings": "AAAA,2CAA2C;AAE3C,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC;IACvB,IAAI,GAAG,GAAmB,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxD,IAAI,KAAK,GAAqB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9D,KAAK,CAAC,WAAW,GAAG,gCAAgC,CAAC;IACrD,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AACnC,CAAC,CAAC,CAAC"
}
EDIT3:
TypescriptBuild-Settings:
TypeScript version: 2.5
Compile on save: Yes
Allow implicit 'any' types: Yes
Keep comments in JavaScript output: Yes
Generate declaration files: No
Generate source maps: Yes
Specify root directory of source maps: $(MSBuildProjectDirectory)
Specify root directory of TypeScript files: $(MSBuildProjectDirectory)
Emit on error: No
If I delete the tsconfig.json, the source maps are created correctly. But i need the tsconfig.json for a few other options, so deleting it is not an option!
I found a workaround which fixes the problem for the moment. I don't know why this works, but if you add the line:
"mapRoot": "js/"
it works correctly.
This only works for the default directory setup!
Related
I found out that installing Django 1.0.2 extention on VS code disables the default html.autoClosingTags, meaning that, even if this is set to True, it won't autoclose HTML tags.
Does anyone knows how to fix it?
Or at least another extention highlighting django syntax that does not disable html.autoClosingTags.
UPDATE:
As suggested by #Nadim Al Abdou
In my settings.json (File>Preferences>Settings> settings.json) there was:
{
"python.pythonPath": "C:\\Applicazioni_Tommaso\\Anaconda3\\pythonw.exe",
"workbench.startupEditor": "newUntitledFile",
"workbench.colorTheme": "Atom One Dark",
"workbench.tree.indent": 30,
"terminal.integrated.cwd": "C:\\users\\tommaso",
"window.zoomLevel": 0,
"workbench.editor.enablePreview": false,
},
I turn it into:
{
"python.pythonPath": "C:\\Applicazioni_Tommaso\\Anaconda3\\pythonw.exe",
"workbench.startupEditor": "newUntitledFile",
"workbench.colorTheme": "Atom One Dark",
"workbench.tree.indent": 30,
"terminal.integrated.cwd": "C:\\users\\tommaso",
"window.zoomLevel": 0,
"workbench.editor.enablePreview": false,
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
"emmet.includeLanguages": {"django-html": "html"},
},
close and re-open vs code, but it does not work.
Update:
This does not work because I am editing the User settings
press ctrl+p
insert >open settings in the search bar
select preferences: Open User Settings (JSON)
while it is now clear that I should edit the Default settings
press ctrl+p
insert >open settings in the search bar
select preferences: Open Default Settings (JSON)
where I actually found the "files.associations": { line.
The problem is I cannot edit the file, beacuse as I try to, vscode shows the message: "cannot edit in read only editor".
What can I do to insert the line "emmet.includeLanguages": {"django-html": "html"}, ?
you need to edit your global settings.json file like so
1.
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
2.
"emmet.includeLanguages": {"django-html": "html"},
I created this extension in one day, I'm adding more features, I saw you are adding:
"emmet.includeLanguages": { "django-html" : "html" }
I tried adding it and is working for me. To be honest I'm not sure Why this is not working for you, Did you resolve it?
Can you try updating VSCode please? This info is helpful for me.
Another way is moving up the line, exactly before:
"files.associations": {
Thanks,
Roberth.
I'm trying to use TailwindCSS in my ember app and I ended up using this add-on to do this. But unfortunately some other add-ons require to include their 'scss' files to app styles. So I tried to add 'postcss-sass' to make it work. But it doesn't want to work with "#apply" command. Is it possible to use postcss and sass and #apply command at the moment?
My ember-cli-build.js:
postcssOptions: {
compile: {
extension: 'scss',
enabled: true,
parser: require('postcss-scss'),
plugins: [
{
module: require('#csstools/postcss-sass'),
options: {
includePaths: ['node_modules']
}
},
require('tailwindcss')('./app/tailwind/config.js'),
...isProduction ? [purgeCSS] : []
]
}
}
And I'm getting an error: UnhandledPromiseRejectionWarning: Error: Invalid mapping: {"generated":{"line":53,"column":-1},"source":"../../out-338-broccoli_merge_trees_full_application/app/styles/app.scss","original":{"line":52,"column":25},"name":null}
This is precisely where #apply appeared the first time.
It turned out the problem was with a missing semicolon in "app.scss". It worked fine when it was a plain css, and stopped working when I converted it to SASS.
I'm working on app with grunt and typedoc.
I need to prepare documentation using TypeDoc but I have a problem with one scenario.
I have to exclude a few files from documentation which are externals libs.
I can't put those files into exclude section because those files are relating with another. If I tried to exclude it (by put those files into exclude section) I had a errors - something like cannot find to xxx into yyy.ts - where xxx is my excluded element and yyy is related file with xxx. Those
related files are neccessary on this documentation so I can't exclude those too.
I read into TypeDoc documentation about excludeExternals. So I thought that if I set up this boolean as true then I can to define externalPattern to exclude my external files. It's works but only if I put the name of one file - no more.
Do You know how to do it?
It is my typedoc config into gruntfile.js (without excludeExternals options):
typedoc: {
build: {
options: {
module: 'commonjs',
out: '../Documentation/',
name: 'MyApp',
target: 'es5',
exclude: [
'node_modules',
'**/*.d.ts'
],
excludePrivate: true,
mode: 'file'
},
src: [
...some source...
]
}
}
This is list of external files which I have to exclude: A.ts, B.ts, C.ts, D.ts ...
And this is my typedoc config into gruntfile.js (with excludeExternals options):
typedoc: {
build: {
options: {
module: 'commonjs',
out: '../Documentation/',
name: 'MyApp',
target: 'es5',
exclude: [
'node_modules',
'**/*.d.ts'
],
excludeExternals: true,
externalPattern: '**/*/A.ts',
excludePrivate: true,
mode: 'file'
},
src: [
...some source...
]
}
}
This config is working well. I have got a documentation without A.ts file. So now I need to put a few files, so I tried to put on externalPattern something like: **/*/(A|B|C|D).ts but without success (because during recompiling of documentation I had error: Process terminated with code 3. 'B' is not recognized as an internal or external command, operable program or batch file.).
Any ideas?
I found the solution. If I want to exclude externals files using externalPattern I should to write pattern something like that:
externalPattern: "**/*/{A,B,C,D}.ts"
{ } = allows for a comma-separated list of "or" expressions
, = or
Useful for me was this comment from topic about regex in gruntfile.
According to this comment, the right syntax would be **/*/+(A|B|C|D).ts. Also, it looks like you are running into a problem with your shell trying to interpret the pipe characters, so try adding double quotes around the whole thing:
externalPattern: '"**/*/+(A|B|C|D).ts"'
In a traditional Ember app, I have something along the lines of this in my ember-cli-build.js:
//ember-cli-build.js
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
includePolyfill: true,
ignore: ['my-ember-ui/models/myFile.js'] // <-- question is here
},
Is there an equivalent to this when using an Ember Engine (or addon)? I couldn't find anything within ember-cli-babel or ember-engines.
I understand that ember-cli-build.js is just for the dummy app when using an engine, so I wouldn't make the change there. I attempted similar to above in the index.js file, but did not have any luck. The file was not ignored by babel. I need a way to ignore a particular file. Thanks!
Well, adding new rules to Cli.build.js is ok depends on what you want to do. However, I may have another solution that you can give it a try.
Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within.(.babelrc files are serializable JSON).
{
"plugins": ["transform-react-jsx"],
"ignore": [
"foo.js",
"bar/**/*.js"
]
}
or
{
"name": "my-package",
"version": "1.0.0",
"babel": {
// my babel config here
}
}
There should be another way which seems ok to use. the following does work:
babel src --out-dir build --ignore "**/*.test.js" // or simply add your file
For more information, you can read Babel document
New to Yeoman as of today. I am building a generator that will create a new package.json with data that will help build the applications Gruntfile. For (probably) unnecessary reasons, I separated out the Yeoman pieces into 2 files. Below is an excerpt from index.js...
// index.js
myGenerator.prototype.packagejson = function packagejson() {
var projectName = this.projectName;
var pkg = {
"name": projectName,
"version": "0.0.0",
"dependencies": {},
"srcDir": process.cwd(),
};
this.write('package.json',JSON.stringify(pkg));
};
myGenerator.prototype.gruntfile = function gruntfile(){
this.template('Gruntfile.js','Gruntfile.js');
}
This creates a package.json file and writes the JSON string to the file. projectName is a prompt asked when the template is loaded in the command line. Process.cwd() refers to the current file directory.
Then it creates a Gruntfile from a template. Except below:
//Grunt - Yeoman template
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sync:{
dev:{
files:[
{src:['./index.html','./app.css','./js/*.js'],dest:'m:/dev/project/'},
{cwd:"<% pkg.srcDir %>", src:['**/*.js','**/*.css','**/*.html'], dest:'m:/dev/project/'}
]
}
}
})
};
This, in my mind should...
Create a path that was generated by index.js (via process.cwd()) that was printed to the package.json file. This is read into the gruntfile via grunt.file.readJSON.
Then the path reference (string) should be accessible through the object property: pkg.srcDir.
However, I only get back an empty string.
// Gruntfile.js for new application
cwd:"", src:['**/*.js','**/*.css','**/*.html'], dest:'m:/dev/project/'
Any obvious reason why I am not able to read in the package.json info and populate my gruntfile?
Thanks
Add double percent in the opening template tag
<%% pkg.srcDir %>