eslint indent - incorrect spacing identified in multiline ternary operation

Below is a snippet of my code, where eslint indent lints my multiline ternary expression:

https://i.sstatic.net/tGFShAyf.png

This is the error I am encountering:

Expected indentation of 8 spaces but found 16. eslint(indent)

Despite specifying 4 spaces per indent, eslint is expecting only 2. I had a similar issue with Switch Case previously, which was resolved by editing the .eslintrc.json. However, this time, I haven't been able to find a solution like that.

My .eslintrc.json:

{
  "env": { "browser": true, "node": true },
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": { "ecmaVersion": 2020 },
  "extends": [""eslint:recommended", "e;"plugin:@typescript-eslint/recommended"&, "plugin:prettier/recommended"],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/member-ordering": "error",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-use-before-define": ["error", { "functions": false }],
    "@typescript-eslint/no-var-requires": "off",
    "indent": ["error", 4, {"SwitchCase": 1}],
    "prettier/prettier": ["error", { "endOfLine": "auto" }]
  }
}

I am seeking guidance on how to resolve this linting error.

Answer №1

After some troubleshooting, I finally found the solution:

"indent": ["error", 4, {"SwitchCase": 1, "offsetTernaryExpressions": 1}]

It turns out that the key to resolving the issue lies in the "offsetTernaryExpressions" section. Just a friendly reminder - make sure to restart the eslint server after making any changes! I made the mistake of not doing so initially, which caused the updates to not take effect and the error to persist.

In vsCode, you can restart the ESLint server by opening the command palette using Ctrl + Shift + P, then selecting ESLint: Restart ESLint Server

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JQuery to load elements and applying Select2 functionality

I'm currently utilizing select2 in a project, and it's functioning properly by initializing the select2 using: $(function() { $(".elegible").select2(); }); The problem arises when I attempt to apply the function to elements loaded through jQ ...

Exploring the dichotomy between controlled and uncontrolled elements within React. The _class attribute causing unexpected changes in an un

I created a custom Checkbox component that is essentially a styled checkbox with a 'fake element' acting as the original one. Custom Checkbox Component import React, {Component} from 'react'; import FormGroup from 'react-bootstra ...

Issues that could arise with a chat app

I am in the process of developing a website that will feature both personal and group chat capabilities, similar to those found on platforms like Facebook. Before I begin coding, I have a few questions that I would like to address. My current plan is to b ...

Cutting down expenses on Google App Engine

Our Javascript code is being delivered to millions of browsers daily. To manage this high volume, we opted for Google App Engine. One unique aspect of our Javascript code is that it varies slightly depending on the company using our service. Currently, w ...

Can you please advise on excluding the entire module in Eslint without encountering any errors?

When I have the following listed in my .eslintignore file: **/*.ts I encounter this issue: Error: All files matched by '.' are ignored. Is there a way to suppress this error? My intention is simply to deactivate eslint for a specific submodule. ...

Sending a file using Angular's HttpClient via a POST request with FormData

I am currently working on an Angular 7 project where I am trying to upload an image file along with other form data to a backend using Apache PHP. When I use the HttpClient to send a POST request with just the image alone, everything works smoothly. // Th ...

Ways to retrieve and store basic information or a variable within a session (Solid Beginning)

After experimenting with setting the username and then accessing it in a session on the client side, I encountered an unexpected error. Here's the code snippet that caused the issue: import { useSession } from "vinxi/http"; function getSess ...

Conceal an absolutely positioned element outside its relatively positioned parent

I have a relative position parent element, <div style="position:relative" id="a"> and within that div, I'm creating some absolute positioned elements using jQuery, <div style="position:absolute;right:0" id="b"> These elements are anima ...

What could be causing my page to refresh when I submit a form?

Even though the form is functioning, I am completely perplexed by why the ajax feature refuses to cooperate. I stumbled upon this code from various sources mentioned above, and I anticipate someone will direct me back to them. However, being quite inexper ...

Listen for changes in the div height in Angular 2 using HostListener

After spending hours researching Event Listeners in Angular 2, it's clear that there is a lack of comprehensive documentation on the topic. My goal is to set the height of various div groups (generated using ngFor) to match the height of the tallest ...

Change in ReactJS URLs without causing the entire page to refresh when using BrowserRouter

After conducting extensive research and struggling for a solution for quite some time, it appears that I am facing an issue with my ReactJS project. As a beginner in ReactJS, I have developed a game (a quiz) with multiple levels where the component remains ...

encountering a problem with permissions while attempting to update npm

Has anyone encountered a permission error with npm when trying to update to the latest version? I recently tried updating npm and received this error message. I'm unsure of how to resolve it. Any suggestions? marshalls-MacBook-Air:Desktop marshall$ n ...

AngularJS is throwing an error because the current.$$route object is not defined

Having worked with AngularJS, I encountered an error when trying to set a title. Here is my App.js 'use strict'; var serviceBase = 'http://www.yiiangular.dev/' var spaApp = angular.module('spaApp', [ 'ngRoute' ...

Add data to a JSON structure

I'm attempting to populate the screenshot object with all PNG files in the following code: common.getFilesInFolder(reportDir, '.png', function(err, PNGs) { if(!err && PNGs.length > 0){ for(var i=0; i< PNGs.le ...

"Exploring the process of integrating a controller into an external HTML file using AngularJS

I'm relatively new to AngularJS. In my web app, I have a set of buttons: index.html <button class="aButton">a</button> <button class="bButton">b</button> <script> $(document).ready(function(){ $(".aButton"). ...

Angular 4/5 | Custom Dropdown Component

I have been working on a custom dropdown directive in Angular that I can attach to any DOM element. Below is the code for my directive: import { Directive, HostListener } from '@angular/core'; @Directive({ selector: '[appDropdown]' ...

Retrieving an array using the $.post() method

I am utilizing the following code: $.post('fromDB.php', function(data) { eval(data); console.log(data); updateTimer(); }); In order to retrieve arrays from PHP. This is what PHP returns: var todayTimeMinutes = [0, 45, 35, 25, 40, 0 ...

Is the value of the object in the array already present in another array of objects?

Plunker - http://plnkr.co/edit/jXdwOQR2YLnIWv8j02Yp In my angular project, I am working on a view that displays a list of users in the main container (array-A) and a sidebar with selected users (array-B). The first array (A) contains all users: [{ $$has ...

Searching for a specific element in Vue.js using its unique identifier (ID) can be

I have a new project using Vue. It includes a div that loops through title and data. Inside the div, there is a search filter and content that renders in p tags. The p tags also go through a loop. Take a look at the code below: <div> <div v- ...

Wrapping dynamic page titles with comment tags in NextJS for cleaner code

I am currently working on NextJS version 12. In my project, I have a file named Layout.js which contains the following code: import Head from "next/head"; const Layout = ({children, pageTitle, mainClass}) => { return ( <> ...