web前端格式化缩进Razor代码，razor format
上效果图，利用js-beautify美化Razor代码格式化，缩进
如果直接用js-beautify格式化razor代码，结果如下所示，看起来不美观的地方已经标记
解决方案
对js-beautify美化razor代码的结果，在做一些针对razor的特殊处理
JavaScript 全选
// 格式化html
$("#format_pluginHtml").click(function() {
try {
// 获得CoeMirror组件代码内容
var source = editorPluginHtml.getValue();
// 使用js-beautify格式化代码
var output = new beautifyHelper().beautify(source, 'html')
// 更新美化的代码到组件，beautify不支持razor，直接用结果会存在一些缩进问题
//editorPluginHtml.setValue(output);
//return
// 添加一些razor的配置，按行来
var lines = output.split('\n') var addTabSize = 0;
var tag_blocks = [];
lines.forEach((value, index, arr) = >{
var txt = value.trim() if (txt == '}') {
// 遇到razor 代码块结尾，随后的行减少一个缩进
if (tag_blocks.length == 0 || tag_blocks[tag_blocks.length - 1] == 'razor') addTabSize -= 1;
tag_blocks.pop()
}
if (addTabSize > 0) {
var str = ''
for (var i = 0; i < addTabSize; i++) str += ' '
// 代码增加一个razor缩进
arr[index] = str + value;
}
if (txt == '@{' || txt == '{') {
// 如果当前行是@{ 或者 {,随后的行增加一个缩进
addTabSize += 1;
tag_blocks.push('razor')
} else {
var _v = (value.split('{').length - 1) - (value.split('}').length - 1) if (_v > 0) {
tag_blocks.push('other');
}
}
});
var cursor = editorCode.getCursor() var scroller_y = editorCode.getScrollInfo().top;
editorCode.setValue(lines.join('\n'));
editorCode.setCursor(cursor) editorCode.scrollTo(0, scroller_y)
} catch(err) {
console.log(err.message)
} finally {
return false;
}
})效果如下，基本达到要求，如果还存在不合理之处的，可以再根据实际情况自行调整代码
beautifyHelper,类库
JavaScript 全选
class beautifyHelper {
beautify(source, language) {
//var language = "js";// js html css
var opts = {
indent_size: "2",
indent_char: " ",
max_preserve_newlines: "5",
preserve_newlines: true,
keep_array_indentation: false,
break_chained_methods: false,
indent_scripts: "normal",
brace_style: "collapse",
space_before_conditional: true,
unescape_strings: false,
jslint_happy: false,
end_with_newline: false,
wrap_line_length: "0",
indent_inner_html: false,
comma_first: false,
e4x: false,
indent_empty_lines: false
};
var the = this;
var output = "";
if (language === 'html') {
output = html_beautify(source, opts);
} else if (language === 'css') {
output = css_beautify(source, opts);
} else {
if ($('#detect-packers').prop('checked')) {
source = this.unpacker_filter(source);
}
output = js_beautify(source, opts);
}
return output;
};
mergeObjects(allOptions, additionalOptions) {
var finalOpts = {};
var name;
for (name in allOptions) {
finalOpts[name] = allOptions[name];
}
for (name in additionalOptions) {
finalOpts[name] = additionalOptions[name];
}
return finalOpts;
};
unpacker_filter(source) {
var leading_comments = ''
var comment = ''
var unpacked = ''
var found = false
// cuts leading comments
do {
found = false;
if (/^\s*\/\*/.test(source)) {
found = true;
comment = source.substr(0, source.indexOf('*/') + 2);
source = source.substr(comment.length);
leading_comments += comment;
} else if (/^\s*\/\//.test(source)) {
found = true;
comment = source.match(/^\s*\/\/.*/)[0];
source = source.substr(comment.length);
leading_comments += comment;
}
} while (found);
leading_comments += '\n';
source = source.replace(/^\s+/, '');
var unpackers = [P_A_C_K_E_R, Urlencoded, JavascriptObfuscator /*, MyObfuscate*/];
for (var i = 0; i < unpackers.length; i++) {
if (unpackers[i].detect(source)) {
unpacked = unpackers[i].unpack(source);
if (unpacked !== source) {
source = unpacker_filter(unpacked);
}
}
}
return leading_comments + source;
};
}
版权声明：本文为YES开发框架网发布内容,转载请附上原文出处连接
post 管理员
