Can I force WebStorm to ignore certain lines in a Javscript file?

I'm developing with Salesforce, which forces me to put some component tags in my javascript file like: <apex:component>.

This is causing WebStorm to choke on the Javascript file, because it's not valid Javascript. Is there a way I can force the WebStorm compiler to ignore certain lines of my Javascript file so that normal code-hinting/syntax highlighting are available. As it is now, the entire javascript code file has turned a light orange/yellow.

Many thanks-

5 comments

Hi there,

Generally speaking: No (AFAIK).

But it really depends on actual file format. May be it will be possible to do some language injection .. or something (although not sure) -- please show an example of such file (ready to use file).

0

Many thanks. Here's a sample javascript file. I wish there were some way to "comment" out the first 2 lines (and last 2 lines) in such a way that WebStorm just ignored those <html> tags.


<apex:component>
<script>


//-----  Form Tab Functions------------------------------------
$(document).on('click', '.box-header', function (e) {
    //This function toggles the visibility of form sections when you click anywhere in their header
    e.preventDefault();
    var $target = $(this).next('.box-content');
    var $itarget = $(this).children('.box-icon').children().children('.halflings-icon');
    //console.log($itarget.length);
    if ($target.is(':visible')) $($itarget).removeClass('chevron-up').addClass('chevron-down');
    else $($itarget).removeClass('chevron-down').addClass('chevron-up');
    $target.slideToggle();
    return false;
});
$(document).on('click', '.docs-header', function (e) {
    //This function toggles the visibility of form sections when you click anywhere in their header
    e.preventDefault();
    var $target = $(this).siblings('table');
    var $itarget = $(this).children('.box-icon').children().children('.halflings-icon');
    if ($target.is(':visible')) $($itarget).removeClass('chevron-up').addClass('chevron-down');
    else $($itarget).removeClass('chevron-down').addClass('chevron-up');
    $target.slideToggle();
    return false;
});



</script>
</apex:component>

0

Well ... this is what I've managed to make (P.S. I do not have jQuery in this project):

screen01.png

Don't know how convenient/viable this approach is for you .. but it seems to be working in general (better something than nothing).


The idea is:

1) Name such files with .xml extension (or tell IDE to treat such files as XML -- e.g. by assigning some pattern to "Settings | File Types | XML files" -- this will affect ALL projects as this is IDE-wide setting)

2) Inject "JavaScript" language inside <script> tag. For this -- place cursor just after <script>, invoke Alt+Enter and choose correct option

screen02.png
Such manipulation should affect all <script> tags in all projects .. so you may want to make it for this project only by editing such injection rule in "Settings | Language Injections".

Obviously, this is not properly formatted XML file (no proper header, appex:component is unknown to IDE) so IDE will highlight those as errors -- but that's only first and last lines while whole JS code seems to be OK.


My only other idea (which is more complex (requires extra tools to use) but maybe more useful/practical overall):

  1. make those non-js lines commented (in a special unique way, e.g. start line with //TPL: ) .. so you will have just JS code only (e.g. first line will become //TPL:<apex:component> )
  2. when finished -- run your file(s) through some processor/build tool/templating engine etc (using File Watchers plugin for executing such task on Save) .. that will remove such comments (e.g. first line will become <apex:component> once again) and save final file in new location which you can then use for your purposes.
0

Those are two great ideas- thank you very much. I think that will work.

Many, many thanks.

0

You can mix your drinks. Here's one way to do it assuming you are marking *.component files as JavaScript:

<!--//--><apex:component>
(function() {
    var foo = 'bar';
    var herp = 'derp';
}());
<!--//--></apex:component>



Visualforce will evaluate out the XML comments (

) leaving the apex:component tags intact.
WebStorm will evaluate out the JS comments (
//
) preventing the parser choking on the tags.

Screen Shot 2014-08-21 at 01.14.50.png
0

Please sign in to leave a comment.