IntelliJ Firefox Web Extensions Development - javascript

Am learning how to use the Firefox Web Extensions API, and am using IntelliJ.
Is there a way to get code completion / suggestions for the API?
I followed the steps in the answer below, but there doesn't seem to be a complete one for Firefox.
https://stackoverflow.com/a/25466708/5941389

Firefox WebExtension type stubs were added recently (Nov 2017) under the name firefox-webext-browser. The steps in the answer you linked are now valid (relevant changes in bold):
First time setup
Open the Settings dialog (File > Settings)
Click Languages & Frameworks > Javascript > Libraries
Click Download
Make sure TypeScript community stubs is selected
Select firefox-webext-browser from the list (you can find it quickly by just typing firefox-w)
Click Download and Install
Click OK to close the Settings dialog.
In Subsequent Projects
Open the Settings dialog again (File > Settings)
Click Languages & Frameworks > Javascript > Libraries again
Check #types/firefox-webext-browser
Click OK to close the dialog.

Related

Turning off Eclipse 2020-06 Javascript Validation Notes

Using Eclipse's 2020-06 built in JavaScript editor, I need to disable the JavaScript informational notes on syntax and warnings as displayed with an (i) icon to the left of the line number and with markers to the right of the scroll bar. See links to the two images showing what these look like.
An example of the informational icon
An example of the markers
There are two warnings repeating numerous times:
'aVariableName' is declared but its value is never read.
This constructor function may be converted to a class declaration.
I would rather turn off these two individual messages since they do not apply to the project, but such control does not appear to exist, but they are overly spamming the editor and are interfering with other notifications and informational notes. FYI: I'm needing to follow specific coding conventions for the project and therefore the warnings don't even apply to the project and are just spam.
So I'll just settle for shutting off javascript validation, but the validation will not turn off.
I've tried to disable the project level settings for the javascript validation through the menu option Window, Preferences, Web, HTML Files, Client-side Javascript, Validator, Errors/Warnings: and unchecked both options of Strict Validation of Javascript keywords usage, and Enable JavaScript semantic validation. But making those changes accomplishes nothing since the warnings are still there even after running validation on the project, cleaning the project, and even restarting eclipse.
The specific version of Eclipse is:
Eclipse IDE for Enterprise Java Developers Version 2020-06 (4.16.0)
To try to better explain the need to install Node.js, this is the dialog requested Node.js be installed. The text of the dialog reads: "Missing node.js" "Could not find node.js. This will result in editors missing key features. Please make sure node.js is installed and that your PATH environment variable contains the location to the 'node' executable."
Eclipse's Missing Node.js dialog
Are there any other ways to shut off individual warnings/messages, or the javascript validations? Any help, or constructive suggestions would be very much appreciated. Thanks!
Sorry, the stackoverflow editor won't allow in-lining simple images.
Update: So I have not been able to figure out how to disable the informational notices that are showing up in the JavaScript editor along both the left and right margins. I would still love to find out how to do that. I'm wondering if the issues I'm seeing may have been resolved in the current release of Eclipse? I cannot put my development environments at risk if downgrading is not possible. But some hopeful and important details that I have learned is that the latest release of Eclipse "can" support java 1.8 although it says the minimal version supported is Java 11. And also the latest release is better integrated with Node.js so an external install is no longer required. At this time I cannot risk testing the latest Eclipse release due to possible lockout of the workspaces if eclipse cannot be downgraded. I will make plans to rebuild some of the workspaces on another workstation so it will not impact vital projects if something should go wrong.
I was able to disable these javascript validation notes by changing the following setting.
Eclipse -> Window -> Preferences -> General -> Editors ->Text Editors -> Annotations
find "Infos" in the "Annotation types" and click it
uncheck both the "Vertical Ruler" and "Overview Ruler"
optional - uncheck "Text as "Squiggly Line"
Click Apply and Close
Voila enjoy the less cluttered javascript files

Visual Web Developer Express Javascript Breakpoints not hit

I'm using Visual Web Developer Express 2012 for Web.
I'm facing an issue performing debugging. It says, "this breakpoint will not be hit, no symbols have been loaded for this document" while debugging.
I'm using IE to run my website project and currently using my IE debugger. This is too much of a task and debugging is very difficult this way, because, everytime I close the browser, I lose all the breakpoints set and have to do it again.
I want to debug using the IDE and not the browser debugger.
In IE9 (only one instance): Tools > Internet Options > Advanced tab > In Browsing category > Clear "Disable script debugging" check boxes (both) > restart IE.
In VS 2012: Run the Page Inspector ( when javascript error box opens, click No ! )
Choose from VS menu: DEBUG > Attach to process...
Select your IE instance and click Attach.
Debugging works pretty well, but it's one condition. Don't insert any breakpoints in your code (or clear them before - DEBUG > Delete All Breakpoints). There can cause a lot of problems - from hanging and frozing to entirely crashing your VS.
You can also get some help here: http://msdn.microsoft.com/en-us/library/7seh8d72.aspx
Hope this helps.
I happened to fix this issue of breakpoints not getting hit by doing a clean installation of VSW express 2012. It works well after that.

The breakpoint will not currently be hit. No symbols have been loaded

I am struggling with breakPoint issue in VS 2012 for more than hours. I am from eclipse background, there I never heard about such issues.
Problem :
The breakpoint will not currently be hit. No symbols have been loaded
for this document.
I have placed the break point in click action of Jquery.
I found the issue using the IE script debugging., The file loaded was old file., i.e I have modified a lot, but I can see no changes in the one which is loaded in IE. How to fix the bug
What I have Tried :
I know this question is duplicate, but being a newbie to VS and C#., I could not understand the older answers. For example, in this answer, he told to choose Debug -> Windows -> Modules. But I doesn't have Modules under windows in VS 2012. Also even though I read, I could not understand the explanation.
Also I am quite new to term Assemblies and PDB. Though, I located PDB files as he said. But how to open the .pdb file?
Need :
Could anyone explain me the same answer in easier term (with more explanation).
I found this out by accident with my VS2012 and ASP.NET MVC, maybe it can help somebody. I noticed that breakpoints in javascript that's inline in the *.cshtml file like this won't get hit (note that this file is a cshtml file):
But breakpoints in external *.js files will get hit:
Try to add debugger; key word before $.getJSON
Also make sure if you use IE to un-check the disable script debugging
Internet Options> Advanced tab> Under Browsing.
As I think this issue is related to Javascript debugging not C#
This results for me:
In your web application make sure Silverlight and ASP.NET debugger are enabled.
How to get there?
=> Right click on the Web Application => Properties => Web tab. Under Debuggers section make sure Silverlight and ASP.NET are enabled.
Running Visual Studio 2013 or Visual Studio 2015 RC, I've found that to get a breakpoint to work in a .js file I need two things to be true:
I need to start Visual Studio by right-clicking the VS shortcut and select "Run as administrator". (If right-clicking on the Taskbar icon, select the application shortcut icon from the pop-up menu and right-click on that to get a context menu that includes "Run as administrator".)
I need to set Internet Explorer as the default browser that will be opened for the web debugging session. If I choose Chrome or Firefox, the breakpoint doesn't work for me.
After opening and closing VS, rebooting the PC with all with no chance, this workaround worked for me in VS 2012 ( Ver 11.0.50727.1 RTMREL ):
In Project Property Pages, under Start Options, in Debugger section, only ASP.NET was enabled. As soon as I enabled Native Code and SQL Server, that red circle with plus sign inside, enabled again.
No idea why this worked! No active connection in Server Explorer nor using any native code in the project!
I had the same problem. You can use VS2017 to debug JS code this way.
When you set VS to launch the browser (Chrome in my case), it opens a new Chrome window. I was trying to debug the specific code (different URL from the window that opened) in a new tab. So I had the 'The breakpoint will not currently be hit. Breakpoint set but not yet bound' in VS.
I found out that if I opened the new URL in the original tab it suddenly worked. Seems that VS is tied to that particular tab.
Hope this helps.
These are the particulars of my situation: VS 2017 - Mainly C# code with some embedded HTML/JS which I needed to debug, Chrome (Version 68.0.3440), Windows 10
As this is Javascript code, so you need to use a javascript debugger. Generally internet browsers come with a debugger/inspector menu, which allows you to inspect/debug your javascript easily. Such debuggers come with a lot of useful features such as HTTP request/response inspection, browser session/local storage, etc.
Actually there is "Modules" option, but it's enabled only when you are in debug mode.
You can just press Ctrl+D,M combination when you're in debug.
In few words, PDB is a file that contains all debug information about your assebmly, you can not debug an assembly without this file. Assembly is a file that contains precompiled code for exetuion via CLR.
Could you provide a bit more information about your problem. What kind of application you are trying to debug for example?
Also, if you have located you pdb files made EXACTLY for your assembly, you can load it by right-clicking your assembly in modules window and selecting Load Symbols From > Symbol Path
Try deleting all breakpoints and restarting debugging in Visual Studio.

How do I use WebStorm for Chrome Extension Development?

I just bought WebStorm 5 and so far have been really enjoying its Inspection features. One hitch I've run in to when developing my Chrome extension is that it doesn't recognize the chrome variable:
Is there a way I can add the chrome variable to the Inspector so that it can autocomplete as I type? I'm guessing I would need to add Chromium as an External Library but I'm unsure where to start.
First Time Setup
Open the Settings dialog (File > Settings)
Click Languages & Frameworks > Javascript > Libraries
Click Download
Make sure TypeScript community stubs is selected
Select chrome from the list (you can find it quickly by just typing chrome)
Click Download and Install
Click OK to close the Settings dialog.
Steps 2-6 illustrated below:
In Subsequent Projects
In any subsequent project, you just:
Open the Settings dialog again (File > Settings)
Click Languages & Frameworks > Javascript > Libraries again
Check chrome-DefinitelyTyped
Click OK to close the dialog.
Steps 2-4 shown below:
UPDATE 2:
It's now supported out of the box, see the complete answer below.
UPDATE:
There is a more complete stub file that can be added as a library to get code completion. It's a part of the Closure Compiler project. Download chrome_extensions.js.
See also the feature request for WebStorm to add this library automatically from the IDE.
You need to get the JavaScript library for the Chrome API somewhere, or use a stub to get basic completion.
Library or a stub can be configured in WebStorm.
I found the JSON files with the Extension API. One can write a script that will build JS stubs from these JSON files, the stubs can look like the basic version linked on GitHub above, but with the automatic generation they will contain almost complete API and JSDoc comments so that documentation like here can be viewed directly in the IDE.
JSON => JavaScript object stubs mapping is pretty straightforward in this case and writing this kind of converter should not take more than a day (or several hours for the skilled coder).
If someone goes ahead and implements it, please post the link to the results here.
WebStorm should one day accept json definitions directly to enable autocomplete for the functions defined. Meanwhile, you can use the program at https://github.com/QuickrWorld/jsgen to convert the json files to js to enable auto-complete for the chrome extension APIs.
For writing AppScript, functions and classes such as DriveApp, SpreadsheetApp, there is a plugin in WebStorm or Intellij called google-app-script.
The installation method is the same as above. On the other hand, you should mark or open the .gs file as JavaScript. (July 2017)

Is there a working JSLint Eclipse plug-in?

Can anyone point to a functioning JSLint plug-in for Eclipse?
Use this:
In Eclipse, Install New Software to http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download
I used jslint4java to add jslint to the Eclipse plugin for Android PhoneGap development. If you're not interested in PhoneGap or Android, you can choose only the jslint4java feature in the install wizard
Usage information here.
There is a plugin here and it works ok. (site is down sometime in 2011)
The update site is http://update.rockstarapps.com/site.xml (site down 2012-07-24)
You can also run jslint4java as an external tool:
Download jslint4java
Put jslint4java.jar somewhere
Add an external tool configuration in Eclipse (Run > External Tools > External Tools Configurations > Program > New...):
Location: /usr/bin/java
(or your path to javaw.exe)
Arguments: -jar /path/to/jslint4java.jar ${resource_loc}
Now you can select a js file in the Project Explorer and run jslint4java from the external tools menu.
I think I've found the simplest solution. If you install Aptana Studio, a free Eclipse plug-in, you get among other things, an excellent JavaScript IDE with support for Ext, jQuery and other major libraries.
Using these instructions (copied here in case blogspot is blocked at work), you can easily turn on JSLint support.
You can enable it by doing:
Open Aptana Studio- Go to Window > Preferences
Go to Aptana > Editors > JavaScript > Validation in the left hand menu
Check "JSLint JavaScript Validator"- Hit OK- Go to Window > Show View > Validation
(may need to go to Show View - Other - Aptana Views)
You'll see the Validation on the bottom right of the screen- Now also click Toggle Information and Toggle Warnings (found on the top left corner of the validation pane)
You're all set. JSLint will warn you whilst writing code
You might consider a JsHint Eclipse plugin as an alternative.
From what the project objective reads, JSHint was originally a fork of JsLHint with more option configuration.
Eclipse plugin http://github.eclipsesource.com/jshint-eclipse/
JsHint reference http://www.jshint.com/about/
I do this a different way that integrates nicely with the IDE In eclipse most of this is one time set up and then it becomes quite easy to validate your code after that.
Help -> Install new software
Click the 'Add' button
Name : Rockstar Apps (or whatever you want)
Location : http://update.rockstarapps.com/site.xml
expend the selection and check Rockstar JsLint
Click 'Next'...again
Accept and install
(you'll have to hit okay when it prompts you about installing unsigned content).
Restart Eclipse...
Almost done
Now when you want to validate your javascript right click the file Rockstarapps -> Validate with JsLint...
customize your validation settings and your done. (i usually just choose recommended)
the problems will show up in your problems panel.

Categories