stylelint / vscode-stylelint

The official Visual Studio Code extension for Stylelint

Home Page:https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug]: Error with prettier 3.0.0

drackp2m opened this issue · comments

How did you encounter this bug?

A couple of days ago prettier version 3 was released. It always tends to update dependencies as often as I try to remember.

When I did it this morning for the last time, the plugin throws me an error (pasted in debug section) when trying to format a scss file.

My package:

{
		"eslint": "8.44.0",
		"eslint-config-prettier": "8.8.0",
		"eslint-import-resolver-typescript": "3.5.5",
		"eslint-plugin-cypress": "2.13.3",
		"eslint-plugin-import": "2.27.5",
		"eslint-plugin-prettier": "4.2.1",
		"eslint-plugin-unused-imports": "2.0.0",
		"postcss": "8.4.25",
		"prettier": "2.8.8",
		"stylelint": "15.10.1",
		"stylelint-config-clean-order": "5.0.1",
		"stylelint-config-standard-scss": "10.0.0",
		"stylelint-prettier": "3.0.0",
}

Link to Minimal Reproducible Example

https://github.com/stylelint/vscode-stylelint/issues

Code Snippet


Stylelint Configuration

{
	"files": ["*.css", "**/*.css"],
	"extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"],
	"plugins": ["stylelint-prettier"],
	"defaultSeverity": "warning",
	"overrides": [
		{
			"files": ["*.scss", "**/*.scss"],
			"customSyntax": "postcss-scss"
		}
	],
	"rules": {
    "prettier/prettier": true,
		"color-hex-length": "short",
		"scss/dollar-variable-empty-line-before": null
	}
}

Extension Configuration

{
  "stylelint.packageManager": "yarn",
  "stylelint.reportDescriptionlessDisables": true,
  "stylelint.reportInvalidScopeDisables": true,
  "stylelint.reportNeedlessDisables": true,
  "stylelint.snippet": ["css", "scss"],
  "stylelint.validate": ["css", "scss"],
  "[css]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "[scss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
}

Actual Behaviour

Shows an error and does not format

Expected Behaviour

That it does not show any errors and reformat as before.

Going back to prettier version 2.8.8 fixes everything.

Logs

TypeError: prettier.resolveConfig.sync is not a function     at /usr/src/app/node_modules/stylelint-prettier/stylelint-prettier.js:50:56     at /usr/src/app/node_modules/stylelint/lib/lintPostcssResult.js:120:8     at Array.map (<anonymous>)     at lintPostcssResult (/usr/src/app/node_modules/stylelint/lib/lintPostcssResult.js:110:18)     at lintSource (/usr/src/app/node_modules/stylelint/lib/lintSource.js:110:8)     at async Function.standalone [as lint] (/usr/src/app/node_modules/stylelint/lib/standalone.js:125:26)     at async RR.lintDocument (/home/node/.vscode-server/extensions/stylelint.vscode-stylelint-1.2.4/dist/start-server.js:71:5588)     at async uE.eE (/home/node/.vscode-server/extensions/stylelint.vscode-stylelint-1.2.4/dist/start-server.js:71:72497)     at async tg.Zh (/home/node/.vscode-server/extensions/stylelint.vscode-stylelint-1.2.4/dist/start-server.js:71:58139)ovalTypeError: prettier.resolveConfig.sync is not a function     at /usr/src/app/node_modules/stylelint-prettier/stylelint-prettier.js:50:56     at /usr/src/app/node_modules/stylelint/lib/lintPostcssResult.js:120:8     at Array.map (<anonymous>)     at lintPostcssResult (/usr/src/app/node_modules/stylelint/lib/lintPostcssResult.js:110:18)     at lintSource (/usr/src/app/node_modules/stylelint/lib/lintSource.js:110:8)     at async Function.standalone [as lint] (/usr/src/app/node_modules/stylelint/lib/standalone.js:125:26)     at async RR.lintDocument (/home/node/.vscode-server/extensions/stylelint.vscode-stylelint-1.2.4/dist/start-server.js:71:5588)     at async uE.eE (/home/node/.vscode-server/extensions/stylelint.vscode-stylelint-1.2.4/dist/start-server.js:71:72497)     at async tg.Zh (/home/node/.vscode-server/extensions/stylelint.vscode-stylelint-1.2.4/dist/start-server.js:71:58139)TypeError: prettier.resolveConfig.sync is not a function     at /usr/src/app/node_modules/stylelint-prettier/stylelint-prettier.js:50:56     at /usr/src/app/node_modules/stylelint/lib/lintPostcssResult.js:120:8     at Array.map (<anonymous>)     at lintPostcssResult (/usr/src/app/node_modules/stylelint/lib/lintPostcssResult.js:110:18)     at lintSource (/usr/src/app/node_modules/stylelint/lib/lintSource.js:110:8)     at async Function.standalone [as lint] (/usr/src/app/node_modules/stylelint/lib/standalone.js:125:26)     at async RR.lintDocument (/home/node/.vscode-server/extensions/stylelint.vscode-stylelint-1.2.4/dist/start-server.js:71:5588)     at async uE.eE (/home/node/.vscode-server/extensions/stylelint.vscode-stylelint-1.2.4/dist/start-server.js:71:72497)     at async tg.Zh (/home/node/.vscode-server/extensions/stylelint.vscode-stylelint-1.2.4/dist/start-server.js:71:58139)```

### Stylelint Version

15.10.1

### vscode-stylelint Version

v1.2.4

### Node.js Version

v20.2.0

### Operating System

macOS Ventura 13.4.1 (22F82)

### Windows Subsystem for Linux

_No response_

### Code of Conduct

- [X] I agree to follow vscode-stylelint's Code of Conduct
```[tasklist]
### Tasks

Likely an issue with the stylelint-prettier plugin than this extension.

@drackp2m It's now not recommended to use these plugins. Instead, you can just run Stylelint and Prettier separately.

VS Code config:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "scss"],
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Also, you don't need to use the custom syntax directly as the scss config bundles it for you:

{
	"extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"],
	"defaultSeverity": "warning",
	"rules": {
		"color-hex-length": "short",
		"scss/dollar-variable-empty-line-before": null
	}
}