Why does a red bar appear in my javascript code when working in sublime

Question

I'm trying to change the text of a label in html to show the file uploaded to the input element that the label points to. I found this javascript code and changed it a little to fit my html. It's not breaking my page but it's not displaying the file name either and I haven't seen this red bar before so I'm wondering if it has something to do with that, or more generally, why the bar is appearing in the first place. Thanks in advance for any tips!

Answer 1

The red section is a syntax highlight telling you that based on the rules laid out in the syntax definition for whatever language or file type you're using, the text that appears here is not valid. This is something that the syntax definition in use provides, so it doesn't appear in all file types (it relies on the syntax author) and will occur no matter what third party packages such as Linters you might have installed.

The line of code that's doing this is:

fileName = e.target.value.split('\').pop();

The syntax highlighting is giving you 3 different hints here as to what's going wrong (and here on SO the syntax highlighting is providing similar clues):

1. The end of the line is the obnoxious red color; that indicates that this part of the line (everything after the actual text) is somehow broken
2. Prior to the red text, the text ).pop(); is yellow, which indicates that it's a string, but it doesn't look like it should be a string at all (technically, you can see that it's the same color as the string in the line above but not the same color as the other function calls like split())
3. The \' sequence is purple, which indicates that this is being interpreted as a character escape (here we can see that the color of that text is different from what we would expect the content of a string to look like).

Taken all together, the \' doesn't end the string in the argument to split() like you think it does; the string constant continues past there to the end of the line, and since the end of the line is reached without the string being closed, that line is broken.

So, you need to fix the split() call argument to be a valid string. Probably you meant it to be either '\\' (you want to split the string at backslashes) or '\'' (you want to split the string at single quotes).

Answer 2

If you are using Sublime build 4169, go to View->Syntax->Javascript and check 'JSX', to remove the red bar.