Code Monkey home page Code Monkey logo

Comments (11)

BPScott avatar BPScott commented on June 1, 2024 4

Are you able to exclude VSCode from the process? What happens in you run stylelint over the file on the command line? Does the issue continue to occur?

PS you don't need to specify {"singleQuote": true, "tabWidth": 2} in your .stylelintrc as the rule will look up your config in .prettierrc by default. You just need:

 "rules": {
  "prettier/prettier": true,
}

from stylelint-prettier.

j-f1 avatar j-f1 commented on June 1, 2024

Do you have any other formatters installed? They could be conflicting.

from stylelint-prettier.

smlombardi avatar smlombardi commented on June 1, 2024

@BPScott Even though I have done all of the above, I still get this:
Screen Shot 2019-05-07 at 1 18 36 PM

from stylelint-prettier.

BPScott avatar BPScott commented on June 1, 2024

That screenshot is still from within VSCode. It order to narrow down what is the issue here I'd like to take VSCode out of the equation. Can you show me the outcome of running stylelint over the file on the command line?

I've just tried to recreate this with a new empty folder and I'm unable to reproduce. I tried this with both individual .prettierrc and .stylelintrc files, and with inlining the config into package.json` and both work as expected. I'll demo the config-in-the-package.json approach as it's fewer files.

Try it yourself:

Create a new folder

In that folder place and index.css:

@import "home";
@import 'payments';
@import 'registration';
@import 'rewards';

and a package.json:

{
  "name": "test-issue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "stylelint '*.css'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "prettier": "^1.17.0",
    "stylelint": "^10.0.1",
    "stylelint-config-prettier": "^5.1.0",
    "stylelint-config-standard": "^18.3.0",
    "stylelint-prettier": "^1.0.7"
  }
}

Run npm install

Run npm run lint and see that a single linting error appears - suggesting that you change the double quotes in the home line to singles.

Let's check to see if your stylelint config is setup properly. Can you show the output when you run
node_modules/.bin/stylelint --print-config ThePathToYourProblematicCSSFile replacing ThePathToYourProblematicCSSFile with the filepath of your file (e.g. components/index.css). This will check to see if you've got any conflicting stylelint configs.

Also can you tell me what happens when you run prettier over that single file (node_modules/.bin/prettier ThePathToYourProblematicCSSFile)? What style quotes does it try and render?

from stylelint-prettier.

smlombardi avatar smlombardi commented on June 1, 2024

Print-config:

st016lo:~/github/ng-sample-app/client/src (story/simplify_level1) $ /Users/st016lo/.nvm/versions/node/v10.1.0/bin/stylelint --print-config styles.scss 
{
  "rules": {
    "at-rule-empty-line-before": null,
    "at-rule-no-unknown": null,
    "declaration-colon-newline-after": null,
    "declaration-empty-line-before": null,
    "max-empty-lines": [
      4
    ],
    "indentation": [
      2
    ],
    "no-eol-whitespace": [
      true,
      {
        "ignore": [
          "empty-lines"
        ]
      }
    ],
    "number-leading-zero": null,
    "no-empty-source": null,
    "rule-empty-line-before": null,
    "selector-list-comma-newline-after": [
      "always-multi-line"
    ],
    "selector-list-comma-space-after": [
      "always-single-line"
    ],
    "selector-pseudo-element-colon-notation": [
      "double"
    ],
    "selector-type-no-unknown": null,
    "string-no-newline": null,
    "no-missing-end-of-source-newline": null,
    "no-descending-specificity": null,
    "no-duplicate-selectors": null,
    "unit-whitelist": [
      [
        "em",
        "rem",
        "s",
        "px",
        "%",
        "deg",
        "ms",
        "vh",
        "vw",
        "dppx",
        "dpi",
        "fr"
      ]
    ],
    "prettier/prettier": [
      true,
      {
        "singleQuote": false,
        "tabWidth": 2
      }
    ],
    "max-line-length": null,
    "function-comma-newline-after": null,
    "function-comma-newline-before": null,
    "function-comma-space-after": null,
    "function-comma-space-before": null,
    "function-max-empty-lines": null,
    "function-parentheses-newline-inside": null,
    "function-parentheses-space-inside": null,
    "value-list-comma-newline-after": null,
    "value-list-comma-newline-before": null,
    "value-list-comma-space-after": null,
    "value-list-comma-space-before": null,
    "value-list-max-empty-lines": null,
    "declaration-bang-space-after": [
      "never"
    ],
    "declaration-bang-space-before": [
      "always"
    ],
    "declaration-colon-space-after": null,
    "declaration-colon-space-before": null,
    "declaration-block-semicolon-newline-after": null,
    "declaration-block-semicolon-newline-before": null,
    "declaration-block-semicolon-space-after": null,
    "declaration-block-semicolon-space-before": null,
    "declaration-block-trailing-semicolon": null,
    "block-closing-brace-empty-line-before": null,
    "block-closing-brace-newline-after": null,
    "block-closing-brace-newline-before": null,
    "block-closing-brace-space-after": null,
    "block-closing-brace-space-before": null,
    "block-opening-brace-newline-after": null,
    "block-opening-brace-newline-before": null,
    "block-opening-brace-space-after": null,
    "block-opening-brace-space-before": null,
    "selector-attribute-brackets-space-inside": [
      "never"
    ],
    "selector-attribute-quotes": [
      "always"
    ],
    "selector-combinator-space-after": null,
    "selector-combinator-space-before": null,
    "selector-descendant-combinator-no-non-space": null,
    "selector-pseudo-class-parentheses-space-inside": [
      "never"
    ],
    "selector-list-comma-newline-before": null,
    "selector-list-comma-space-before": null,
    "media-feature-colon-space-after": [
      "always"
    ],
    "media-feature-colon-space-before": [
      "never"
    ],
    "media-feature-parentheses-space-inside": [
      "never"
    ],
    "media-query-list-comma-newline-after": null,
    "media-query-list-comma-newline-before": null,
    "media-query-list-comma-space-after": null,
    "media-query-list-comma-space-before": null,
    "at-rule-name-newline-after": null,
    "at-rule-name-space-after": [
      "always"
    ],
    "at-rule-semicolon-newline-after": null,
    "at-rule-semicolon-space-before": [
      "never"
    ],
    "color-hex-case": null,
    "number-no-trailing-zeros": null,
    "unit-case": null,
    "property-case": null,
    "selector-pseudo-class-case": null,
    "selector-pseudo-element-case": null,
    "selector-max-empty-lines": null,
    "media-feature-name-case": null,
    "at-rule-name-case": null,
    "no-extra-semicolons": null,
    "string-quotes": null
  },
  "plugins": [
    "/Users/st016lo/github/ng-sample-app/node_modules/stylelint-prettier/stylelint-prettier.js"
  ],
  "pluginFunctions": {}

When I run prettier on the file, in the Terminal I get single quotes.

st016lo:~/github/ng-sample-app/client/src (story/simplify_level1) $ /Users/st016lo/.nvm/versions/node/v0.1.0/bin/prettier styles.scss                 
@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/mixins';

@import '../node_modules/pb-design-system/sass/variables';
@import '../node_modules/pb-design-system/sass/mixins';

// project imports
@import 'shame';

@import 'home';
@import 'payments';
@import 'registration';
@import 'rewards';
@import 'dashboard';

(node:80905) ExperimentalWarning: The fs.promises API is experimental

When I create the folder as you suggested and ran npm run lint I get an error:

st016lo:~/Desktop/stylelint-test $ npm run lint

> [email protected] lint /Users/st016lo/Desktop/stylelint-test
> stylelint '*.css'

Error: No configuration provided for /Users/st016lo/Desktop/stylelint-test/index.css
    at module.exports (/Users/st016lo/Desktop/stylelint-test/node_modules/stylelint/lib/utils/configurationError.js:8:28)
    at searchForConfig.then.then.config (/Users/st016lo/Desktop/stylelint-test/node_modules/stylelint/lib/getConfigForFile.js:55:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 78
npm ERR! [email protected] lint: `stylelint '*.css'`
npm ERR! Exit status 78
npm ERR! 
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/st016lo/.npm/_logs/2019-05-08T13_13_03_565Z-debug.log

the debug.log is here

Now, in VSCode I have checked Prettier to be the formatter for SCSS files:

Screen Shot 2019-05-08 at 9 08 18 AM

Yet, if the status bar I still see the other one, too:

CleanShot 2019-05-08 at 09 09 00

from stylelint-prettier.

BPScott avatar BPScott commented on June 1, 2024

I am an idiot and it helps if I bother to include the inlined stylelint/prettier configs in my package.json example:

My package.json example should have been the following, sorry:

{
  "name": "test-issue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "stylelint '*.css'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "prettier": "^1.17.0",
    "stylelint": "^10.0.1",
    "stylelint-config-prettier": "^5.1.0",
    "stylelint-config-standard": "^18.3.0",
    "stylelint-prettier": "^1.0.7"
  },
  "stylelint": {
    "extends": [
      "stylelint-prettier/recommended"
    ]
  },
  "prettier": {
    "printWidth": 120,
    "singleQuote": true,
    "useTabs": false,
    "tabWidth": 2,
    "semi": true,
    "bracketSpacing": true
  }
}

That stylelint config looks reasonable (I was checking the value of the "string-quotes" property to see if it was accidentally set and conflicting with prettier).

One thing I've spotted is that you've seem to have stylelint and prettier installed globally but stylelint-prettier is installed in a project folder. I'd recommend installing specific stylelint and prettier versions into a project because you may need different versions on a per project basis. I don't think that'd affect this but who knows.

Are you able to host your repository somewhere I can take a look at it?

from stylelint-prettier.

smlombardi avatar smlombardi commented on June 1, 2024

Yes, now it catches the quotes on "home"

st016lo:~/Desktop/stylelint-test $ npm run lint

> [email protected] lint /Users/st016lo/Desktop/stylelint-test
> stylelint '*.css'

(node:38119) ExperimentalWarning: The fs.promises API is experimental

index.css
 1:9  ✖  Replace ""home"" with "'home'"   prettier/prettier

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] lint: `stylelint '*.css'`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/st016lo/.npm/_logs/2019-05-09T13_10_13_671Z-debug.log

Also, i DO have stylelint and prettier installed in the project:

  "dependencies": {
    "postcss": "7.0.14"
  },
  "devDependencies": {
    "prettier": "1.17.0",
    "stylelint": "10.0.1",
    "stylelint-config-prettier": "^5.1.0",
    "stylelint-config-standard": "18.3.0",
    "stylelint-prettier": "1.0.6"
  }
}

from stylelint-prettier.

BPScott avatar BPScott commented on June 1, 2024

Well I'm now at a loss. It clearly works but not with your project, which leads me to think it's not stylelint-prettier at fault but something in your config, though I have no idea what.

You've still not provided an example of running stylellint over your problematic file from the command line. Until I see that I'm still tempted to point the blame at VSCode doing something weird.

Also, i DO have stylelint and prettier installed in the project

Fair enough :) It seemed strange that when you ran stylelint and prettier their paths were not in your local node_modules but at some global path but perhaps you're using Yarn PnP or something like that.

st016lo:~/github/ng-sample-app/client/src (story/simplify_level1) $ /Users/st016lo/.nvm/versions/node/v10.1.0/bin/stylelint --print-config styles.scss 

st016lo:~/github/ng-sample-app/client/src (story/simplify_level1) $ /Users/st016lo/.nvm/versions/node/v0.1.0/bin/prettier styles.scss                 
``

from stylelint-prettier.

smlombardi avatar smlombardi commented on June 1, 2024

I am using NVM (node version manager) which allows switching the version of Node. Some old projects require and older version.

from stylelint-prettier.

BPScott avatar BPScott commented on June 1, 2024

Closing as unable to reproduce

from stylelint-prettier.

ModulesUnraveled avatar ModulesUnraveled commented on June 1, 2024

I know this is an old thread, but I read the whole thing looking for the answer since I was having the same issue...

In my case though, it turned out my prettier config file was mis-named. I had the file.prettier.json... which isn't a valid config file name. Once I changed it to .prettierrc.json my config was picked up correctly, and everything worked!

Hope that helps someone else.

from stylelint-prettier.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.