Poorly formatted code in VueJS when using Visual Studio Code

After reinstalling Windows and installing Visual Studio Code along with Prettier, I am facing an issue where the formatting is not up to par. Below is an example showcasing the difference between how it looks versus how it should look.

Incorrect Formatting

if (this.inter.total_quantity_inv != this.inter.invoice.quantity) {
  if (
    this.notice.notice_quantity >
    this.inter.invoice.quantity -
      this.inter.total_quantity_inv +
      initial_notice_quantity
  ) {
    this.notice.notice_quantity =
      this.inter.invoice.quantity -
      this.inter.total_quantity_inv +
      initial_notice_quantity;
    this.showThrottledError.call(
      this,
      "Cantitatea anexei nu poate depăși cantitatea facturii!"
    );
  }
}

Correct Formatting

if (this.inter.total_quantity_inv != this.inter.invoice.quantity) {
    if (this.notice.notice_quantity > this.inter.invoice.quantity - this.inter.total_quantity_inv + initial_notice_quantity) {
          this.notice.notice_quantity = this.inter.invoice.quantity - this.inter.total_quantity_inv + initial_notice_quantity;
          this.showThrottledError.call(this, "Cantitatea anexei nu poate depăși cantitatea facturii!");
    }
}

I have tried configuring Prettier settings, as well as uninstalling and re-installing it, but nothing seems to work.

Answer №1

Enhance your Vue.js development experience with this comprehensive extension pack. Click here to check it out!

This all-in-one pack includes all the essential extensions for Vue developers.

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

Tips for defining a distinct series of key-value pairs in typescript

Having experience with a different language where this was simple, I am finding it challenging to articulate a sequence of pairs: Each pair is made up of two basic elements (such as strings or numbers) Each element may appear multiple times within the lis ...

Where should uploaded files be stored using ng-flow?

Initially, I am utilizing the ng-flow, which is an html5 file upload extension built on the angular.js framework. After uploading my files and logging the event in the console, I'm uncertain about where and how to store them. Below is my HTML code w ...

What is the best way to retrieve the input values of dynamically created input fields in Vue 3?

I'm currently working on a Vue 3 form where select fields are generated dynamically using v-for based on the input value of another field. The challenge I'm facing is how to access the values of each select field individually when they all have t ...

Create a Nuxt component with styling and webpack to display an image sourced from the

I am utilizing styled components to create buttons: import styled from 'vue-styled-components'; const buttonProps = { color: String, br: String, pad: String, bgc: String, bgch: String, icon: String, }; export default styled('bu ...

node.js: The Yahoo weather jQuery plugin fails to display any data

After successfully implementing node.js with jQuery and the plugin from , I now aim to utilize the weather data for a different purpose rather than directly inserting it into the HTML. However, I am encountering difficulties in accessing or displaying the ...

If I dared to eliminate the emphasized line, this code would completely fall apart

<!DOCTYPE html> <html> <head> </head> <body> <h1 id="message-el">Ready to play?</h1> <p id="cards-el"></p> <p id="sum-el"></p> <butto ...

Utilizing a Chrome packaged app to interact with a local sqlite database through reading and writing operations

Is it feasible to access and manipulate a local sqlite database from within a Chrome packaged app? I am currently able to work with a locally stored JSON file for my app data, but now I also require the functionality to interact with a sqlite database in ...

Bar graph constructed using a pair of div elements

I extracted two values from an array: $target = $data->data[2][32][3]; For this particular example, $target = 9.83%. $clicks = $data->data[1][32][3]; And in this case, $clicks = 7.15%. I have created a bar-like chart using three main div elements ...

Is it possible for me to utilize a validation function to display error messages within a specific span id tag?

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

Updating className in React by responding to button clicks without relying on numerous conditional statements

I've been working on a small project for the past few weeks. The main idea is to have a stepper with different steps that the user can click on to see their tasks for each step. There is also a completion button for each step, but I'm struggling ...

Is it advisable to incorporate vue-resource in Vuex actions?

I am currently working on a web application that retrieves airport data from the backend. To manage states and data sharing, I am utilizing Vuex. My dilemma is whether to load the airports in my Vuex actions or within a method of my Vue instance which will ...

Conceal a div once the content in a separate div has finished loading

After loading an image in slices inside a div, I want to ensure that the entire content is loaded before displaying the div. To achieve this, I am using another div as a mask while the content loads: <div id="prepage" style="position:absolute; left:0px ...

Generating fresh instances in for loop - JS

I am working on a page that showcases graphs based on selected criteria. Each graph requires its own object reference, and I am creating new objects within a for loop. However, I'm facing the challenge of accessing those objects outside of that specif ...

How can I implement conditional rendering with React on a div element?

Is it possible to implement conditional rendering by simply adding the boolean checked isVisible=true onto the div? Will this ensure that it only renders when true? Could there be any potential issues with the component's state changing after renderi ...

What is the process for updating IDs and names for duplicated elements?

I have created a select box and used the clone function to generate dynamic select boxes. However, the cloned select boxes have the same ids and names as the original. How can I change the ids and names of the cloned elements in my code sample below: < ...

Error: Unable to iterate through the {(intermediate value)}. It's not a function

Snippet of the original code: const genreOptions = [{{ genreOptions | json_encode | raw }}].map((type , label) => ({value: type, label: label})); Piece of debugging code: const genreOptions = { "Horror": "Kork ...

Using NodeJS to fetch external page data and return Javascript variable information

I need to retrieve the entire DOM of a specific page by sending a request, essentially crawling the website. The HTML directly includes a variable with some data, instead of it being in a separate script file. With my NodeJS backend, I am utilizing request ...

Refreshing the DeckGL HexagonLayer upon changes to the data array/Initiating a reload for the DeckGL HexagonLayer

I am currently using DeckGL along with React to showcase data on an OpenStreetMap. My goal is to incorporate filters to allow for different views of the data I possess. The main issue I encounter is the inability to refresh the layer representing the data ...

Concealing divs without values in ASP.NET MVC

I am working on an AJAX call to fetch data from the back-end and populate divs with it. Below is my code for the AJAX call: $(document).ready(function() { question_block(); }); function question_block() { $.ajax({ url: '@Url.Action(" ...

Contrasting {} and {} as any in TypeScript

Seeking clarity on TypeScript, what sets apart (foo and foo2) from (foo3 and foo4)? (foo and foo2) as well as (foo3 and foo4) produce identical results, yet during compilation, a red underline appears under foo2 and foo3. https://i.stack.imgur.com/lWaHc. ...