Some projects I work on use .es6 extension for JavaScript files that import/export using ES6 module syntax.
While webstorm and webpack seem to have no issues with this setup, VSCode gives a red squiggly saying [js] Cannot find module './filename.es6'.
Is there some way to get VS Code to find modules imported that do not have a .js extension? We would like to use .jsx in a similar fashion.
I have this for a .jsconfig:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
},
"files": [
"**/*.jsx",
"**/*.es6",
"**/*.js"
]
}
...and tried adding .es6 under user settings for VSCode, but suspect I did it wrong or that doesn't solve the issue.
Related
I'm making an app using plain HTML and TypeScript (compiled into JS ofc). I'm not using anything external and I'm also not using TS modules - I had issues with calling methods from global scope.
I have the following folder structure:
- build
- page
- index.html
- src
- include
- <bunch of .ts files>
- tsconfig.json
- <few .ts files>
- tsconfig.json
This is the \src\tsconfig.json file:
{
"compilerOptions": {
"outDir": "../build/",
"target": "ES6",
"lib": ["DOM", "esnext"],
"downlevelIteration": true
},
"compileOnSave": true
}
This is the \src\include\tsconfig.json file:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outFile": "../../build/Include.js",
}
}
What I want
I want to compile the contents of \src\include\ into a single file to \build\include.js because manually linking many script files in \build\page\index.html would be dumb.
The rest of the .ts files in \src can be compiled into individual files to \build\.
The way it's set up right now works, but the compilation of the \src\ folder (I'm compiling each folder separately) also compiles the \src\include\ folder into \build\include\<individual compiled files>.js
What I've tried
If I exclude the \src\include\ from \src\tsconfig.json, I can't compile it because the classes from the include folder cannot be found in the .ts files in \src\
Other SO question answers I've tried:
https://stackoverflow.com/a/69568072/19674384 - Classes from the include folder cannot be found despite being explicitly included (wtf?)
https://stackoverflow.com/a/40781823/19674384 - Classes from the include folder still cannot be found
https://stackoverflow.com/a/65282934/19674384 - noEmit doesn't compile anything, the second suggestion seems like something else entirely
Am I doing something wrong or should I approach this completly differently?
I'm currently tasked with building 2 UI's for a service I've constructed.
The output from both of these UI's will need to end up in the same root folder.
I found the section that names the basic bundles in the "aurelia.json" file, and renamed the bundles created for my project, when built, my project as expected created 2 new bundles in the scripts directory with the new names.
However, upon running my project, I then found that index.html was getting a 404 trying to load the "vendor-bundle" (Which I had renamed to 'service-vendor-bundle').
No problem there, I just edited index.html to reference the new file, and bingo, 404 resolved.
The problem is however, that "service-vendor-bundle" can now not load "service-app-bundle".
I assumed (Probably incorrectly) that, when I renamed the bundles in my aurelia.json file, that the build output would also be configured appropriately to load the files in.
I need to be able to customize this beacuse once the 2 aurelia apps are finished, they will need to share a scripts folder, so I'll need
uione.html to load "scripts\uione-vendor-bundle.js" and "scripts\uione-app-bundle.js"
and I'll need
uitwo.html to load "scripts\uitwo-vendor-bundle.js" and "scripts\uitwo-app-bundle.js"
The final file layout once on the server will look something like the following:
root
uione.html
uitwo.html
scripts
uione-vendor-bundle.js
uione-app-bundle.js
uitwo-vendor-bundle.js
uitwo-app-bundle.js
images
*.png
Both client apps have to be developed separate from each other and be stand alone, so I can't combine them into one app, and I cant put them into seperate folders as the service that will be serving them is a custom in house built service, specifically configured to only serve from a single folder, with a single scripts and images folder.
My aurelia.json file currently looks like this:
.........
"plugins": [
{
"name": "text",
"extensions": [
".html",
".css"
],
"stub": true
}
]
},
"options": {
"minify": "stage & prod",
"sourcemaps": "dev & stage"
},
"bundles": [
{
"name": "uione-app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
]
},
{
"name": "uione-vendor-bundle.js",
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"node_modules/requirejs/require.js"
],
..........
and I'm using the Aurelia cli tool (au ...) for my Aurelia based tasks.
Any pointers on how to achieve this would be great.
I think you're on the right track by customizing the bundle names.
What you can do is manually load both the vendor bundle and the app bundle. That way the app modules are already downloaded and ready to use, instead of letting the vendor bundle try to download it manually.
index.html
<body aurelia-app="main">
<script src="scripts/my-special-vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
<script src="scripts/my-special-app-bundle.js"></script>
</body>
I have tested this and it is working fine for me. I am using this manual loading technique in my own project to allow ASP.Net script versioning to provide cache-busting (see my answer here).
I was reading Angular2 references and found this: tsconfig.json.
I would like to know what the following parameters mean?
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
The tsconfig.json file corresponds to the configuration of the TypeScript compiler (tsc).
These links could give you details about these attributes:
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
http://json.schemastore.org/tsconfig
https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#tsconfig
Here are some hints:
target: the language used for the compiled output
module: the module manager used in the compiled output. system is for SystemJS, commonjs for CommonJS.
moduleResolution: the strategy used to resolve module declaration files (.d.ts files). With the node approach, they are loaded from the node_modules folder like a module (require('module-name'))
sourceMap: generate or not source map files to debug directly your application TypeScript files in the browser,
emitDecoratorMetadata: emit or not design-type metadata for decorated declarations in source,
experimentalDecorators: enables or not experimental support for ES7 decorators,
removeComments: remove comments or not
noImplicitAny: allow or not the use of variables / parameters without types (implicit)
tsconfig.json signifies the directory in which it is kept is the root of TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.
The compiler is expected to execute as per the configurations mentioned:
"target": "es5" => will compile the es6 to es5 so that it is compatible browsers.
"module": "system" => specifies the module code generations (commonjs', 'amd', 'system', 'umd', 'es6' etc)
"moduleResolution": "node" => Determine how modules get resolved
"sourceMap": true => Generates corresponding ‘.map’ file so that it can be used in the production code for debugging.
"removeComments": false => Remove all comments except copy-right header comments beginning with /*!
"noImplicitAny": false => Raise error on expressions and declarations with an implied ‘any’ type.
If the "exclude" property is specified, the compiler includes all TypeScript (*.ts or *.tsx) files in the containing directory and subdirectories except for those files or folders that are excluded.
Already there are lot of answers, but I would like to add one more point as why tsconfig required. As per angular docs
TypeScript is a primary language for Angular application development.
It is a superset of JavaScript with design-time support for type
safety and tooling.
Browsers can't execute TypeScript directly. Typescript must be
"transpiled" into JavaScript using the tsc compiler, which requires
some configuration.
Typically, you add a TypeScript configuration file called tsconfig.json to your project to guide the compiler as it generates JavaScript files.
For more information https://angular.io/guide/typescript-configuration
tsconfig file indicates the project as typescript project and it includes options on how the typescript files to be compiled. For details check the site https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Most of points are covered above. some are missed which i like to highlight.
tsconfig.json will tell where is build code and which version to target.
For instance, when it goes to production it will refer the below key in tsconfig.json and pick the build.
"outDir": "./dist/out-tsc", --> where to locate the build file.
And our browser do not understand typescript so mention which type of js to convert our code which will be understood by browser.
In other words, we write our code in typescript but bring that code to es5, We do that using the below field.
"target": "es2015",
As you know browsers can accept only javascript files, But when you use angular you don't use javascript. Instead you use typescript files .. so now we need a method to change those typescript files to js files.
It's done by tsconfig.json file that specifies the configuration options that we need to do this change . Such as compiler options and the root files .
I have several utility script files that are used by multiple extensions. Thus far, I have been copy/pasting those utility scripts to each extension's root folder whenever I make a change. This is becoming less and less feasible. I would like to reference the same utility script files from both extensions' manifests. I have tried this:
{
"background":
{
"scripts":
[
"../utils.js",
"background.js"
]
}
}
But, I when I reload my extension, I get an Extension error saying:
Could not load extension from 'C:\...'. Could not load background script '../../utils.js'.
If I use backslashes instead (this seems like a more likely solution since I'm working with windows...), I get the same error (but with backslashes).
Is it even possible to achieve this type of relative file path?
How about creating a local server that hosts the JS files you need and then your extension can access those JS file through a localhost port and use their functionality? A simple lightweight server would do the trick (maybe bottle.py in Python).
Chrome v33 tightened up extension security so i'm not sure you can access a file like you tried in your manifest.json
Let me know how you get around this problem!
Have you considered using Shared Modules? According to the documentation you can export common functionality from one extension that can thusly be imported into another extension:
"The export field indicates an extension is a Shared Module that exports its resources:
{
"version": "1.0",
"name": "My Shared Module",
"export": {
// Optional list of extension IDs explicitly allowed to
// import this Shared Module's resources. If no whitelist
// is given, all extensions are allowed to import it.
"whitelist": [
"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
]
}
// Note: no permissions are allowed in Shared Modules
}
The import field is used by extensions and apps to declare that they depend on the resources from particular Shared Modules:
{
"version": "1.0",
"name": "My Importing Extension",
...
"import": [
{"id": "cccccccccccccccccccccccccccccccc"},
{"id": "dddddddddddddddddddddddddddddddd"
"minimum_version": "0.5" // optional
},
]
}
"
(Running ST2 on Win7)
Just looking into ST2 as an ide for WebDev. I've introduced a few packages, but have got a bit lost in the configuration of them! I've a couple of problems.
Firstly I've got ST2 configured to open the browser on file save, but unfortunately it opens all files rather than just .html files. Ideally I'd like it to live refresh if the js is already in use, but in the worst case, just open .html files and ignore .js files
Secondly when it opens a .html file it opens it as a file rather than via SublimeServer which is running. I've followed this link and believe SublimeServer is running on the same port.
Here's the SublimeServer config:
{
"attempts": 5,
"autorun": true,
"interval": 500,
"mimetypes":
{
"": "application/octet-stream",
".c": "text/plain",
".h": "text/plain",
".py": "text/plain"
},
"port": 8000
}
and the proj config
{
"folders":
[
{
"path": "/E/Projects/MyProjects/My.Web/My.Web.App/My.Web.App.Designer"
}
],
"settings":
{
"sublime-view-in-browser":
{
"baseUrl": "http://localhost:8000/",
"basePath": "E:\\Projects\\MyProjects\\My.Web\\My.Web.App\\My.Web.App.Designer"
}
}
}
So where do I need to look in the config to modify this behaviour?
EDIT:
The packages I currently have installed are:
Bracket Highlighter
Browser Refresh
DocBlockr
Emmet
Git
Grunt
JSLint
Nodejs
Package Control
Side Bar
SublimeCodeIntel
SublimeLinter
View in Browser
Web Inspector
(and SublimeServer)
I pretty much got them all from Package Control.
As I newbie, I may need to pair some of these back.
Many thx IA
Simon