Using eslint with the vue plugin allows you to specify which object fields to ignore in

My ESLint rule setup includes the following:

"vue/script-indent": [
    "error",
    4,
    {
        "baseIndent": 1,
        "switchCase": 1,
        "ignores":
        [
            "[init.type=\"ObjectExpression\"]",
            "[init.type=\"ArrayExpression\"]"
        ]
    }
]

However, I want to exclude indentation for cases where an object key's value is another object.

When linted, the code looks like this:

let example =
    {
        example:
            {
                test: 
                    "test"
            }
    }

But I prefer the nested object to remain untouched, appearing like this instead:

let example =
    {
        example:
        {
            test: 
                "test"
        }
    }

Essentially, I want objects within objects to be ignored. Additionally, I also want arrays within objects to be ignored, hence why my configuration includes Object and Array in the ignore list.

Answer №1

The provided rule sets up the configuration for vue/script-indent to disregard nested objects/arrays in .vue:

"vue/script-indent": [
    "error",
    4,
    {
        "baseIndent": 1,
        "switchCase": 1,
        "ignores": [
            // nested objects, excluding top level of exported object (data, methods, computed, etc.)
            "[value.type='ObjectExpression']:not(:matches(ExportDefaultDeclaration, [left.property.name='exports']) > * > [value.type='ObjectExpression'])",

            // nested arrays
            "[value.type='ArrayExpression']"
        ]
    }
],

Considerations

  • In TypeScript, using decorators on class properties (e.g., @Prop private msg!: string) can lead to a linting bug where subsequent lines are disregarded by the linter. (vuejs/eslint-plugin-vue#834) Solution: Add an empty method (e.g., _unused() {}) as the first element of the class.

  • The sequence of your object fields may result in the linter ignoring the entire object (vuejs/eslint-plugin-vue#833). Solution: Make sure objects have a literal as their initial field.

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

Creating a custom date selection component in Angular 2 RC1

Can anyone recommend a datepicker that is compatible with Angular 2 RC1? I noticed that ng2-datepicker seems to be using angular2 RC1, but when trying to install it, it's asking for Angular 2 Beta. Would appreciate any assistance. Thank you in advan ...

Switch up your code and toggle a class on or off for all elements that share a specific class

I've been attempting to create a functionality where, upon clicking a switch, a specific class gets added to every element that is assigned the class "ChangeColors". Unfortunately, I have encountered some difficulties in achieving this task. The error ...

Encountering the error message "myFunction variable is not declared" when using Google Closure Compiler

When attempting to compile two JavaScript files that both use a function declared in only one of the files, an "undeclared" error is returned. To solve this issue, I added the function declaration to my externs file like this: var myFunction = function() ...

The function is not valid due to an angular-parse argument

This is my first experience with using angular and parse.com. I encountered the following error: Error: Argument 'eventList' is not a function, got undefined when attempting to execute the following angular code: var main_app = angular.mod ...

Issues with uploading files in NodeJs using express-fileupload are causing errors

I created a REST API in NodeJs for File Upload which is functioning correctly, however I am facing an issue. When I upload more than 2 images, only 2 or 3 get uploaded and sometimes one gets corrupted. I suspect that the loop is running too fast causing th ...

Is there a way to incorporate promises into an endless loop while adding a delay in each iteration?

require("./getSongFromSpotify")().then(a => { require("./instify")(a.artist,a.name).then(r => { if (r.status === "ok"){ console.log("saved") }else{ console.log(" ...

Validation of the existence of a MongoDB user

I'm currently working on implementing a sign-up form using Mongo, Node.js, and Express.js. I've managed to successfully insert a document into the users collection for a new user. However, I now need to set up validation to check if a user alread ...

The matMul function encountered an error due to a mismatch in the inner shapes of the Tensors. The shapes provided were 684,1 and 2,1, and the transposeA and transposeB parameters were both set

I am completely new to the world of AI and tensorflow.js. Currently, I am following a Machine Learning course by Stephen Grider. I was expecting an output after running the code below, but instead, I encountered an error. Can someone please assist me? Her ...

Tips for eliminating repetitive code in JavaScript

I have a jQuery function that deals with elements containing a prefix 'receive' in their class or ID names. Now, I need to duplicate this function for elements with the prefix 'send'. Currently, it looks like this: function onSelectAddr ...

Display the length of an array using AngularJS

Hey there, I'm currently having an issue with printing a list where each entry is supposed to follow the format "element X of TOTAL". However, instead of displaying the total value, it appears as blank text. It seems like a simple mistake, but for som ...

Finding a specific object within an array of objects by searching through a key value pair

In my collection, I have an array of objects structured as follows: [{ "businessunit": [{ "Area": [{ "Asset": [{ "Wells": { "Well": "Well 11" }, "name": "Field ...

Utilize the push method to form a new array

var teamMembers = [ ['John D. Adams', '1959-1967', 'Ohio'], ['Dawson Mathis', '1971-1981', 'Georgia'], ]; To generate this dynamically, I am implementing the code below: var data = ne ...

Initiate a fresh start with an automatic input reset

When you perform an action in the first id = "benodigheden", I believe there should be a specific outcome that then triggers a second rule for id = "benodigheden". However, I have been unsuccessful in finding information on this topic online. It seems like ...

The size of jVectorMap is displayed too diminutive

Why isn't my jVectorMap adjusting to the new height I've specified for the containing div? It only displays at the default height of 54px. Within a document.ready function in my scripts.js file, I have the following code: $('#team-map-usa& ...

An error in typescript involving a "const" assertion and a string array

Currently, I am diving into the world of Typescript along with React. However, an error has emerged in my path that I can't seem to figure out. It's puzzling why this issue is occurring in the first place. Allow me to elaborate below. const color ...

What is the process for resolving arguments in UI-Router's resolve function?

There seems to be a gap in my understanding of UI-Router and angular's documentation, so forgive me if this seems naive, but here goes: On http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider, there is an example resolve fu ...

Exploring the power of tRPC for creating dynamic routes in NextJs

Recently, I embarked on a new project using the complete t3 stack (Nextjs, prisma, tailwind, tRPC), and encountered a minor hiccup. To provide some context, within my database, I have an "artists" table containing fields such as name, email, address, id, ...

Is there a way to selectively import specific functions from a file in NextJs/React rather than importing the entire file?

Imagine this scenario: we have two files, let's call them File A - export const a = () => {} export const b = () => {} Now, consider importing this into File B - import { a } from 'path' When I tried running npm run analyze, it showe ...

Updating the default date format input fields for React-bootstrap-daterangepicker in the United States

Hey there, I'm a newcomer to the world of React and Javascript and I've encountered an issue that has me stumped. I'm trying to change the default US dateformat in my React-bootstrap-daterangepicker, but I'm struggling to figure out how ...

NodeJS: Increasing memory consumption leads to system failure due to recursive scraping

Currently, I am utilizing a GET URL API in NodeJS to extract various data by looping through the months of the year across multiple cities. For each set of parameters such as startDate, endDate, and location, I invoke a scrapeChunk() function. This functio ...