I have Eclipse with PyDev and JavaScript Development Tools (JSDT).
I'm using this environment to develop web applications.
Python, HTML, and CSS editors all work fine: highlighting and auto completion works.
JavaScript highlighting works too, but JavaScript auto completion does not work.
Switching to the JavaScript perspective doesn't help.
However, if I create a separate JavaScript Project (rather than adding JavaScript files into my PyDev project), JavaScript auto completion seems to work properly.
Additional Details
When I create a JavaScript Project, Eclipse adds certain JavaScript Resources to the project by default. For example, ECMAScript Built-In Library and ECMA 3 Browser Support Library. These are visible in the Script Explorer window, as well as under Project Properties -> JavaScript -> Libraries.
The problem is, I don't have a Project Properties -> JavaScript option when in a PyDev Project.
Question: What do I need to do (e.g. config wise) to get JavaScript auto completion in Eclipse, when NOT in a JavaScript Project (i.e. when in a PyDev Project)?
Is it possible to add a JavaScript perspective/(I'm not sure what call this exactly...) to a PyDev Project in Eclipse?
I'm very new (2 days) to JavaScript development, so preemptive apologies if the problem/solution is trivial!
To add JavaScript to an existing project convert it to a 'Faceted Project' type and then add the JavaScript facet; to do so go 'Project' > 'Properties'.
You should create a javascript project first and then make it a PyDev project (right click it > PyDev > Set as PyDev project).
Also, if you're starting out, you may want to check Aptana Studio 3: http://aptana.org/ (it's set of Eclipse plugins that has the whole toolchain for web development, with editors for javascript, html, css as well as PyDev preinstalled) -- note that you can check it by just downloading the standalone version and pointing to an existing workspace.
To add JavaScript to an existing PyDev project (Daniel Sokolowski's answer doesn't work for PyDev in Eclipse Neon. Facets are only available for J2EE projects -- See eclipse's documentation on project facets):
Close out eclipse.
Browse to your project folder and open the .project file with a text editor.
Add the following to the <natures> tag next to the pydev natures: <nature>org.eclipse.wst.jsdt.core.jsNature</nature>
Save and reopen your project.
I could then go into Project > Properties > JavaScript > Include Path and add libraries to use for auto-completion. Both auto-completion and the JavaScript Editor save actions worked from the PyDev perspective.
This was in Eclipse Neon.
Related
I am using ubuntu 15.10 and used ubuntu software center for netbean's installation. So, here is the list of not working functionality which I noticed.
In html files, it show red color when select tags, no code folding, enter button is not working for lines and no code completion.
In Javascript files, it show plain-text only.
In Php files, only code folding is not working.
I know how to disable or enable syntax. I have also answered a question here.
I think it is because a plugin is not installed. If so, I really don't know which plugins I should install for php developement.
EDIT
One more thing I want to show you my installed plugins are shown in the below image
Please help me with Answers/Suggestions. Thanks in Advance.
Netbeans was primarily developed as Java programming IDE. So all functionality for programming languages other than Java is not hardcoded into Netbeans internal functionality but can be ensured by external plugins.
It seems that Ubuntu software center contains general Netbeans bundle that can work with Java but lacks PHP plugins (and perhaps highlights some PHP syntax because of its similarity to Java syntax).
You can find out what plugins you need and install them, but more convenient solution is to download and install from official site PHP Netbeans bundle which includes all functionality for PHP Web-development including PHP, HTML and JavaScript syntax highlightning and code folding.
Got a few issues setting up a project to do the full Java, Angular.js, TDD/BDD stack. So far these issues aren't a blocker, but they might turn into one.
I'm using Eclipse 4.6.0 Neon with the WTP, JSDT and Angular plugins.
The 2 red flags that I see waving at the moment are:
in the "Javascript Resources" folder, Eclipse is showing an "ECMA 3 browser support library". This should be ECMAscript 5 surely? (If not 6!) Since Neon just came out, it's a bit of surprise that I can't even change it as I can change the Java version for instance in the project facets dialog.
the HTML and CSS files are buried in src/main/webapp. I shouldn't have to do 3 clicks to get to them, they should be as easy to click to as the Java or JS files. How come there's no "Web Resources" to match the "Java Resources" and "Javascript Resources" in my project in the Project Explorer view?
Like I said at this point neither of these /seem/ to matter but I'd hate to waste loads of time on a problem in the future and find out I should have set up my project differently. I'm also quite happy to hear that this is impossible and I should split the technologies out into separate projects, like one for just web services and one for JS. To follow that train of thought to its conclusion, I'm also happy to hear that I should ditch Eclipse and go back to the command line.
Update 2016-08-01
The Eclipse project went into a nose-dive, locked into some never-ending process which I couldn't stop and couldn't identify after I created a bower.json project file.
I will separate the Java and JS into separate projects and take it from there. There is no need to keep them together except the benefit of having only one deployable artifact not 2, and right now that doesn't seem like such a big deal.
Answer for 2nd item [src/main/webapp requiring 3 clicks to drill down into (unlike the Java files)]:
You should be able to right-click on the /webapp/ folder, then select "Build Path" > "Use as Source Folder", and it will then be displayed at the same level as the Java (src/main/java) folder is, enabling you to drill into it with one click.
Here is how it looks in Eclipse's 'Package Explorer':
I found it easier to set up the Javascript / Angular.js, HTML and CSS in a separate project in Eclipse because the Eclipse project config probably went up the creek as I continually bashed away at it.
This means there have to be 2 deployable artifacts but at this point that's acceptable. When it comes to production and definitely if it becomes easier as the Eclipse JS tooling matures, I will recombine then into one project.
All the google top-ranking JS / Angular HOWTOs out there on the net assume no java or maven at all will come into it, but I have a variety of use-cases where I want the HTML in JSP files rather than as static files, so I created a project as Javascript, Java and Maven.
Also, there is an awesome looking Maven plugin frontend-maven-plugin
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.0</version>
</plugin>
which is, quote:
Maven-node-grunt-gulp-npm-node-plugin to end all maven-node-grunt-gulp-npm-plugins.
So this will take care of the continuous integration of browserify and grunt or gulp tasks.
It's easy to split out the HTML and CSS resources and put them into the WebContent directory that is automatically created for an Eclipse Dynamic Web Module. That makes them reachable with one click of the mouse in the folder tree (compared to 3 clicks in src/main/webapp).
In fact using the maven-war-plugin it is simple enough to tell Eclipse where to assemble the various parts from:
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.6</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<warSourceDirectory>${project.basedir}/WebContent</warSourceDirectory>
<webResources>
<webResource>
<directory>${project.basedir}/src/main/javascript</directory>
</webResource>
</webResources>
</configuration>
</plugin>
To bring in ECMAScript 5 or 6 support, I installed the Tern Eclipse plugin which doesn't quite take over the project configuration since Eclipse still shows the ECMA 3 Browser library in its properties dialog, but it provides code completion and validation.
Apparently this whole thing is easier with IntelliJ but hopefully this was the last big session on the Eclipse project config that I'll need to do for a while, so I won't be going there just yet. No idea about Netbeans.
Update 2016-09-23:
The Eclipse project configuration isn't very stable. At first the Angular plugin couldn't find my Angular code and flagged up errors in the HTML unless the Javascript is in the same directory or subdirectory where the HTML is. I discovered that these errors just disappeared after I recreated the Eclipse project from scratch.
The default validations carried out by Eclipse are also not good. They check everything in node_modules and bower_components unless turned off or reconfigured with a filter to exclude those directories (there are over 25 separate validation configurations to do).
Also, the Javascript outline view breaks when it tries to scan in the code in 3rd party libraries like angular.min.js or d3.min.js - there is a release 4.6.1 due at the end of September this year 2016 with a fix for this.
I have installed webstorm and trying to create a simple angular js program.
I have created an empty project in webstorm, then added the angular.js file in libs directory. Then when I try to write code for angular js the auto completion is not working.
Here is the screenshot of the issue.
Please help me how to create angular js programs in webstorm?
Update:
Now I have added Angular JS as a dependency by following the steps Installing AngularJS Manually in JetBrains Doc. Also removed the angular js file from my project which was present as part of my 1st image in this post.
Even then I am not able to see the auto-completion working. I have verified that the angular js plugin is enabled in my webstorm. Please let me know what could be the issue?
Update:
I have plugin for Angular JS already enabled in my webstorm, please check below image:
Not really an answer (have you saved your HTML, why not put your JS code into external files)... but why not create a project with a generator using Yeoman - http://yeoman.io/ That will give you a better app structure, build tools, package managers, unit tests... and your IDE should be better equipped for this.
This may help too: http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/
There is a AngularJs plugin for Webstorm. This will give you autocomletion in html files. See this tutorial how to install it:
youtube tutorial
There is even a documentation page form JetBrains which explains how to creat a AngularJs Project:
JetBrains Doc
Found in WebStorm doc
Configure AngularJS as a WebStorm JavaScript library, to let WebStorm recognize AngularJS-specific structures and provide full coding assistance:
Open the Settings dialog box, and click JavaScript Libraries.
In the Libraries area, click the Add button.
In the New Library dialog box that opens, specify the name of the library.
Click the Add button add next to the list of library files and choose Attach Files or Attach Directory on the context menu, depending of whether you need separate files or an entire folder.
Select the Angular.js or Angular.min.js, or an entire directory in the dialog box that opens. WebStorm returns to the New Library dialog box where the Name read-only field shows the name of the selected files or folder.
In the Type field, specify which version you have downloaded and are going to add.
If you added Angular.js, choose Debug. This version is helpful in the development environment, especially for debugging.
If you added the minified Angular.min.js, choose Release. This version is helpful in the production environment because the file size is significantly smaller.
Or check out this blog post
I am new to creating plugins. I want to create an eclipse plugin for a new scripting language. And, its syntax is quite similar to JavaScript. So, I wish to extend existing Javascript plugin that exists in eclipse.
Please suggest how do I go about it. Mainly, I want to have editor functionality (syntax checking, auto completion and ctrl-click to go to hop across functions), no compiler/build is needed.
Also, where do I find the source code for existing JavaScript plugin.
The source of the JavaScript editor can be found in the http://download.eclipse.org/webtools/repository/kepler/ repository (assuming Eclipse Kepler). Look for the JavaScript Development Tools SDK.
You install this in to Eclipse using Help > Install New Software and the source is then available to read using Navigate > Open Type (you need to have Include all plug-ins from target in Java search selected in Preferences > Plug-in Development for this).
Eclipse editor code is very complex and it likely to be hard work to adapt it. You might find it easier to use something like Eclipse xText which is designed for developing support for new languages.
Does anyone know what is being used in this article (Building an HTML5 App with ASP.NET by Stephen Walther) to compress the javascript files?
About 1/2 way down in the blog entry, he says: "All of the custom JavaScript files are combined and minified automatically whenever the application is built with Visual Studio."
However, I've never heard of that being built into Visual Studio.
What is being used to do this?
Upon further investigation, it appears that his sample project included a custom project that uses the Microsoft.Ajax.Utilities.Minifier.