CODEWITHSUNDEEP
next.jseslintprettierstylelintscss-lint
Javier
Javier

Reputation: 518

Stylelint not linting component.module.scss in Next.js

I two projects, one with React (v17.0.2) and the other with Next.js (v11.1.0) In both I have implemented ESlint with Prettier and Stylelint.

My problem is that in React project everything is working smoothly and fine, however in Next.js project, stylelint is not linting component.modules.scss files (but other.css files are).

In React, scss files are in ./src/assets/scss/* in Next.js scss files are in ./styles/*

These are the config files content:

.eslintrc.json

{
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": [
    "react", 
    "react-hooks", 
    "jsx-a11y", 
    "only-warn",
    "prettier"
  ],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2021,
    "ecmaFeature": {
      "jsx": true,
      "modules": true
    }
  },
  "env": {
    "browser": true,
    "jest": true,
    "es2021": true,
    "node": true
  },
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended",
    "next"
  ],
  "rules": {
    "camelcase": "off",
    "react/prop-types": "off",
    "react/jsx-curly-newline": ["off", "consistent"],
    "react/jsx-handler-names": "off",
    "react/display-name": ["off"],
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "parser": "flow",
  "semi": false,
  "useTabs": false,
  "editor.formatOnSave": true,
  "stylelintIntegration": true
}

.stylelintrc.json

{
  "extends": "stylelint-config-sass-guidelines",
    "plugins": [
    "stylelint-scss"
  ],
  "rules": {
        "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    "indentation": 2,
    "number-leading-zero": null,
        "max-nesting-depth": 10
  }
}

Any help please? Thanks

Upvotes: 0

Views: 1958

Answers (1)

Javier
Javier

Reputation: 518

I found what was wrong;

Need to add this in .vscode/settings.json

"stylelint.validate": ["css", "scss", ".module.scss"]

.module.scss was not considered as .scss, so adding it to the config made everything works

Upvotes: 2

Related Questions