I wonder.. what exactly I should do to make WebStrom (or IntelliJ IDEA) resolve my 'angular' variable.
I follows this guy but that maybe deprecated already.
On my vendor.d.ts:
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/angularjs/angular.d.ts" />
My package json:
{
"name": "angular_ts",
"version": "0.1.0",
"description": "",
"repository": {},
"dependencies": {
"grunt": "~0.4.5",
"grunt-ts": "~3.0.0"
}
}
My issue on that screenshot ('angular' is not resolved.. can not go to definition of it, as a result - multiple implementations of 'module'):
So, what exactly I should do to make 'angular' resolved in .ts file in WebStorm?
UPDATE:
I do not have yet angularjs sources in my project. But one of the options where it redirects me is "node_modules/grunt-ts/tasks/inerfaces.d.ts" file. Even if I exclude 'node_modules' folder from my project.
You have to do a few things to get this to work correctly. I don't know what that tutorial told you to do, but it's not the WebStorm usual way of doing it.
Firstly, you need to make WebStorm ignore all the AngularJS source files in your project. This is why you're getting the multiple implementations warning.
Open your "project" side panel that displays the file tree.
Find where you put your angular.min.js source files, and right click the file.
Select "Mark as Plain Text". WebStorm will now ignore that file from intellisense for JavaScript.
You have to now add AngularJS to your list of External Libraries for that project.
Click "File / Settings"
Expand the "Languages & Frameworks" node
Expand the "JavaScript" node
Select the "Libraries" section.
This is where you install third-party TS files for libraries. Select the "angularjs-DefinitelyTyped" library, but this doesn't come with WebStorm. You have to download and install it.
Click the "Download..." button.
Change the dropdown on the dialog from "Official libraries" to "TypeScrypt community stubs".
Find "angularjs", select it and click "Download and Install".
That's basically what I do. The key is to exclude the JS files in your project that will interfere with intellisense.
When you install external libraries to a WebStorm project via the settings. It doesn't actually add those files to the project. They are only added to the intellisense space used by the IDE.
Ok.
Since I did not have yet angularjs sources (yet) in my project.
And one of the options where it redirects me is "node_modules/grunt-ts/tasks/inerfaces.d.ts" file. Even if I exclude 'node_modules' folder from my project.
My solution is to remove node_modules from the Project Structure -> Libraries there was reference to 'node_modules' (also)..
But it is basically the same principle as Mathew suggested.
(Hope that will not break another stuff in the project)
Related
I'm writing a Chrome extension using React, and more specifically, using Create React App. If I inspect the popup that the extension generates, look at Sources, and click on any of the js files, Chrome says "Source Map detected". If I click on "More", it says that "Associated files should be added to the file tree. You can debug these resolved source files as regular JavaScript files.". But I don't see the source files anywhere in the source tree. What do I need to do to be able to view them?
I've tried to add the source maps to the web_accessible_resources property of manifest.json (as per Do source maps work for Chrome extensions?), but that didn't work. Also tried the changes recommended in the top answer of chrome 72 changes sourcemap behaviour - making some changes to webpack.config.js and manifest.json - but that didn't work either.
Are you working with workspaces?
https://developers.google.com/web/tools/chrome-devtools/workspaces/
BTW, create react app don't generate all the sourceMaps by default.
Could you check the file
node_modules/react-scripts/config/webpack.config.js
Search there for the sourceMap and sourceMaps, and see if that is ok for you.
You can copy that file like "_original", and then set
sourceMaps: true,
in all ocurrences. After that, completely stop the app, and then start it again.
Is that working now?
To verify which sourceMap is working or not, add the sources to workspaces and check for the green dot:
https://developers.google.com/web/tools/chrome-devtools/workspaces/
Visual Studio Code now supports JSX on 0.8 version, but looks like the only way to activate it is with a .jsx file extension. It is not on the list to change the language mode manually, the nearest option is JavaScriptReact, but it doesn't parse the JSX tags.
I'm in a project with a lot of .js files with JSX and I can't change it.
Is there any other way to use JSX syntax without the .jsx extension?
Change your user settings or workspace settings as below:
// Place your settings in this file to overwrite the default settings
{
"files.associations": {
"*.js": "javascriptreact"
}
}
Note: You might need to restart VSCode.
I would feel the below is the easiest way of formatting the code
Click on the bottom right on VS Code Editor where it says Javascript.
You will see an option to Select the language Mode, here you can search for JavaScriptReact and select. That's it. This should solve your problem.
1.
I could do it, but "not React JS files" are also show with JavaScriptReact mode.
open file C:\Program Files (x86)\Microsoft VS Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.json
(probably, need to open with administrator privileges.)
change "jsx" to "js" in array "fileTypes".
restart app, close opened js files, and reopen.
Took me a while to figure this out but – JSX is already part of Emmet – which is part of VS Code. I've told Emmet to also (additionally) make JSX snippets available in regular JS files.
Just put this in your settings file:
"emmet.syntaxProfiles": {
"javascript": "jsx"
}
Although Dionys' answer works there is a better way to do this in more recent versions of Visual Studio Code.
Go to File>Prefrences>Settings and then scroll down and find "Emmet" open the tab and you should see the following text
// Enable Emmet abbreviations in languages that are not supported by default. Add a
mapping here between the language and emmet supported language.
// E.g.: {"vue-html": "html", "javascript": "javascriptreact"}
"emmet.includeLanguages": {},
So just follow the instructions and add "emmet.includeLanguages": { "javascript": "javascriptreact" } on the json at the right panel ( which will overwrite the user settings ).
There is now a VS Code extension that allows .js files to be treated as .jsx files.
Unfortunately the readme for the extension also warns:
when you install this extension you will loose all the existing language support provided for .js files
Fortunately VS Code is now very close to adopting Salsa, which means soon the js-is-jsx issue should be completely resolved.
1-Press F1 (in Visual Studio Code)
2-Type "extension" in the appearing text field
3-Pick "Extensions: Install Extension"
3-Type "ext install jsx"
4- install JS JSX Snippets
5-Restart Visual Studio Code
Click on the bottom right on VS Code Editor where it says Javascript. You will see an option to Select the language Mode, here you can search for JavaScriptReact and select.
That's it.
Just install an extension:
Press F1 (in Visual Studio Code)
Type "extension" in the appearing text field
Pick "Extensions: Install Extension"
Type "ext install jsx"
Restart Visual Studio Code
Source:
https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&ext=jsx
https://marketplace.visualstudio.com/items/TwentyChung.jsx
Try using link on Mac or Linux.
ln -s index.ios.js index.ios.jsx
I opened up angular code in VSCode. At first it didn't recognize angular, so used the light-bulb to add:
/// <reference path="../../typings/angularjs/angular.d.ts"/>
But it still doesn't recognize angular and now I get an error saying that it can't find angular.d.ts.
It looks like the problem was that VSCode failed to download the file and create the directories. I googled angular.d.ts and found it on GitHub - DefinitelyTyped
I created "typings/angularj/" folders and added the file and now intellisense is working for angular :)
You don't need to add anything to your file, VS Code will add angular.d.ts to the typings folder. VSCode doesn't require the /// tag to be included in all your files, you might even confuse the editor doing this.
If you don't see the "typings" folder with the angular intellisense file you will not get intellisense and you need to repeat the light-bulb step.
I have "angular-i18n" installed as a bower dependency.
When I run grunt serve or grunt build I have receive warning:
angular-i18n was not injected in your file. Please go take a look in
"/$APP_ROOT/bower_components/angular-i18n" for the file you need, then
manually include it in your file.
How can I remove this message?
Does making grunt insert this file into my index.html remove this warning?
Background
It appears that your Grunt tasks are using wiredep to look at your Bower dependencies and inject the tags for loading their associated files (link for CSS, script for JS, etc) into your HTML.
wiredep does this by looking at the bower.json file on your project to figure out what you need, then looking in the bower.json file of each dependency to figure out what they need, and so on. Having developed a dependency tree, wiredep uses the main property in the bower.json files to determine what files from each needed package should be linked into your HTML.
When a package does not have an appropriate bower configuration (missing bower.json or missing/improper main property), wiredep warns you about that problem so that you know it couldn't automatically add what you need. In other words, it's telling you that not all assets have been added to your built HTML, and that you need to manually intervene to add what's missing.
General solution
Generally, there is nothing you can do in your own code to correct this. Manually linking the file in your HTML (outside of the wiredep marked areas so as to avoid having it overwritten) will ensure your project works. wiredep, however, will always warn you when it runs because the package itself still has the problem. You'd need to open an issue to the owner of the problem package in order to ask them to correct their packaging meta info.
The project you're having issues with
I searched bower for the angular-i18n package and found that the project is hosted at https://github.com/angular/bower-angular-i18n . If you look at angular-i18n's bower.json you can see that it is missing the main property. This is why the warning is being issued.
As it turns out, though, it seems appropriate that this project does not offer a main property. The documentation for angular-i18n shows that you should bower install it, then manually link to the file that is appropriate for your desired locale. It would not be appropriate for this package to list a main file because it provides many files, none of which should be dictated as necessary by the package--it's a developer choice.
A possible solution for this case
If the warning really bothers you, or you do not like the need to manually link to the file, you could fork this package to your own GitHub account and modify the bower.json file to point main to the file you want loaded. Then you would remove angular-i18n as a dependency for your project, and add your fork's repo as a dependency instead.
Caveats:
This may cause issues keeping up to date if you are unfamiliar with maintaining Git repos/forks.
This will only work if angular-i18n is listed as an explicit dependency of your own project and is not being loaded in as a dependency for another project. If another project is loading this package, you'd have to start forking projects all the way down the tree such that you could override the configuration of each.
All in all, in this case it's probably best to manually link to the file you want and ignore the warning.
I'm getting this error message using angular-i18n in a yeoman project. The wiredep grunt task makes this error message. There are 2 solutions:
1. Exclude angular-i18n and include the file manually in the index.html
Gruntfile.js
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//,
exclude: [
'bower_components/angular-i18n'
]
}
}
index.html
<script src="bower_components/angular-i18n/angular-locale_de-de.js"></script>
or:
2. Override/Set main attribute of bower_components/angular-i18n/bower.json
Gruntfile.js
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//,
overrides: {
'angular-i18n': {
'main': 'angular-locale_de-de.js'
}
}
}
}
I choose to go with the second option overriding the main attribute. This way in the index.html the angular-i18n library still gets automatically injected by the grunt task.
I'm writing my first Chrome packaged app and as per the documentation adding
"content_scripts": [
{
"js": ["app.js"]
}
],
this produces a chrome error that says:
"There were warnings when trying to install this extension:
'content_scripts' is only allowed for extensions and legacy packaged apps, but this is a packaged app."
I have no idea what this means, but more importantly, I don't understand how I am to define the scripts in the js/ folder so that the app actually sees them and loads them.
JavaScript files are in the same directory tree as the rest of the app (the root of that tree contains manifest.json) and they are referenced from SCRIPT tags in the HTML file. In addition, the manifest must have a background.scripts property that references the JavaScript file(s) for the event page. (This property is what makes it an app, as opposed to something else, such as an extension.) The event page is required; HTML associated with windows is optional, only present if you want one or more windows.