Comments (22)
Thanks for providing the reproduction. editor.formatOnSave
and editor.codeActionsOnSave
seem to conflict for some reason. 🤔
from vscode-stylelint.
@dan2kx Thanks for the report. Can you share a reproducible example on our demo site? A permalink with your demo should be sharable, e.g. https://stylelint.io/demo/#N4Igxg9...
.
from vscode-stylelint.
This is oddly similar to stylelint/stylelint#7429.
from vscode-stylelint.
This is oddly similar to stylelint/stylelint#7429.
Yes it does seem so.
So the likely culprit is the vs code extension then? Should I create this issue there?
from vscode-stylelint.
Here is a example from your Demo site.
from vscode-stylelint.
Here is a example from your Demo site.
The problem with your example is that //
is not valid in CSS.
i.e. you want /* */
So Iv changed your demo by extending using stylelint-config-standard-scss
instead.
e.g.
{
"extends": "stylelint-config-standard-scss"
}
and the bug is gone.
Whether it should be considered a regression is up for debate; should we care about invalid syntaxes?
from vscode-stylelint.
The use of single line comments was not an issue in stylelint v15 with the same vscode extension
i think this use case is valid as per the sass documentation: https://sass-lang.com/documentation/syntax/comments/
I am also extending this plugin:
{
"extends": "stylelint-config-standard-scss"
}
and others as you can see from the OP
from vscode-stylelint.
@dan2kx Does the problem also occur when you use the CLI rather than the VSCode extension?
npx stylelint "test.scss" --fix
Run this command on a single file containing:
a {
// should allow comment
color: red;
}
Rather than all your SCSS files, in case the problem does occur.
Be sure to use your current config.
If it does occur, can you remove "stylelint-prettier/recommended" from your configuration object and try again.
Can you also share your VSCode settings.json, please? If there's anything sensitive in there, you can strip it back to only stylelint.
configuration properties.
from vscode-stylelint.
@jeddy3 Thanks for the reply. the CLI seems to work without issue. The problem does still occur without the stylelint-prettier config.
Here is my vscode config
{
"diffEditor.ignoreTrimWhitespace": false,
"editor.accessibilitySupport": "off",
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.rulers": [100, 120],
"editor.tabSize": 2,
"eslint.codeActionsOnSave.rules": null,
"files.associations": {
".env": "dotenv"
},
"git.confirmSync": false,
"git.ignoreLimitWarning": true,
"git.mergeEditor": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"[scss]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"redhat.telemetry.enabled": false,
"scm.showActionButton": false,
"stylelint.validate": ["css", "scss"],
"typescript.updateImportsOnFileMove.enabled": "always"
}
from vscode-stylelint.
@jeddy3 Have you tried to replicate this in vscode with my config?
from vscode-stylelint.
#489 looks like the same problem.
from vscode-stylelint.
@dan2kx Thanks for the info. I can reproduce the problem now. My files are below:
package.json
(need to run npm install
):
{
"dependencies": {
"stylelint": "^16.1.0",
"stylelint-config-sass-guidelines": "^11.0.0",
"stylelint-config-standard-scss": "^13.0.0",
"stylelint-order": "^6.0.4",
"stylelint-prettier": "^5.0.0"
}
}
.stylelintrc.json
:
{
"extends": [
"stylelint-config-sass-guidelines",
"stylelint-config-standard-scss",
"stylelint-prettier/recommended"
],
"ignoreFiles": ["node_modules/**", "dist/**", "**/*.tsx", "**/*.ts"],
"overrides": [
{
"files": ["**/*.scss"],
"customSyntax": "postcss-scss"
}
]
}
.vscode/settings.json
:
{
"diffEditor.ignoreTrimWhitespace": false,
"editor.accessibilitySupport": "off",
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.rulers": [100, 120],
"editor.tabSize": 2,
"eslint.codeActionsOnSave.rules": null,
"files.associations": {
".env": "dotenv"
},
"git.confirmSync": false,
"git.ignoreLimitWarning": true,
"git.mergeEditor": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"[scss]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"redhat.telemetry.enabled": false,
"scm.showActionButton": false,
"stylelint.validate": ["css", "scss"],
"typescript.updateImportsOnFileMove.enabled": "always"
}
test.scss
:
a {
// should allow comment
color: red;
}
Screen.Recording.2024-01-29.at.23.36.29.mov
FYI, the CLI is not a problem:
$ npx stylelint test.scss --fix
test.scss
3:10 ✖ Unexpected named color "red" color-named
1 problem (1 error, 0 warnings)
$ cat test.scss
a {
// should allow comment
color: red;
}
from vscode-stylelint.
So, this problem seems specific to the VSCode extension. I'll transfer this issue to https://github.com/stylelint/vscode-stylelint
from vscode-stylelint.
@dan2kx When I change editor.formatOnSave
from true
to false
, the problem is gone. Can you try it?
- "editor.formatOnSave": true,
+ "editor.formatOnSave": false,
from vscode-stylelint.
@ybiquitous It does stop the error but also stops the format from auto fixing issues which is useful to me
from vscode-stylelint.
@dan2kx I'm afraid that I'm unfamiliar with VSCode, but can you use editor.codeActionsOnSave
instead?
from vscode-stylelint.
@dan2kx I'm afraid that I'm unfamiliar with VSCode, but can you use
editor.codeActionsOnSave
instead?
I have that too
from vscode-stylelint.
Ah, right. Sorry, I missed the setting. I'm unsure which is the cause. 😕
from vscode-stylelint.
+1
from vscode-stylelint.
After minimising dependencies, I can reproduce the test case provided in the previous comment.
- VS Codium 1.86.2.
- vscode-stylelint v1.3.0.
- node v18.17.1 (or v20.11.1, adding
"volta": {"node": "20.11.1"})
to package.json.
Lint errors are highlighted properly by VS Codium before saving.
The only viable solution for now is to stick with stylelint 15.x.
package.json
{
"dependencies": {
"stylelint": "^16.1.0",
"stylelint-config-standard-scss": "^13.0.0"
},
"stylelint": {
"extends": [
"stylelint-config-standard-scss"
]
}
}
settings.json
{
"redhat.telemetry.enabled": false,
"[scss]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "stylelint.vscode-stylelint",
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": "explicit"
}
},
"stylelint.validate": ["css", "scss"]
}
test.scss before saving
a {
// Double slash Line comment
color: black;
/* CSS Block comment */
background-color: white;
}
test.scss after saving
a {
// Double slash Line comment
color: black;DoubleslashLinecommentcolor
/* CSS Block comment */
background-color: white;
}
from vscode-stylelint.
Starting with the previous faulty result, the errors spread to the following line.
After two saves:
a {
// Double slash Line comment
color: black;DoubleslashLinecommentcolorDoubleslashLinecommentcolor
/* CSS Block comment */
background-color: white;background-color
}
After three saves:
a {
// Double slash Line comment
color: black;DoubleslashLinecommentcolorDoubleslashLinecommentcolorDoubleslashLinecommentcolor
/* CSS Block comment */
background-color: white;background-colorbackground-color
}
from vscode-stylelint.
I don't know if this could help anybody that still has the problem today, but just in case: the only way I found to resolve this bug is to add the "postcss-scss" custom syntax for stylelint directly in VS Code User Settings, as it did not work for me in the stylelint config file (still digging to find out why ^^)
More precisely, in VS Code, open the command palette and search "Preferences : Open User Settings (JSON)" and add this line in the json settings :
"stylelint.customSyntax": "postcss-scss"
from vscode-stylelint.
Related Issues (20)
- [Bug]: ESM-only stylelint plugins fail to import with Yarn PnP HOT 12
- [Feature]: enable markdown in error messages
- [Bug]: Prettier plugins cannot be resolved when package.json is not in the root folder HOT 1
- stylelint slowing down VS Code when saving files HOT 1
- VSCode extension does not respect folder settings! HOT 2
- [Bug]: format can't trigger auto fix HOT 13
- [Feature]: Surface "Error: No rules found within configuration. Have you provided a "rules" property?"
- The JS/TS language service immediately crashed 5 times. The service will not be restarted HOT 1
- CSS properties in comments increase indefinitely. HOT 24
- Standardize labels HOT 17
- [Bug]: Sorting properties not work HOT 21
- [Bug]: Formatting is impossible with stylelint HOT 2
- i
- [Bug]: Unsure if extension works with stylelint v16 HOT 3
- Stylelint ignoring stylelint.validate setting
- [Feature]: If you manually specify the configPath path in VScode's stylelint extension, the.stylelintignore file will no longer be recognized, not even the array in the ignoreFiles property of the configuration object
- [Feature]: Use NODE_COMPILE_CACHE when detecting node v22+
- [Bug]: Double slash comments cause wrong position for syntax highlights in scss files
- Error: ENOENT: no such file or directory HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vscode-stylelint.