Why does ESLint throw these errors?

The line of code in question:

userName  
       ? console.log(`Hello, ${userName}`) 
       : console.log("Hello!");

This is the closest I can get to fixing all the errors.
The app works, but what about these errors ? how to fix them ? should I fix them ? are they valid errors ?

Hi there.

Can you post the entire program please? Whilst I wouldn’t personally split the ternary operator over multiple lines like that, I don’t think the JS engine would complain about it…

Please format your code when you post it; check out this post if you’re unsure how to do that. :slight_smile:

// Created by Paul A. Gureghian in April 2020 //
// This JS project app uses the key concept of 'Control Flow' 
// To input a question and output a random fortune. 

// Declare variables 
// Declare a flexible variable for 'userName' 
let userName = "Paul";

// Create a ternary expression for 'userName'
userName  
    ? console.log(`Hello, ${userName}`) 
    : console.log("Hello!");
    
// Declare a felxible variable for 'userQuestion'
let userQuestion = "Will I succeed?";

// Print the user's question input
console.log(`The user ${userName} asked: ${userQuestion}`);

// Generate a random number between 0 and 7
let randomNumber = Math.floor(Math.random() * 8);

// Declare a flexible variable for 'eightBall'
let eightBall = "";

// Create a control flow with the 'switch' statement
switch (randomNumber) {

case 0:
    eightBall = "It is certain";
    break;
case 1: 
    eightBall = "It is decidedly so";
    break;
case 2:
    eightBall = "Reply hazy try again";
    break;
case 3: 
    eightBall = "Cannot predict now";
    break;
case 4: 
    eightBall = "Do not count on it";
    break;
case 5: 
    eightBall = "My sources say no";
    break;
case 6: 
    eightBall = "Outlook not so good";
    break;
case 7:
    eightBall = "Signs point to yes";
    break;                             

}

// Print Magic Eight Ball's answer.
console.log(eightBall);

// End of script //

When I had it on two lines ESLint threw an extra error for that, that’s why I split it as I did.

Why does ESLint throw errors at all for code that seems valid and runs properly ?

Is my ternary expression valid ?
I followed the tutorial and the project video.

1 Like

I would imagine it’s because of how you have ESLint configured.

The job of the linter is to bring programming errors, stylistic issues or other potential flaws in your code to your attention.

The two errors occurring at 10:1, which ESLint lists as no-unused-expressions and no-ternary, and the error at 27:1 - default-case are all “Best Practices” rules in ESLint.

  • Unused expressions can be problematic if they’re removed dynamically at runtime and consequently affect the program logic.
  • Ternary expressions are considered by some to cause less readable code. (Brevity is not always the friend of legibility, after all.)
  • A default: case in a switch statement is often a good idea, in case none of your anticipated cases match the input.

You ought to be able to reconfigure ESLint to either ignore these rules, or refactor your code to avoid triggering them (in the case of the default-case one, at least). :slight_smile:

But the expression is used and the “Introduction to JS” course delves into ternary expressions and uses one in the ‘Magic Eight Ball’ project.

So, ESLint wants the expression written in long form ?
What throws me off is that it flags these things as errors out of the box(config file) instead of making them warnings to begin with. to me, errors are more than likely to break the app and cause it to crash.

I just want something that faults on real, basic, necessary mistakes on JS syntax.

Maybe ESLint is to advanced for me at this point.
I could just use it to see what it says, but I can ignore some of its errors especially if the code works.
Only fix its errors if the code crashes.

To sum it all up, I am not enough of an expert to determine what syntax, code, or style I should use or not, and what rules to enable or disable in ESLint. I want to leave that to the linter I am using to determine fundamental errors that really need fixing because it will crash the app at some point or another.

No, ESLint is simply suggesting that you might have made an error or that you may wish to express those sections of code in another way.

In each case, the “errors” you are receiving from ESLint are not errors in the sense that they will break your program. Rather, they are stylistic issues which some people may consider to be bad form.

In much the same way that there can be several ways to achieve the same outcome, there may be several ways to write a particular sequence of code. You’ll find that there’s often debate as to what is the “correct” way to do certain things. This is why ESLint rules are configurable - if you consider a ternary expression to be perfectly OK, you disable the no-ternary rule.

VSCode doesn’t include a linter for JavaScript by default. I suspect that, as you get more familiar with ESLint, you’ll become comfortable with reconfiguring the rules that you commonly encounter - and which turn out not to be breaking issues, but stylistic “issues”.

You can see in the documentation which rules ESLint considers to be enforcing style guidelines, and which are “breaking” errors. :slight_smile:

All that being said, would you recommend eslint? jshint ? jslint ? or something else ?

I will stay with eslint as long as I am unable to change certain syntax error which are ‘breaking’ errors.

I don’t have a linter installed for JavaScript in VSCode… but then, I don’t do much with JavaScript so I’ve never really needed one.

@midlindner or @janneslohmeijer might have some thoughts, though?

What language(s) do you mainly use ?

Sorry m8, won’t be able to help here. All I know I have learned through codecademy and I haven’t even finished the Web Development Path yet :sweat_smile: .

Happy coding!

1 Like