Issues with vue-cli eslint failing to capture errors

I'm having trouble setting up eslint for my new vue cli project. I can't seem to get it to catch the errors I intentionally add, even though it passes without any issues. Any suggestions on what might be going wrong?

vue.config.js

  devServer: {
    overlay: {
      warnings: true,
      errors: true,
    },
  },
  lintOnSave: true,

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: "babel-eslint",
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  plugins: ["prettier"],
  // add your custom rules here
  rules: {
    semi: "error",
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
  },
};

src/App.vue:

...
methods: {
  test() {
    return true;
  },
},
...

vue-cli-service lint results:

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deaeacb1b4bbbdaa9ee">[email protected]</a> lint /project/location/component_library
> vue-cli-service lint

 DONE  No lint errors found!
javascriptvue.jsvue-cli

Answer №1

If you are working on a vue-cli project and utilizing vue-cli-ui, head to the 'Plugins' section and click on 'Add Plugin'. Look for and install eslint-plugin-vue from the vue-cli plugins page. This will streamline the process and make linting management much simpler with the right configurations. After installation, choose your preferred eslint type (prettier, airbnb, etc).

Alternatively, if you are not using vue-cli service, here is a basic configuration setup using eslint-plugin-vue. Add it to your .eslintrc.js file.

module.exports = { 
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    'plugin:vue/strongly-recommended',
    'plugin:vue/essential',
    '@vue/prettier', //consider using @vue/airbnb

  ],
  rules: {
    //add custom rules here
  }, 
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "babel-eslint",
    "sourceType": "module"
  },
  plugins: [
    //list of plugins
  ],
}

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

Updating the React state of a function that is enclosed inside useRef does not result in any changes

I am facing an issue with accessing React state within a function that is enclosed in a useRef. Despite trying to use a helper function bound to App to access the state, the state does not update as expected inside the useRef function. getCount outside 0 ...

javascriptreactjsthis

Adjust the height of the image slider to match the smallest image

Currently, my responsive image slider is using . The height of the slider is being set to match the height of the largest image. However, I would like it to instead be the height of the smallest image and cut off any excess for images that are larger than ...

javascriptjquerycss

Error encountered while uploading image on django through jquery and ajax

Looking for help on posting a cropped image via Jquery and ajax. I've been trying to implement a solution from a question on cropping images using coordinates, but I'm facing issues with receiving the image on Django's end. The CSRF token an ...

javascriptjqueryajaxdjangohtml

Discovering the Vue.js API key within a Laravel application

Hey there, I'm facing an issue while trying to access my YouTube API key that is stored in the .env file from within this code snippet: <template> <div class="YoutubeDash__wrapper"> <video-group :videos="videos"></video- ...

laravelvue.js

Trouble with Google Maps API clicking on url links

I've added markers to a Google Map and I'm trying to open the specific country's PHP page when a marker is clicked, but for some reason it's not working. Below is an example of my code: <script> function initMap() { var ger ...

javascriptphphtmlgoogle-mapsgoogle-maps-api-3

"Encountering a problem where Apex Charts are being rendered twice in Vue 3

Currently, I am utilizing Apex Charts alongside Vue 3. Strangely enough, when the chart is being rendered, it appears twice. What's even more peculiar is that the duplicate chart vanishes from the DOM as soon as I resize or move the browser window. To ...

vue.jsvuejs3apexcharts

Generate a GridGeometry of size 16x16 that is responsive to the viewport dimensions using Three.js

The question is quite simple, I am looking for help to create a specific Three.js and WebGL project. Although I have a basic understanding of creating a Cube in Three.js and WebGL, I am struggling with a more complex task. I am currently using this pen a ...

javascriptcanvasthree.js

The res.download() function in Express is failing to deliver the accurate URL to the client

When trying to utilize the res.download() method for downloading specific files from a server, there is an issue where triggering the res.download does not redirect the client to the correct URL. The files intended for download are located in a directory s ...

javascripthtmlcssnode.jsexpress

Troubleshooting Issues with https.request and Options in NodeJS Leading to Connection Resets

When working with NodeJS, I noticed that my code performs as expected when using https.get() to retrieve responses. However, the moment I make the switch to https.request() along with requestOptions, I encounter a connection reset error along with the foll ...

javascriptnode.jsexpresshttps

Encountering Timeout Issue Following Laravel 5.6 Framework Update

Yesterday, a strange issue suddenly appeared in my Laravel 5.6 project. It all started after I ran a composer update command. Since then, any Ajax requests to the project API, handled by Axios from a Vue component, are not functioning properly. No CRUD ...

phplaravellaravel-5vue.jsaxios

Unusual problem arises when working with exclusions and inclusions in tsconfig.json

I've encountered a peculiar issue. When I specify the following in my configuration: "exclude": [ "node_modules", "**/__tests__", "**/*.test.*", "**/server-handlers/**/*", "**/ ...

javascripttypescripttsconfigtsc

npm fails with the error message 'ERR! callback() was not invoked'

While attempting to set up vue-cli on my system, I encountered an issue with the installation process. npm install -g @vue/cli The error message I received was: Unhandled rejection Error: EACCES: permission denied, mkdir '/home/moeketsi/.npm/_cac ...

node.jsnpmvue-cli

Steps for adding an npm dependency as a peer dependency:

Is there a way in npm to install dependencies as peer-dependencies similar to the yarn option --yarn, rather than manually adding them? For instance: "peerDependencies": { "@angular/core": "^7.0.0" } Update: Further clarifi ...

javascriptnode.jsnpmyarnpkg

Apollo's MockedProvider failing to provide the correct data as expected

I created a function called useDecider that utilizes apollo's useQuery method. Here is the code: useDecider: import { useState } from 'react'; import { useQuery, gql } from '@apollo/client'; export const GET_DECIDER = gql` quer ...

javascriptreactjsapolloreact-apolloapollo-client

Is the sub-document _id generated by Mongoose unique?

Consider the mongoose schema below: mongoose.Schema({ world: String, color: [{ name: String }] }); This schema generates documents with sub-documents that have _id fields. { _id: 'a9ec8475bf0d285e10ca8d42' world: 'matrix', ...

javascriptnode.jsmongodbmongooseschema

Sequelize - utilizing the where clause with counting

I have three models that extend Sequelize.Model and I have generated migrations for them. The associations are set up as follows: Cat Cat.belongsToMany(Treat, { as: 'treats', through: 'CatTreat', foreignKey: 'cat_id', } ...

javascriptnode.jssequelize.js

Having difficulty creating a snapshot test for a component that utilizes a moment method during the rendering process

I am currently testing a component that involves intricate logic and functionality. Here is the snippet of the code I'm working on: import React, { Component } from 'react'; import { connect } from 'react-redux' import moment from ...

javascriptreactjsunit-testingjestjsenzyme

Filtering events in FullCalendar using checkboxes using JavaScript on the client-side

My fullcalendar script is working well, where I add css-classes to events based on data attributes using the eventRender feature. Now, I am trying to filter these specific attributes with checkboxes. However, I am struggling to figure out how to make this ...

javascriptjquerycheckboxfullcalendar

The lookAt method in THREE.js is not functioning properly when called after the rendering process

The code snippet below seems to be causing some issues. It requires jquery and three.js to function properly. The problematic lines are as follows: // change the view so looking at the top of the airplane views[1].camera.position.set( 0,5,0 ); views[1].ca ...

javascriptthree.jswebgl

Is there a way to display the description field instead of the Id in a table using pxp-ui?

I am currently working with a table in pxp-ui and have implemented the following column: subsystemId: { type: 'AutoComplete', isSearchable: true, label: 'Subsystem Id', ...

javascriptreactjs