Mark a position in eclipse text editor? - javascript

I have two questions:
While editing a source file, it's very convenient to be able to label the current position of cursor and then jump to it later by somehow calling that label. I VIM, there is the marking notion, but I'm not aware of such possibility in Eclipse text editor.
Is there any way in Eclipse to add a portion of the code to the outline window, such that you can easily jump to that part when you click on it? I know that for java source-code, almost all variables and functions are shown there, but what if I have a html/javascript code, in which I'm using jquery functions, and the outline doesn't show these functions.
Any help is appreciated!

I dont have any direct answers for your question.
May be you are looking for the following eclipse features.
Eclipse supports bookmarks, you may use that feature. Also CTRL + Q will go back to the last edited location.
You may be able to get this using the Mylyn, which is packaged along with eclipse by default. Implements the notion of a Task focussed IDE ( RECOMMENDED)

Related

The best extension to enable autocomplete feature when writing JavaScript in Atom

I'm learning Javascript and up until now when I wanted to change anything in the DOM, I was using Google Chrome devtools to do that. Now I'm moving to write my code inside the JavaScript file, that accompanies the webpage, in Atom but the problem is the extremely useful autocomplete features of Chrome devtools is not available in Atom. For example when I type this code:
document.addEventListener('click', function(){
const mainHeading = document.querySelector('h1');
mainHeading.style.backgroundColor = 'red';
})
Chrome devtools is intelligent enough to suggest backgroundColor with a capital C to prevent any typing errors but the same thing doesn't happen in Atom. In fact Atom does not have any suggestions at all. I have tried installing different JavaScript plugins such as atom-ternjs or autocomplete-javascript, to name a few but none is working when you want to write the code to manipulate the DOM. Any suggestions to solve this is greatly appreciated.
Here's a quick solution using Atom Ternjs.
Navigate to the menu bar and click Packages-> Atom Ternjs -> Configure Project.
Here, select the browser option under libs
Then, just scroll down and click on Save and Restart Server.
I hope this helps.
I'm using TabNine extension now and I'm satisfied with the performance. It uses deep learning to learn and predict the variables and lines of code you might want to write based on those variables and the more lines you write in a particular project the better it gets at giving the suggestions.

Visual Studio missing most Javascript editing functions in one solution

I have a bizarre issue where a websites JavaScript files are missing many of the editor functions such as:
handles around code blocks; buttons that allow collapse/expansion
correct line breaks; when pressing enter the cursor goes to the next line but first character position rather than nested per previous line
Keyboard shortcuts missing
Intellisense missing
The dotted line showing the start/end of a nest
and various others.
What I did to get to this:
I have a website in a solution, call it solution A and the JavaScript editing is normal.
This website is going to be moved into a new solution along with other projects.
I created a new empty solution (solution B) and added some solution folders.
I copied the website (via windows exploroer) from solution A to solution B.
Modified the namespace within the csproj file using notepad
Added this website as an existing project to solution B
Performed a find/replace through the code to adjust the namespace to the new one set in D above.
Now when I open my JavaScript files I get none of the functionality listed above.
I have verified that the Text Editor / Javascript/Typescript options are good.
The 2 images below are from copies of the same file in different solutions both running on Visual Studio 2017. The images demonstrate the lack of the collapse/expand button and the dotted lines. Interestingly, all color is correct.
Any ideas what might cause this?
Good JavaScript
Bad JavaScript
After some digging around a colleague found this link talking about a very similar issue - JavaScript intellisense still not working
One of the comments mentioned disabling the 'Language Service' function.
I did this, and sure enough all functionality has returned.
I am not going to mark this as an answer because i've had to disable one thing to cure another. This is just what i have had to do to get JS to edit correctly.
What I am doing right now us updating Visual Studio. It's currently 15.0.26430.4 and 15.4.27004.2002 has just been released. With any luck this resolves the issue.
UPDATE
After updating Visual Studio all is working correctly. Can only assume there was an issue with the Language Service.

Ctrl+Click on a function name in Atom editor and jump into it

I've been trying to think of a better way to title this question, but unfortunately I have no idea how to explain it. Also I haven't found this on stack overflow (for the same reason stated above).
In Eclipse, I used to Ctrl+Click in the name of a method call (in java). And my cursor would jump in to the definition of my method function.
Question 1: Does anyone know the name of this behavior? I mean, maybe it's called function jumping or something like that.
Also I was searching for a plugin like this in Atom editor. Because I've tried to use this a lot of times (bad habits) and didn't work.
Question 2: Name of the plugin to do this in Atom?
Don't know if it helps, but I'm coding in JavaScript at the moment in Atom editor.
As the other answer noted, alt-click over a method/function name can jump you directly to where it was originally defined. It works within the same file, but it doesn't seem to work across files.
The closest Atom editor package I've found for javascript which allows you to jump to function/method definitions across files is called TernJS.
Once installed, you can use ctrl-shift-r over the word (function/method, variable etc) to bring up a list of where that method/function is defined (includes line # & filepath). You can then click on the list item & it will jump you to the definition.
Here is a video I made containing an example of using this atom package.
http://www.youtube.com/watch?v=cFAzqvYoHJs&t=11m58s
To answer your first question this 'behavior' is knows as 'go to definition', or 'jump to definition'.
To answer your second question some packages you could perhaps take a look at would be,
'goto-definition'
'code-peek'
I find these help a bit but still don't achieve the standards that I would fully like. I wanted something similar to the Intellij IDEA ctrl + click.
I find myself using the ctrl + shift + f to search the entire project for the related files of the thing I'm searching for. Then I find the particular file i'm looking for and shazam! I've got what I came to get. This particular method works best for me.
I know its not exactly what your looking for but this is the best thing I've found so far to achieve something similar to what we both seem to be looking for. Hope this helps a bit,
happy coding...
Currently this behavior is blocked by multiple cursors feature.
The closest you can get is "ctrl-alt-shift-d" + atom-ternjs
try atom/navigate
Link to Atom Navigate
It helps you to do this excact thing.
The only thing is that it's default key is f2 instead of cltr+click
But this is also editable in the package settings in de .atom file
I don't think I have a package for that.
Simply ctrl-D goes to definition for me.
Tried by luck after reading here other methods.
Cheers.
In Atom (1.57.0 version, os Ubuntu 18.04) command ctrl+shift+f is doing project-find:show. (try cmd+shift+f if on mac and the above does not work)
First select a function name in a file within a project, click ctrl+shift+f, and a list of files from your project folder, that also have this function (either defined, or used) should appear.
Click on any of these files, to come back to the list use ctrl+tab. I can see in key-bindings that this command project-find:show, is bound to ctrl+shift+f, and I have used it, but I am not sure if this is from one of the packages, or not. (sorry new to atom)

How to enable code assist for the DOM for JavaScript projects in Eclipse

How can I simply get in this little popup (code completion) all possible methods/functions given when I type window.(blablabla).
Because if I type window. there is no "event" method for example.
In NuSphere there are all methods been listed.
Please differentiate between JavaScript and DOM code assist. There are many questions/answers here about this but it's ambiguous which of these two they refer to. None, I've seen, particularly claims to have found a solution for DOM and most mentions Aptana as standalone IDE or Eclipse plugin for solution.
For reasons outside the scope of this question I use Eclipse Indigo (3.7.2) and got this working w/o Aptana. This solution probably depends on the JavaScript Development Tools plugin.
First in the Navigator pane right click the project and hover the Configure option. Select Convert to JavaScript project or Add JavaScript Support.
Open project properties and a JavaScript item should appear in the left hand side list of configuration options. Expand and select Include Path. In the Libraries tab on the right you will see ECMA Script and ECMA 3 Browser Support. Switch to the Global Supertype tab and tick the ECAM 3 Browser Support checkbox. Restart Eclipse.
--
However in my case this last option didn't seem to work (when selected 'window' as global supertype, below the list got 'Window() null') and window. didn't bring results but document. and all other JS globals did. (So I could say for e.g. var w = document.defaultVeiw; and w. did bring up desired list.)

Working with javascript in VIsual Studio

To work with JS files in Visual Studio 2008, I did:
Tools -> Options -> Text Editor -> File Extensions
and added js extension with Script editing experience.
That works pretty much as expected apart from the following things:
Syntax highlighting is set-up extremely slow (after 10 seconds or so) when I open the JS file. The compiling warnings are generated equally slow and they disappear slowly when fixed. Generally, not a big deal, but I wonder why. Until the file is syn highlighted, you can't put in breakpoints.
Intelisense works, but not always. For instance, if I use getElementById to get the element, intelisense with that element doesn't work. I guess it has to do with context, as the compiler can't determine what kind of object is in question. It also doesn't work inside an html page using the script tag, but in this case syn highlighting is immediate.
If there is any better approach?
I am currently opting to use an external editor and to launch it by adding a custom "open with" action on js file. However, I don't like doing this because I can't use the fantastic VS debugging capabilities...
The 3rd party addin Visual Assist X can help with js.

Categories