Sublime Text - Version 3.0, Build 3143
I deal with a lot of php files that contain HTML, CSS and JavaScript. The only problem I've found so far is when I'm looking at script tags in a PHP file. The syntax is set to PHP but comments outside of JS functions break the rest of the code below it (it looks like it's trying to detect regex?)
When I move the // test comment into the function then all is well:
I'm curious to know where the problem exists and maybe find a fix.
Color Scheme doesn't affect the syntax highlighting (it still breaks in other color schemes)
Adding type="text/javascript" to the script tag doesn't fix anything
My finger points to the PHP syntax highlighting ... but if that's the case, how can this be fixed?
Fresh install of Build 3143(Windows), opened as "PHP" and everything works. It can be caused by some custom settings you made or third party plugin.
Related
I have the latest version of Visual Studio Code (1.75.1). Am using "Solarized Dark" color theme.
I have an html file, with React Javascript code inside tags.
If I leave the language selection as "HTML" it doesn't color anything inside the script tags:
If I use "JavaScript React" or "Babel Javascript" as the language mode I get error highlights that are not errors, and intellisense doesn't work that well:
I tried changing the theme to Dark+ and it didn't make a difference either.
Why does this happen?
It's because you set the type attribute in your script tag to "text/jsx" (nothing inherently wrong with that).
Currently (at the time of the writing, v1.75), VS Code only supports JavaScript intellisense for script tags with either no type attribute, or type="module", type="text/javascript", or type="application/javascript" or similar.
type="text/jsx" is not currently supported.
There have been two issues about this reported on the VS Code GitHub repo: Syntax highlighting doesn't work with "text/jsx" script tags #150171 and Syntax highlighting for text/jsx #145992. In both, the a repo maintainer comented that the correct place to report the issue is at https://github.com/textmate/html.tmbundle/issues, which has been done now: Syntax for text/jsx inside HTML #119. Note: Please consider not commenting "me too" in the comments there. I can't speak for that repo's maintainers, but for many project maintainers, such comments tend to come off as annoying unless the commentor actually also volunteers to help out. You can just give a thumbs up reaction if you don't want to expend effort in helping implement the feature.
For your skill-in-googling learning, here's the google search query I made to find those: vscode issues html script jsx
Related: How can I enable IntelliSense for JavaScript inside HTML?
I'm working on a drupal module (irrelevant) and I'd like to recreate a javascript/jQuery event. If I use chrome and go to event listeners I see the jQuery script is called on line 57, however this doesn't really help as:
The script is minified and unreadable
I'd like to know what line of
the jQuery using scripts called the event (what selector and what
body of it's function), not the jQuery script itself
It's not easy to find the file by just
searching for fit selectors as there are 100's of loaded javascripts
files thanks to drupal and it's installed modules.
The reason is that I'd like to recreate this (ajax probably) call:
So does anyone know of a trick like a chrome plugin or something? It could shave a lot of time for me.
If you are setting a correct breakpoint then you should be getting a Call Stack on the Source Tab, on the right hand side. There you should be able to track down the file which initiated the call.
And as they say, a picture speaks a thousand words..
And to further elaborate on your question,
It is always advisable to use an uncompressed jQuery.js (Or for that matter any .js) during the development, as you might have already figured out.
Steps for someone new.
Inside the compressed file just get the version no.
Download the respective uncompressed version of the jquery from the official website.
If you don't want to change the code just rename the uncompressed file to jQuery.min.js or whatever is currently being loaded, so It will work as a drop in replacement.
Try chrome devtools, for example:
Sources -> Event Listener Breakpoints (to the right) -> Mouse -> click
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))
I can't get Netbeans to auto-complete my selectors for JQuery, example:
<a id="hello" href="#">Hello</a>
<script type="text/javascript">
$("|").hide();
</script>
As far as i understand the documentation at this point it should show the tags available on the page when i press control+space at the | position, but instead displays no suggestions. Links [1] and [2] shows clearly that this has been implemented. I have not tried prototype, link [2] shows that JQuery support has been added as well.
The auto-complete of functions works perfectly, with the embedded library of JQuery 1.4.2, it is only the selector auto-complete that does not work. Any suggestions?
[1] http://wiki.netbeans.org/JavaScript#Embedded_Completion
[2] http://wiki.netbeans.org/JavaScript#Recently_Added
Product Version: NetBeans IDE 6.8 (Build 200912041610)
Java: 1.6.0_18; Java HotSpot(TM) Client VM 16.0-b13
System: Windows XP version 5.1 running on x86; Cp1252; en_US (nb)
5 years later update:
As of at least version 8.0.2 Netbeans now properly auto-completes jQuery selectors in both php and html pages. I am unsure if this is due to some other changes on the editor engine or they finally caught the discrepancy but either way it works now, yay!
Naor answer made me rethink what I was doing, but it didn't quite answer my question. So let me provide the solution I found in case anyone is interested.
When working with netbeans, the auto-complete function behaves differently between php files and html. In html jquery selectors auto-completes as expected. But when trying to do the same within a php file in an html section of code, it will fail to auto-complete.
Just make sure that if you are expecting this feature to work, that you are using html files, not php. I will submit this as a feature/bug to the netbeans guys, hopefully they can fix it and make html/js auto-completion available to all file types that can include html/js code.
Link 1 says that there is code completion on element ids that appear in the html itself. They also say that it works with Prototype.js. I believe that it would work for jquery too, but don't forget - in order to select an element using it id in jquery you do $('#id') - with #.
What they meant in their example if you have $("f|") is that if you start writing $("f and the cursor of typing is after the f (they put "|" in order to mark the cursor), then code completion should show all relevant elements.
Try that:
in html: <div id="blabla">12345</div>
in jscript: $('bl');
after the bl press control+space, and I believe that it will display to you blabla.
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.