'How do I set stylelint to fix errors automatically?

stylelint *.css --fix not working as expect. Error reporting works well but a file is not fixed.

package.json

{
  "devDependencies": {
    "stylelint": "^11.1.1",
    "stylelint-config-recess-order": "^2.0.3"
  }
}

.stylelintrc.json

{
  "extends": "stylelint-config-recess-order"
}

style.css (ugly-order properties)

.test {
  height: 100%;
  margin: auto;
  width: 100%;
}

command

$ npx stylelint style.css --fix

output

style.css
 4:3  ✖  Expected "width" to come before "margin"   order/properties-order

Error reporting is fine.
I expect auto-fixing works for a file.

stylelint


Solution 1:[1]

Resolved. I removed node_modules and package-lock.json. After that I ran npm i. I'm not sure about the cause but works well now.

Solution 2:[2]

auto-correct options for Stylelint. It fixes all issues for me.

To check the errors first:

npx stylelint "**/*.{css,scss}"

To fix the issues for all files (auto-correct options)

npx stylelint "**/*.{css,scss}" --fix

If you want to change it for a specific file.

/npx stylelint src/index.css --fix 

[your file name and path may need to be modified according to your one]

Solution 3:[3]

I noticed that this was happening for untracked files. In my case they were .scss files. What I did was,

  1. Added an exception of the file to .stylelintignore
  2. Commited the file to the repo
  3. Removed the exception of the file from .stylelintignore
  4. Had the errors reported to my terminal and run npx stylelint src/scss/_file.scss --fix
  5. All the fixable errors were fixed

Solution 4:[4]

Try npx stylelint --fix style.css (note the --fix is before the CSS files path).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 takanopontaro
Solution 2 Mahbub Alam
Solution 3 apsuhos
Solution 4 edouardbriere

Related Questions