130

Is there an Eclipse plugin available for JavaScript that allows for syntax checking and autosuggestions for .js files in Eclipse?

Ripon Al Wasim
  • 36,924
  • 42
  • 155
  • 176
TechnoCrat
  • 2,055
  • 4
  • 23
  • 35
  • This is not a duplicate. The other question was closed for not meeting the SO guidelines. It was also only answered with an ad for another plugin. Please remove the duplicate tag as this has a very valuable answer. – Chris Sharp May 30 '22 at 13:13

4 Answers4

290

Complete the following steps in Eclipse to get plugins for JavaScript files:

  1. Open Eclipse -> Go to "Help" -> "Install New Software"
  2. Select the repository for your version of Eclipse. I have Juno so I selected http://download.eclipse.org/releases/juno
  3. Expand "Programming Languages" -> Check the box next to "JavaScript Development Tools"
  4. Click "Next" -> "Next" -> Accept the Terms of the License Agreement -> "Finish"
  5. Wait for the software to install, then restart Eclipse (by clicking "Yes" button at pop up window)
  6. Once Eclipse has restarted, open "Window" -> "Preferences" -> Expand "General" and "Editors" -> Click "File Associations" -> Add ".js" to the "File types:" list, if it is not already there
  7. In the same "File Associations" dialog, click "Add" in the "Associated editors:" section
  8. Select "Internal editors" radio at the top
  9. Select "JavaScript Viewer". Click "OK" -> "OK"

To add JavaScript Perspective: (Optional)
10. Go to "Window" -> "Open Perspective" -> "Other..."
11. Select "JavaScript". Click "OK"

To open .html or .js file with highlighted JavaScript syntax:
12. (Optional) Select JavaScript Perspective
13. Browse and Select .html or .js file in Script Explorer in [JavaScript Perspective] (Or Package Explorer [Java Perspective] Or PyDev Package Explorer [PyDev Perspective] Don't matter.)
14. Right-click on .html or .js file -> "Open With" -> "Other..."
15. Select "Internal editors"
16. Select "Java Script Editor". Click "OK" (see JavaScript syntax is now highlighted )

Ripon Al Wasim
  • 36,924
  • 42
  • 155
  • 176
mask
  • 6,172
  • 3
  • 24
  • 23
  • 3
    What about Eclipse Kepler and Luna. Will it work as well? – Mr. P Aug 27 '14 at 14:35
  • BTW, Install Nodeclipse or Enide Studio 2014 and get "JavaScript Development Tools" automatically. – Paul Verest Oct 21 '14 at 08:29
  • 1
    If there is an error syntax it doesn't advise me. How can I activate this function? Thanks. – Stefano Maglione Nov 03 '14 at 23:55
  • 2
    @Pisek, change the update URL: `http://download.eclipse.org/releases/luna` – haventchecked Jun 22 '15 at 20:55
  • In Eclipse Neon, received "The Class File Viewer cannot handle the given input" error message with large java stack trace beneath it. – JohnC Sep 28 '16 at 17:51
  • Works on Eclipse Mars.2 – jeffery_the_wind Jan 06 '17 at 08:32
  • Works on Eclipse Mars.1 too. – jsanmarb Feb 21 '17 at 19:55
  • http://download.eclipse.org/releases/latest if you just want it for your latest version – Laurent B Mar 12 '19 at 14:55
  • Didn't work for me. After Step 10, I closed and reopened a js file and it is still just black and white. – Matt Aikens Sep 29 '20 at 15:24
  • 1
    I cannot find JavaScript Viewer when associating .js files. Where is it? – Faraz Oct 28 '20 at 16:53
  • 1
    I have no luck getting this to work in Eclipse 2020-12. I wonder has anyone? Filed a question here: https://www.eclipse.org/forums/index.php/m/1837447/#msg_1837447 – Bernd Wechner Jan 30 '21 at 07:13
  • 1
    https://stackoverflow.com/questions/62742955/javascript-file-editing-stopped-working-with-eclipse-2020-06 Refer this solution this would be helpful If you are working with latest versions. – Linidu Praneeth Gunathilaka Feb 16 '21 at 02:31
  • Works up until step #9 for me. When I go to select the "JavaScript Viewer", it is not available.... I am using Eclipse 20220602-1056; (mac M1); and I am downloading Javascript from "2022-06 - https://download.eclipse.org/releases/2022-06/; ". – gymshoe Jun 22 '22 at 01:09
  • In 2022-06 it works as described besides the fact that there is no outline visible only syntax highlighting. The download site is "https://download.eclipse.org/webtools/repository/latest" Look for JavaScript. – M46 Jun 27 '22 at 13:17
5

Think that JavaScriptDevelopmentTools might do it. Although, I have eclipse indigo, and I'm pretty sure it does that kind of thing automatically.

Ben Green
  • 3,953
  • 3
  • 29
  • 49
5

JavaScript that allows for syntax checking

JSHint-Eclipse

and autosuggestions for .js files in Eclipse?

  1. Use JSDoc more as JSDT has nice support for the standard, so you will get more suggestions for your own code.
  2. There is new TernIDE that provide additional hints for .js and AngulatJS .html. Get them together as Anide from http://www.nodeclipse.org/updates/anide/

As Nodeclipse lead, I am always looking for what is available in Eclipse ecosystem. Nodeclipse site has even more links, and I am inviting to collaborate on the JavaScript tools on GitHub

Paul Verest
  • 60,022
  • 51
  • 208
  • 332
2

In 2015 I would go with:

  • For small scripts: The js editor + jsHint plugin
  • For large code bases: TypeScript Eclipse plugin, or a similar transpiled language... I only know that TypeScript works well in Eclipse.

Of course you may want to keep JS for easy project setup and to avoid the transpilation process... there is no ultimate solution.

Or just wait for ECMA6, 7, ... :)

Christophe Roussy
  • 16,299
  • 4
  • 85
  • 85
  • Why would one use a TypeScript plugin to develop JS code? There will be easily the risk of using TypeScript only features then... – a1an Sep 01 '15 at 10:20
  • 1
    If your code base is very large it can help to use a transpiler, some big JavaScript projects switched to something like TypeScript, Closure, CoffeeScript, ... because they help maintain and organize the code base. But of course this does not come for free as you need to install a few things and learn more. – Christophe Roussy Sep 15 '15 at 08:40