console displaying indentation problems with laravel and vue

I am currently utilizing Vue within Laravel and encountering a multitude of indentation errors in the console.

Here is an excerpt from my package.json file:

"private": true,
  "scripts": {
    "clean": "rimraf public/build",
    "build": "npm run clean && webpack --mode development --progress",
    "watch": "npm run clean && npm run build -- --watch",
    "dev": "npm run clean && webpack-dev-server --mode development --hot --progress",
    "prod": "rimraf public/dist && cross-env NODE_ENV=production webpack --mode production --progress",
    "lint": "eslint --ext .js,.vue resources/js"
  },

How can I resolve all the Prettier errors and ensure a successful build without any issues? Any guidance or assistance would be greatly appreciated.

In addition, which command should I execute in production to normalize everything?

When running `npm run watch` in development, I encounter errors as depicted in the screenshot below. Issues are also arising when executing `npm run prod` in production.

As a newcomer to Vue, I lack substantial knowledge about it.

require('dotenv').config()
const path = require('path')
const webpack = require('webpack')

const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const WebpackNotifierPlugin = require('webpack-notifier')
const ManifestPlugin = require('webpack-manifest-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

// Remaining code goes here...

module.exports = [
  
  getEntryConfig('frontend', 8888, {
    'vue$': 'vue/dist/vue.esm.js'
    
  }),

  getEntryConfig('backend', 8889),

];

Answer №1

If you want to turn off the linting feature, simply update your configuration file to exclude the eslint loader that is responsible for generating the errors.

Keep in mind that without linting, your code may have syntax errors or other issues. Linting is a recommended practice, so it's best to address any errors if possible.

Just remove the following lines from your configuration:

{
  test: /\.(js|vue)$/,
   loader: 'eslint-loader',
   enforce: 'pre'
},

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

What is the best way to implement client-side shopping cart calculations using jQuery?

https://i.stack.imgur.com/aOajr.png Here is the content of my shopping cart. Below, I will explain the flow. [product image clicked] -> ajax request fetches details from database for that particular product id and appends (product name,id and price a ...

The interaction between an iOS application and a Laravel web application

Currently, I am in the process of developing a project that involves an iOS app utilizing a webapp built on the Laravel framework for communication. For instance, iOS users will need to use the Laravel login in order to access the application. The Laravel ...

In MongoDB, learn the process of efficiently updating nested objects in a dynamic manner

We have a variety of nested configurations stored in MongoDB. Initially, we store the following object in MongoDB: const value = { 'a': { 'b': 1 } } collection.insertOne({userId, value}) Now, I would like to modify the object in ...

Optimizing jQuery UI autocomplete choices through filtering

Currently utilizing the jqueryUI autocomplete feature on my website. Let's say I have the following entries in my database... apple ape abraham aardvark Upon typing "a" in the autocomplete widget, a list appears below the input field displaying the ...

Having Trouble with QR Code Generator Functionality

UPDATE: The initial code has been updated to implement the recommendations provided. I am currently working on a QR Code generator that updates every minute. Although I have developed the code below, I am encountering some errors and could use some assist ...

Having trouble selecting a checkbox within the <label for="chk"> element with Selenium

Every time I try to click a checkbox within a data cell (td), I keep encountering: org.openqa.selenium.ElementNotVisibleException The issue is that the element is enabled but not visible. Here is the Page source provided: <table id='table1&ap ...

Does type conversion have a specific ranking of preference?

When working with JavaScript, it's important to note that the language automatically converts types when necessary. For instance, if you have an expression like "8" * "3", JavaScript will convert the strings to numbers and calculate the result as 24. ...

How to insert a span element within a link tag in Next.js/React.js

Looking to create a breadcrumb using microdata in a Next.js and React.js project. Initially, I tried the following: <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem"> <Link href={'/index&a ...

Can the ngx-chips library be used to alter the language of chips?

Currently, I am working with the ngx-chips library and encountering a particular issue. Here is an image representation of the problem: The challenge I am facing involves updating the language of the chips based on the selection made in a dropdown menu. A ...

Implementing React and Material UI: Maximizing Vertical Space Usage for a Box Component

Currently, I am working on a web application using React combined with Material UI. Within my code snippet below, you will see three Box components in play. Box 1 and Box 3 have specific heights set, but I am looking for a way to make Box 2 occupy the re ...

Is there a way to change the color of just the most recently clicked anchor element <a>?

I have a sidebar with anchor elements (Link 1,2,3 in my HTML). I want the text color of these anchors to change when clicked. Additionally, I need only one anchor element to be colored at a time, meaning the previous one should return to its normal color. ...

Deep Dive into TypeScript String Literal Types

Trying to find a solution for implementing TSDocs with a string literal type declaration in TypeScript. For instance: type InputType = /** Comment should also appear for num1 */ 'num1' | /** Would like the TSDoc to be visible for num2 as well ...

What are the steps to sorting in JavaScript?

I need help with sorting an array. The array I have looks like this: var temp = [{"rank":3,"name":"Xan"},{"rank":1,"name":"Man"},{"rank":2,"name":"Han"}] I've tried to sort it using the following code: temp.sort(function(a){ a.rank}) But unfortun ...

In Vue, reactivity does not extend to nested child objects

I am dealing with JSON data structured like this- items: { id: 1, children: [{ id: 2, parentId: 1, children: [{ id: 3, parentId: 2 }] }] } level-1 children represent parent items that all possess a parent_id of 1 (the roo ...

The use of DIV tags allows the element to be displayed in an inline

In my project, I decided to add three div tags. The first two are positioned next to each other with the third div tag placed below them. However, when I tried to insert a slideshow into the first div tag, all of the div tags ended up displaying as "block" ...

Updating corresponding key values in two JavaScript objectsORModify matched key values

I am in need to compare two objects and update the values of the first object with the updated values from the second object. For example: $scope.obj1={"id" : 1, "name" : "java"} $scope.obj2={"id" : 1, "name" : "java4you", "gender" : "male"} compare(des ...

Avoid rendering the React component until the AJAX call has completed

Suppose the following code is given: componentDidMount() { $.ajax({ type: 'GET', url: '/data/', dataType: 'text', success: function(response) { this.setState({data: response}) ...

Combining Various Time Periods in JavaScript

After encountering various old solutions, most utilizing jQuery, for adding multiple durations together, I decided to create my own script below. While I may not be a JS expert, I am open to input on any potential issues with this code or a more efficient ...

Use jQuery to switch back and forth between the login and registration forms on a single

I've set up two forms, one for login and one for registration, with the default view showing the login form. There's a link that says "Don't have an account?" and when it's clicked, the registration form will display while the login for ...

JavaScript - Reveal a div when a grid item is clicked

I have created a grid with a 5x7 layout using divs. I am trying to achieve a feature similar to the Netflix interface where, upon clicking on a div, a larger div will appear beneath it. This larger div should expand to 100% width of the parent container, p ...