Javascript 大口JS美容罐'；不能正确地美化SCS

我使用插件在文件内容更改后自动格式化项目的源代码

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

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

这是一个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; } }

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('/'))));
    }
  });

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

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; } }

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('/'))));
    }
  });

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

这是我的.jsc文件：

{
  "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中定义的手表：

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; } }

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('/'))));
    }
  });

---

在我看来，在

.jsc

上定义的

“css”

规则没有应用于

SCSS

文件，但我的部分可能存在配置错误。有什么帮助吗？

js beautify是否声称支持SCS？我不这么认为。这应该是GitHub repo中的一个功能请求。@TJ引用他们的手册页面：

文件类型

类型：

数组

css的默认值：

['.css'、'.less'、'.sass'、'.scss']

。。。所以他们试图在

.scss

上应用CSS格式化程序。。。不知道这会怎样。。。你有没有试着提出一个bug（如果还没有的话）？