How do I set stylelint to fix errors automatically?

Viewed 10617

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.

4 Answers

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]

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.

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

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

Related