Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not showing errors when running dev mode #103

Open
orsileonel opened this issue Nov 13, 2023 · 1 comment
Open

Not showing errors when running dev mode #103

orsileonel opened this issue Nov 13, 2023 · 1 comment

Comments

@orsileonel
Copy link

Hello, thank you for this great module!

I don't know if this is the correct place to ask for this, but I have the following issue which was working before.

Everything is working correctly regarding the configuration of my stylelint, it is showing the errors based on my rules when running yarn lint:style command which basically executes stylelint \"**/*.{vue,html,css,pcss,scss,sass}\":

Example:
image

It also shows me the errors in VSCode:
image

Now the issue comes when I run yarn dev, it executes the webpage without displaying any errors, but if I remove the lang="postcss" from the <style> it does display the window with the errors (although it does only with the .vue files, not the ones in the .pcss ones):

image

package.json

"devDependencies": {
    "@babel/eslint-parser": "^7.23.3",
    "@nuxt/devtools": "latest",
    "@nuxtjs/eslint-config": "^12.0.0",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@nuxtjs/stylelint-module": "^5.1.0",
    "eslint": "^8.53.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.18.1",
    "eslint-plugin-vuejs-accessibility": "^2.2.0",
    "nuxt": "^3.8.1",
    "postcss-html": "^1.5.0",
    "postcss-import": "^15.1.0",
    "postcss-nested": "^6.0.1",
    "postcss-scss": "^4.0.9",
    "stylelint": "^15.11.0",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard": "^34.0.0",
    "vite-plugin-eslint": "^1.8.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  }

nuxt.config.js

import eslintPlugin from 'vite-plugin-eslint'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: {
    enabled: true
  },
  vite: {
    plugins: [
      eslintPlugin({
        failOnWarning: true
      })
    ]
  },
  modules: ['@nuxtjs/stylelint-module'],
  css: ['@/assets/css/main.pcss'],
  stylelint: {
    lintOnStart: false,
    failOnError: false,
    failOnWarning: false
  },
  postcss: {
    plugins: {
      'postcss-import': true,
      'postcss-nested': {}
    }
  }
})

.stylelintrc.cjs

module.exports = {
  extends: ["stylelint-config-recommended-vue"],
  overrides: [
    {
      files: ["*.{vue,html}", "**/*.{vue,html}"],
      customSyntax: "postcss-html",
    },
    {
      files: ["*.pcss", "**/*.pcss"],
      customSyntax: "postcss-scss",
    },
  ],
  customSyntax: "postcss-html",
  rules: {
    ...
  },
};

Is there any way to fix this so that when I use development mode it displays the errors like when I execute the linter manually?

Thank you!

@orsileonel
Copy link
Author

orsileonel commented Nov 14, 2023

Now it seems to be working but only with the index.vue file, when adding the following to the stylelint config in nuxt.config.js:

include: ['*.{vue,pcss}', '**/*.{vue,pcss}']

Seems to not do anything, when it should lint .vue and .pcss files under assets, layouts, pages, and components folders:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant