Question

我正在使用Gulp插件gulp-jsbeautifier在文件内容更改后自动格式化项目的源代码。

该插件能够以我想要的方式完美地格式化JavaScript源代码，而且它很漂亮！

但是当我尝试扩展此功能以格式化SCSS时，它会将所有内容更改为单行文件。

这是一个SCSS 输入示例 ：

dg-login {

    height: 470px;
    width: 440px;
    border-radius: 15px;
    background-color: #001d40;
    background-image: radial-gradient(#28bae2, #001d40);
    display: block;

    & > div:not(#compatibleBrowsers) {
        padding: 48px;
        img {
            &#dglogo {
                margin: {
                    top: 20px;
                    bottom: 20px;
                }
            }
            width: 130px;
        }

        input {
            height: 40px;
        }
    }

    #compatibleBrowsers { 
        position : absolute;
        right: 70px;
        bottom: 30px;
    }
}

这就是“格式化的”输出：

dg-login { height: 470px; width: 440px; border-radius: 15px; background-color: #001d40; background-image: radial-gradient(#28bae2, #001d40); display: block; & > div:not(#compatibleBrowsers) { padding: 48px; img { &#dglogo { margin: { top: 20px; bottom: 20px; } } width: 130px; } input { height: 40px; } } #compatibleBrowsers { position : absolute; right: 70px; bottom: 30px; } }

不幸的是，我不想最小化SCSS源代码，它们确实被最小化，但是在构建的后续步骤中，而不是源代码维护。

这是我的 .jsbeautifyrc 文件：

{
  "html": {
    "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"],
    "brace_style": "collapse",
    "end_with_newline": true,
    "indent_char": " ",
    "indent_handlebars": false,
    "indent_inner_html": true,
    "indent_scripts": "keep",
    "indent_size": 2,
    "max_preserve_newlines": 0,
    "preserve_newlines": true,
    "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"],
    "wrap_line_length": 0
  },
  "css": {
    "allowed_file_extensions": ["css", "scss", "sass", "less"],
    "end_with_newline": true,
    "indent_char": " ",
    "indent_size": 2,
    "selector_separator": " ",
    "selector_separator_newline": false
  },
    "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
    "brace_style": "collapse",
    "break_chained_methods": false,
    "e4x": false,
    "end_with_newline": true,
    "indent_char": " ",
    "indent_level": 0,
    "indent_size": 2,
    "indent_with_tabs": false,
    "jslint_happy": false,
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "max_preserve_newlines": 0,
    "preserve_newlines": true,
    "space_after_anon_function": false,
    "space_before_conditional": true,
    "space_in_empty_paren": false,
    "space_in_paren": false,
    "unescape_strings": false,
    "wrap_line_length": 0
  }
}

最后， gulpfile.js 中定义的手表：

gulp.watch([
     'app/' + project.jsSrcFolder + '/**/*.js',
     'app/' + project.scssSrcFolder + '/**/*.scss'
   ], function(event) {
    if (event.type === 'changed') {
      gulp.src(event.path)
        .pipe(prettify({config: '.jsbeautifyrc', mode: 'VERIFY_AND_WRITE'}))
        .pipe(gulp.dest(event.path.substring(0, event.path.lastIndexOf('/'))));
    }
  });

对我而言，"css"上定义的.jsbeautifyrc规则未应用于SCSS文件，但也许我的部分可能存在错误配置。有什么帮助吗？

gulp-jsbeautifier无法正确美化SCSS

0 个答案: