mrmlnc/vscode-stylefmt

Doesn't working for VS Code 1.11.2, etc.

svipas opened this issue · 6 comments

svipas commented

Hello,

  1. It doesn't works for VS Code 1.11.2, tried format with ALT+SHIFT+F and F1 selecting stylefmt: Format CSS, but nothing happens...

For e.g. trying to format this code, but nothing happens, I even tried to install stylefmt itself with yarn, but it was same...

body {margin: 0;
padding: 0;
}

  1. It will be very cool to format it with CTRL + SHIFT + I, for e.g. in prettier which formats JS this keybind is enabled so it will be very cool to have it for stylefmt too, 1 keybind for all formattings, instead of 2.

  2. Need update stylefmt, because it is now 5.3.2 not 5.3.0.

svipas commented
  1. I know why it doesn't working, after I deleted my .stylelintrc file it started to work, so something is bad with plugin, because my file is correct since I'm getting stylelint warnings/errors in VS Code, etc.

Here is my .stylelintrc config:

{
  "rules": {
    # Disallow invalid hex colors.
    "color-no-invalid-hex": true,
    # Specify whether or not quotation marks should be used around font family names.
    "font-family-name-quotes": "always-where-recommended",
    # Disallow duplicate font family names.
    "font-family-no-duplicate-names": true,
    # Require numeric or named (where possible) font-weight values.
    "font-weight-notation": "named-where-possible",
    # Disallow an unspaced operator within `calc` functions.
    "function-calc-no-unspaced-operator": true,
    # Disallow direction values in `linear-gradient()` calls that are not valid according to the standard syntax.
    "function-linear-gradient-no-nonstandard-direction": true,
    # Limit the number of adjacent empty lines within functions.
    "function-max-empty-lines": 0,
    # Disallow scheme-relative urls.
    "function-url-no-scheme-relative": true,
    # Require or disallow quotes for urls.
    "function-url-quotes": "always",
    # Require or disallow whitespace after functions.
    "function-whitespace-after": "always",
    # Require or disallow a leading zero for fractional numbers less than 1.
    "number-leading-zero": "always",
    # Limit the number of decimal places allowed in numbers.
    "number-max-precision": 2,
    # Disallow trailing zeros in numbers.
    "number-no-trailing-zeros": true,
    # Disallow (unescaped) newlines in strings.
    "string-no-newline": true,
    # Specify single or double quotes around strings.
    "string-quotes": "single",
    # Disallow units for zero lengths.
    "length-zero-no-unit": true,
    # Specify the minimum number of milliseconds for time values.
    "time-min-milliseconds": 100,
    # Specify lowercase or uppercase for units.
    "unit-case": "lower",
    # Disallow unknown units.
    "unit-no-unknown": true,
    # Specify lowercase or uppercase for keywords values.
    "value-keyword-case": "lower",
    # Disallow vendor prefixes for values.
    "value-no-vendor-prefix": true,
    # Limit the number of adjacent empty lines within value lists.
    "value-list-max-empty-lines": 0,
    # Require or disallow an empty line before custom properties.
    "custom-property-empty-line-before": "never",
    # Disallow redundant values in shorthand properties.
    "shorthand-property-no-redundant-values": true,
    # Specify lowercase or uppercase for properties.
    "property-case": "lower",
    # Disallow unknown properties.
    "property-no-unknown": true,
    # Disallow vendor prefixes for properties.
    "property-no-vendor-prefix": true,
    # Disallow `!important` within keyframe declarations.
    "keyframe-declaration-no-important": true,
    # Require a single space or disallow whitespace after the colon of declarations.
    "declaration-colon-space-after": "always",
    # Require a single space or disallow whitespace before the colon of declarations.
    "declaration-colon-space-before": "never",
    # Require or disallow an empty line before declarations.
    "declaration-empty-line-before": "never",
    # Disallow `!important` within declarations.
    "declaration-no-important": true,
    # Disallow duplicate properties within declaration blocks.
    "declaration-block-no-duplicate-properties": true,
    # Disallow longhand properties that can be combined into one shorthand property.
    "declaration-block-no-redundant-longhand-properties": true,
    # Disallow shorthand properties that override related longhand properties within declaration blocks.
    "declaration-block-no-shorthand-property-overrides": true,
    # Require a newline or disallow whitespace after the semicolons of declaration blocks.
    "declaration-block-semicolon-newline-after": "always",
    # Require a single space or disallow whitespace before the semicolons of declaration blocks.
    "declaration-block-semicolon-space-before": "never",
    # Limit the number of declaration within single line declaration blocks.
    "declaration-block-single-line-max-declarations": 1,
    # Require or disallow a trailing semicolon within declaration blocks.
    "declaration-block-trailing-semicolon": "always",
    # Require or disallow an empty line before the closing brace of blocks.
    "block-closing-brace-empty-line-before": "never",
    # Require a newline or disallow whitespace after the closing brace of blocks.
    "block-closing-brace-newline-after": "always",
    # Disallow empty blocks.
    "block-no-empty": true,
    # Require or disallow quotes for attribute values.
    "selector-attribute-quotes": "always",
    # Require a single space or disallow whitespace after the combinators of selectors.
    "selector-combinator-space-after": "always",
    # Require a single space or disallow whitespace before the combinators of selectors.
    "selector-combinator-space-before": "always",
    # Disallow non-space characters for descendant combinators of selectors.
    "selector-descendant-combinator-no-non-space": true,
    # Limit the number of compound selectors in a selector.
    "selector-max-compound-selectors": 3,
    # Disallow attribute selectors.
    "selector-no-attribute": true,
    # Disallow vendor prefixes for selectors.
    "selector-no-vendor-prefix": true,
    # Specify lowercase or uppercase for pseudo-class selectors.
    "selector-pseudo-class-case": "lower",
    # Disallow unknown pseudo-class selectors.
    "selector-pseudo-class-no-unknown": [
      true,
      {
        # The following pseudo classes are ignored.
        "ignorePseudoClasses": [
          "local",
          "global"
        ]
      }
    ],
    # Specify lowercase or uppercase for pseudo-element selectors.
    "selector-pseudo-element-case": "lower",
    # Specify single or double colon notation for applicable pseudo-elements.
    "selector-pseudo-element-colon-notation": "single",
    # Disallow unknown pseudo-element selectors.
    "selector-pseudo-element-no-unknown": true,
    # Specify lowercase or uppercase for type selector.
    "selector-type-case": "lower",
    # Disallow unknown type selectors.
    "selector-type-no-unknown": true,
    # Limit the number of adjacent empty lines within selectors.
    "selector-max-empty-lines": 0,
    # Require a single space or disallow whitespace after the commas of selector lists.
    "selector-list-comma-space-after": "always",
    # Require a single space or disallow whitespace before the commas of selector lists.
    "selector-list-comma-space-before": "never",
    # Require or disallow an empty line before rules.
    "rule-empty-line-before": "always",
    # Require a single space or disallow whitespace after the colon in media features.
    "media-feature-colon-space-after": "always",
    # Require a single space or disallow whitespace before the colon in media features.
    "media-feature-colon-space-before": "never",
    # Specify lowercase or uppercase for media feature names.
    "media-feature-name-case": "lower",
    # Disallow unknown media feature names.
    "media-feature-name-no-unknown": true,
    # Disallow vendor prefixes for media feature names.
    "media-feature-name-no-vendor-prefix": true,
    # Require a single space or disallow whitespace on the inside of the parentheses within media features.
    "media-feature-parentheses-space-inside": "never",
    # Require a single space or disallow whitespace after the range operator in media features.
    "media-feature-range-operator-space-after": "always",
    # Require a single space or disallow whitespace before the range operator in media features.
    "media-feature-range-operator-space-before": "always",
    # Require a single space or disallow whitespace after the commas of media query lists.
    "media-query-list-comma-space-after": "always",
    # Require a single space or disallow whitespace before the commas of media query lists.
    "media-query-list-comma-space-before": "never",
    # Require or disallow an empty line before at-rules.
    "at-rule-empty-line-before": "always",
    # Specify lowercase or uppercase for at-rules names.
    "at-rule-name-case": "lower",
    # Require a single space after at-rule names.
    "at-rule-name-space-after": "always",
    # Disallow unknown at-rules.
    "at-rule-no-unknown": true,
    # Disallow vendor prefixes for at-rules.
    "at-rule-no-vendor-prefix": true,
    # Require a newline after the semicolon of at-rules.
    "at-rule-semicolon-newline-after": "always",
    # Require a single space or disallow whitespace before the semicolons of at rules.
    "at-rule-semicolon-space-before": "always",
    # Limit the depth of nesting.
    "max-nesting-depth": 2,
    # Disallow selectors of lower specificity from coming after overriding selectors of higher specificity.
    "no-descending-specificity": true,
    # Disallow duplicate selectors.
    "no-duplicate-selectors": true,
    # Disallow extra semicolons.
    "no-extra-semicolons": true,
    # Disallow double-slash comments `(//...)` which are not supported by CSS.
    "no-invalid-double-slash-comments": true,
    # Disallow unknown animations.
    "no-unknown-animations": true
  }
}

P.S. Removed # comments but issue was same. I'm using latest stylelint.
P.S.S. Seems it is, because of this new rule added "at-rule-semicolon-space-before": "always", in stylelint 7.10.0 version, so you need to update stylefmt and stylelint if it's used in plugin.

svipas commented

In short: for 1. and 3. you need to update stylefmt to latest version which is 5.3.2 and the problem will be fixed (I think so, because it doesn't working only if new rule is added in .stylelintrc config). About 2., it will be very cool if it can format with CTRL + SHIFT + I as it is right now with all formatters, but if you don't have time better do 1. and 3. to make it usable.

Thanks.

mrmlnc commented

Yeap, thanks for your work. I can do it (update stylefmt and stylelint) today, but later. But I am against adding CTRL + SHIFT + I, because it's very unstable now (see mrmlnc/vscode-attrs-sorter#31 and microsoft/vscode#21967).

svipas commented

@mrmlnc Right now VS Code is 1.11.2, maybe it's fixed. If you have time and it isn't hard to make it to format with CTRL + SHIFT + I I can give a try to test it. You can check this plugin to format JS (prettier-vscode), they are using CTRL + SHIFT + I, maybe you will find something in their source code.

mrmlnc commented

Updated to the latest version of stylefmt. Please, create separated issue for CTRL + SHIFT + I format :)

svipas commented

@mrmlnc Thank you, tested everything right now works correctly!

  • 👍1