ritwickdey / vscode-live-sass-compiler

Compile Sass or Scss file to CSS at realtime with live browser reload feature.
https://ritwickdey.github.io/vscode-live-sass-compiler/
MIT License
660 stars 168 forks source link

Indent size "indent" and "useTabs" #492

Open DoggyXomaX opened 3 years ago

DoggyXomaX commented 3 years ago

Just modified the plugin for myself as the required settings were not found.\ P.S. I'm not an active github user (newbie), but I want to offer a good feature.\ P.P.S. Also, I have not dealt with plugins for VSCode before.

  1. I added two parameters "indent" and "useTabs" in package.json at liveSassCompile.settings.formats:

    "default": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": null,
        "indent": 2,
        "useTabs": false
    }
    ],
    "minItems": 1,
    "items": {
    "type": "object",
    "properties": {
        ...
        "indent": {
            "description": "Set indentation value for spaces.\nNote: this parameter has no effect when the parameter useTabs is set to true.",
            "type": "integer",
            "default": 2
        },
        "useTabs": {
            "description": "Set it as `true` if you want to use tabs instead of spaces.",
            "type": "boolean",
            "default": false
        }
    },
    ...
    }
  2. In appModel.js i added function validateIndentSize(indent) under getCssStyle(format)

getCssStyle(format) {
    /* . . . */
}
validateIndentSize(indent) {
    let outputStyleIndent = indent || 2;
    outputStyleIndent = (outputStyleIndent < 1 ? 1 : (outputStyleIndent > 10 ? 10 : outputStyleIndent));
    return outputStyleIndent;
}
  1. And also applied the indent to the options in function GenerateAllCssAndMap at formats.forEach(format => { . . . }):
    formats.forEach(format => {
    let options = this.getCssStyle(format.format);
    let cssMapUri = this.generateCssAndMapUri(sassPath, format.savePath, format.extensionName);
    let useTabs = format.useTabs || false;
    if (useTabs) {
        options['indent'] = '\t';
    } else {
        let indentSize = this.validateIndentSize(format.indent);
        options['indent'] = ' '.repeat(indentSize);
    }
    promises.push(this.GenerateCssAndMap(sassPath, cssMapUri.css, cssMapUri.map, options));
    });

I really hope that you will add this feature in the future.