Has anyone else found VIM's syntax highlighting of Javascript sub-optimal? I'm finding that sometimes I need to scroll around in order to get the syntax highlighting adjusted, as sometimes it mysteriously drops all highlighting.
Are there any work-arounds or ways to fix this? I'm using vim 7.1.
You might like to try this improved Javascript syntax highlighter rather than the one that ships with VIMRUNTIME.
Well, I've modified Yi Zhao's Javascript Syntax, and added Ajax Keywords support, also highlight DOM Methods and others.
Here it is, it is far from being perfect as I'm still new to Vim, but so far it has work for me. My Javascript Syntax. If you can fix, add features, please do.
UPDATE: I forgot these syntax highlights are only shown if you included them in your own colorscheme, as I did in my Nazca colorscheme. I'll test if I could add these line into my modified syntax file.
Follow the new version of the javascript syntax file in github, for it is no longer required to modify your current colorscheme.
Syntax coloring synchronization probably needs adjustment. I've found in certain contexts that I need to change it.
Syntax synchronization (":help syn-sync") controls how vim keeps track of and refreshes its parse of the code for coloring, so that it can start drawing anywhere in the file.
The defaults don't always work for me, so sometimes I find myself issuing
:syn sync fromstart
I suggest reading through the documentation under
:help syn-sync
or just check
:help syntax
and find the section on synchronization.
to make an informed decision among the four available basic options.
I maintain mappings to function keys to switch between "fromstart" and "ccomment" modes and for just clearing the sync settings.
This is a really old post, but I was experiencing the same thing: sometimes syntax highlight would just stop working when looking at the javascript section in an .html file. As the OP mentions, a quick workaround was to scroll up and then magically things would start highlighting again.
Today I found the underlying problem and a good solution. In Vim, syntax highlighting uses a context to derive the correct highlight, where context is defined by the previous lines. It is possible to specify how many lines before the current line are used by issuing :syntax sync minlines=200. In this case, it will use up to 200 previous lines as context. It is possible to use the whole file (which can be slow for long files) by running :syntax sync fromstart.
Once I found that, I added this line to my .vimrc:
autocmd BufEnter *.html :syntax sync fromstart
By doing so, .html files will use the whole file as context. Thus, the javascript section will always by highlighted properly, regardless of how long the JS section is. Hope this helps someone else out there!
For a quick and dirty fix, sometimes I just scroll up and down and the highlighting readjusts. Ctrl+L for a screen redraw can also fix it.
Related
The problem: when you work on a big project, or on many of them, and one of the tests fails for some reason, you can see which feature fails, but it is hard to recall where the implementation was.
So imagine, links in each test case to its implementation can make life easier. Is there any way (if JSDoc/TSdoc does not have it, maybe there is some IDE extension or library or convention) for this?
There are some desired behavior also:
A link to the line is impractical because you know, code changes, lines' contents do as well. So there should be some anchors on both ends, like in HTML.
A link to the class or even to the method is also not always can point to the exact implementation.
A link should be of course clickable in IDE, otherwise its' usefullness is near to zero
I know the question was posted 234 days ago but the following answer might help some of who got here.
If I understood your question properly, what you're looking for is what most IDEs and editors do (at least what JetBrains IDEs, Sublime Text and VSCode can do), in other words: having the possibility to navigate to the implementation of a function/method/class/... (which can normally be achieved by right-clicking on it and then selecting the relevant option).
So on VSCode, you'll need to click on "Go to Definition" (or press F12) after you right-clicked the relevant function/method call.
On JetBrains IDEs, if I recall correctly, the context menu option is called "Go to Implementation".
Note: This usually only works if you have documentation written for the relevant code.
As for having this on tests, It may be possible depending on the testing tool you use.
In regards to jest (and I think mocha as well), you can see (a part of) the JSDoc doclet where a failure occurred; bar in mind that won't show you the doclet of the underlying functions/methods.
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.
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)
Hopefully the title is clear. I'm talking about the large image comparison slider on the homepage of JpegMini.
I've managed to identify it as needing three core files (written as they are named on the site):
jquery.min.js
jquery-ui-1.8.14.min.js
scripts-0135.min.js
It's this last one I'm unable to find any information about so it may hold the secrets but I don't know.
Anyone got any ideas?
The .imagePairs elements have a mousemove event bound:
$('.imagePairs').data('events').mousemove[0].handler
is a function.
The code is apparent inside scripts-0135.min.js, but it is minified.
What you can do is parsing it through jsbeautifier and see if you can make something out of it. It will still have variable names which make no sense, so it will not be easy.
Looking at the code, it seems like they initialize it with $('.imagePairs').myBeforeAfter, which is most probably the function that handles the effect.
I never was able to determine the script used, in the end I searched the web and found a suitable alternative which came with good documentation. http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/
I have started the painful first steps of using emacs to edit an HTML file with both HTML tags and javascript content. I have installed nxhtml and tried using it - i.e set up to use nxhtml-mumamo-mode for .html files. But I am not loving it. When I am editing the Javascript portion of the code the tab indents do not behave as they do when editing C/C++ code. It starts putting tabs within the line and if you try and hit tab in the white space preceding a line it inserts the tab rather than re-tabifying the line.
Another aspect that I don't like is that it doesn't do syntax colouring like the usual C/C++ modes do. I much prefer the behaviour of the default java-mode when editing HTML files but that doesn't play nicely with the HTML code. :-(
1) Is there a better mode for editing HTML files with Javascript portions?
2) Is there a way to get nxhtml to use the default java-mode for the javascript portions?
Regards,
M
Another solution is multi-web-mode:
https://github.com/fgallina/multi-web-mode
which may be more easily configurable than the already mentioned multi-mode.
You just configure your preferred modes in your .emacs file like this:
(require 'multi-web-mode)
(setq mweb-default-major-mode 'html-mode)
(setq mweb-tags
'((php-mode "<\\?php\\|<\\? \\|<\\?=" "\\?>")
(js-mode "<script[^>]*>" "</script>")
(css-mode "<style[^>]*>" "</style>")))
(setq mweb-filename-extensions '("php" "htm" "html" "ctp" "phtml" "php4" "php5"))
(multi-web-global-mode 1)
More on Emacs's multiple multiple modes (sigh) here:
http://www.emacswiki.org/emacs/MultipleModes
UPDATE: simplified the regexps to detect JavaScript or CSS areas to make them work with HTML5 -- no need for super-precise and fragile regular expressions.
I have written the major mode web-mode.el for this kind of usage : editing HTML templates that embed JS, CSS, Java (JSP), PHP. You can download it on http://web-mode.org
Web-mode.el does syntax highlighting and indentation according to the type of the block.
Installation is simple :
(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html$" . web-mode))
Great question. Look how many upvotes you got on your first one!
Everyone has the same experience as you. Me too.
Rather than rely on nhtml-mode which exhibited the same sort of strangeness for me as you described, I looked for another option and found multi-mode.el . It's a sort of general-purpose multi-mode skeleton. To use it, you need to specify regular expressions to describe where one mode starts and another one ends. So, you look for <script...> to start a javascript block, and <style...> to start a css block. Then you plug in your own modes for each block - if you like espresso for javascript, use it. And so on for the other regexes that identify other blocks.
In practice, as you navigate through the document, a different mode is enabled for each block.
I used multi-mode to produce an ASP.NET, that allows me to edit C#, HTML, CSS, and Javascript in a single file, with the proper highlighting and fontification depending on where the cursor is in the buffer. It isn't perfect but I found it to be a marked improvement on the existing possibilities. In fact this may be what you want. Try it out.
https://code.google.com/p/csharpmode/source/browse/trunk/aspx-mode.el?r=14
Not really a good solution but a quick fix if you really need to have javascript in your html is to select the region containing javascript and use the command narrow-to-region(C-x n n) and then switch to your preferred javascript mode. The command widen brings you back, (C-x n w).
It sounds like you've setup your nxhtml incorrectly. The only setup necessary should be loading the autostart.el file, and then everything should work to some level. nxhtml isn't perfect in any way, but my experiences from using it for html/css/javascript/mako is pretty good, at least for everything but mako. But I'm pretty sure I've screwed up with the mako-part.
This is how I initialize my nxhtml:
(when (load "autostart.el" t)
(setq nxhtml-skip-welcome t
mumamo-chunk-coloring 'submode-colored
indent-region-mode t
rng-nxml-auto-validate-flag nil))