format

format

Author: Wscats

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "compile-hero.disable-compile-files-on-did-save-code": true
+}

CHANGELOG.md

@@ -5,9 +5,11 @@ All notable changes to the `Vue` extension will be documented in this file.
 - 2019.11.28 Update html sinppets
 - 2019.11.29 Update javascript sinppets
 - 2019.11.30 Delete useless configuration
-- 2019.12.1 Change the extension logo
-- 2019.12.2 Update html and javascript sinppets
-- 2019.12.3 Add vue snippets
+- 2019.12.01 Change the extension logo
+- 2019.12.02 Update html and javascript sinppets
+- 2019.12.03 Add vue snippets
+- 2020.08.22 Add syntax highlight
+- 2020.08.23 Support formatting
 
 # Unreleased
 

README.md

@@ -0,0 +1,34 @@
+const vscode = require("vscode");
+const statusBarUi = require("./status");
+const format = require('./format');
+
+function activate(context) {
+    let compileOff = vscode.commands.registerCommand("vue3snippets.compileOff", () => {
+        let config = vscode.workspace.getConfiguration("vue3snippets");
+        config.update("enable-compile-vue-file-on-did-save-code", true);
+        statusBarUi.StatusBarUi.watching();
+    });
+    let compileOn = vscode.commands.registerCommand("vue3snippets.compileOn", () => {
+        let config = vscode.workspace.getConfiguration("vue3snippets");
+        config.update("enable-compile-vue-file-on-did-save-code", false);
+        statusBarUi.StatusBarUi.notWatching();
+    });
+    context.subscriptions.push(compileOn);
+    context.subscriptions.push(compileOff);
+    vscode.workspace.onDidSaveTextDocument(() => {
+        let config = vscode.workspace.getConfiguration("vue3snippets");
+        let isEnableOnDidSaveTextDocument = config.get("enable-compile-vue-file-on-did-save-code");
+        if (!isEnableOnDidSaveTextDocument) { return };
+        let activeTextEditor = vscode.window.activeTextEditor;
+        if (activeTextEditor && activeTextEditor.document.languageId === 'vue') {
+            format.init();
+        } else {
+            vscode.window.showInformationMessage('It‘s not a .vue file');
+        }
+    });
+    statusBarUi.StatusBarUi.init(vscode.workspace.getConfiguration("vue3snippets").get("enable-compile-vue-file-on-did-save-code"));
+}
+exports.activate = activate;
+function deactivate() {
+}
+exports.deactivate = deactivate;

extension.js

@@ -0,0 +1,195 @@
+const {
+    window,
+    Position,
+    Range,
+    workspace
+} = require('vscode');
+const beautify = require('js-beautify');
+const pugBeautify = require('pug-beautify');
+const {
+    breakTagAttr
+} = require('./plugins');
+let defaultConf = require('./js-beautify.conf');
+let editor;
+
+let methods = {
+    doc: null,
+    text: '',
+    newText: '',
+    lineCount: 1,
+    jsBeautifyConf: defaultConf['js-beautify'],
+    pugBeautifyConf: defaultConf['pug-beautify'],
+    editorConf: {},
+    init() {
+        // 活动窗口tab
+        editor = window.activeTextEditor;
+        if (!editor) throw new Error('no active editor');
+        // 当前窗口document
+        this.doc = editor.document;
+        // 获取配置
+        this.getConfig();
+
+        // 行数
+        this.lineCount = this.doc.lineCount;
+        // 内容
+        this.text = this.doc.getText();
+        // 每次执行清空格式化后的内容
+        this.newText = '';
+        // 分别处理 html(pug)、css、js
+        this.splitContent(this.text);
+        // 内容回写到文件
+        this.writeFile();
+    },
+    splitContent(text) {
+        let formatNeed = this.vueFormatConf.format_need || ['html', 'js', 'css'];
+
+        let htmlText = text.match(/<template[\w\W]+<\/template>\s?/);
+        let jsText = text.match(/<script[\w\W]+<\/script>\s?/);
+        let cssText = text.match(/<style[\w\W]+<\/style>\s?/);
+
+        if (htmlText && formatNeed.includes('html')) {
+            text = text.replace(htmlText[0], this.beautyHtml(htmlText[0]) + '\n');
+        }
+        if (jsText && formatNeed.includes('js')) {
+            let jsArr = jsText[0].split(/<\/script>\n*/);
+            jsArr.forEach((item, index) => {
+                let pre = '';
+                if (index === 0) {
+                    pre = '\n';
+                }
+                let str = item + '</script>';
+                text = item ? text.replace(str, pre + this.beautyJs(str)) : text;
+            });
+        }
+        if (cssText && formatNeed.includes('css')) {
+            let cssArr = cssText[0].split(/<\/style>\n*/);
+            cssArr.forEach((item, index) => {
+                let pre = '';
+                if (index === 0) {
+                    pre = '\n';
+                }
+                let str = item + '</style>';
+                text = item ? text.replace(str, pre + this.beautyCss(str)) : text;
+            });
+        }
+        this.newText = text.replace(/(\n|\t|\r)\s*(\n|\t|\r){2,}/g, '$1$1').trim() + '\n';
+    },
+    mergeFormatTag(arrUnFormat = [], arrForceFormat = []) {
+        arrForceFormat.forEach(item => {
+            let index = arrUnFormat.indexOf(item);
+            if (index > -1) {
+                arrUnFormat.splice(index, 1);
+            }
+        });
+        return arrUnFormat;
+    },
+    beautyHtml(text) {
+        let str = '';
+        let defaultHtmlOptions = beautify.html.defaultOptions();
+        let htmlUnFormat = defaultHtmlOptions.inline;
+        let indentRoot = this.vueFormatConf['html_indent_root'] || false;
+        let functional = /<template[^>]*\s+functional/.test(text) ? ' functional' : '';
+        let lang = this.getLang(text);
+
+        text = indentRoot ? text : text.replace(/<template[^>]*>([\w\W]+)<\/template>/, '$1');
+        if (/pug/.test(lang)) {
+            str = pugBeautify(text, this.pugBeautifyConf)
+                .trim();
+        } else {
+            let tempConf = Object.assign(this.jsBeautifyConf, this.jsBeautifyConf.html);
+            str = beautify.html(text, tempConf);
+            if (tempConf.wrap_attributes == 'auto' && +this.vueFormatConf.break_attr_limit > -1) {
+                str = breakTagAttr(str, +this.vueFormatConf.break_attr_limit, {
+                    indentSize: +this.jsBeautifyConf.indent_size,
+                    attrEndWithGt: this.vueFormatConf.attr_end_with_gt,
+                    tempConf: Object.assign(tempConf, {
+                        unBreakAttrList: htmlUnFormat
+                    })
+                });
+            }
+        }
+
+        return indentRoot ? `${str}\n` : `<template${lang}${functional}>\n${str}\n</template>\n`;
+    },
+    beautyCss(text) {
+        let scoped = /<style[^>]*\s+scoped/.test(text) ? ' scoped' : '';
+        let lang = this.getLang(text);
+        let str = text;
+        text = text.replace(/<style[^>]*>([\w\W]*)<\/style>/, '$1');
+        if (text.trim()) {
+            let tempConf = Object.assign({}, this.jsBeautifyConf, this.jsBeautifyConf.css);
+            str = beautify.css(text, tempConf);
+            return `<style${lang}${scoped}>\n${str}\n</style>`;
+        } else {
+            return str;
+        }
+    },
+    beautyJs(text) {
+        let scoped = /<script[^>]*\s+scoped/.test(text) ? ' scoped' : '';
+        let lang = this.getLang(text);
+        let str = text;
+        text = text.replace(/<script[^>]*>([\w\W]*)<\/script>/, '$1');
+        if (text.trim()) {
+            let tempConf = Object.assign({}, this.jsBeautifyConf, this.jsBeautifyConf.js);
+            str = beautify.js(text, tempConf);
+            return `<script${lang}${scoped}>\n${str}\n</script>`;
+        } else {
+            return str;
+        }
+    },
+    getLang(text) {
+        let lang = text.match(/lang=(["'])([a-zA-Z\-\_]*)\1/, '$2');
+        return lang && ` lang="${lang.pop()}"` || '';
+    },
+    writeFile() {
+        let start = new Position(0, 0);
+        let end = new Position(this.lineCount + 1, 0);
+        let range = new Range(start, end);
+        editor.edit((editBuilder, error) => {
+            error && window.showErrorMessage(error);
+            editBuilder.replace(range, this.newText);
+        });
+    },
+    getConfig() {
+
+        this.editorConf = Object.assign({}, workspace.getConfiguration('editor'));
+        this.initDefaultJsBConf(this.jsBeautifyConf);
+        let vueFormatConf = workspace.getConfiguration('vue3snippets');
+        this.vueFormatConf = vueFormatConf;
+        if (!vueFormatConf) {
+            return;
+        }
+        let jsBConf = vueFormatConf.get('js-beautify') || {};
+        this.mergeBeautifyConf(jsBConf, 'jsBeautifyConf');
+        let pugBConf = vueFormatConf.get('pug-beautify') || {};
+        this.mergeBeautifyConf(pugBConf, 'pugBeautifyConf');
+    },
+    initDefaultJsBConf(conf) {
+        this.jsBeautifyConf.indent_size = this.editorConf.tabSize;
+        if (this.editorConf.insertSpaces) {
+            this.jsBeautifyConf.indent_char = ' ';
+        } else {
+            this.indent_with_tabs = true;
+        }
+    },
+    mergeBeautifyConf(conf, type) {
+        for (let k in conf) {
+            let cont = conf[k];
+            if (typeof cont === 'string') {
+                let teMatch = cont.match(/editor\.(\w+)/g);
+                if (teMatch) {
+                    let editKey = teMatch[0].replace('editor.', '');
+                    cont = this.editorConf[editKey];
+                }
+            }
+            if (cont instanceof Object) {
+                Object.assign(this[type][k], cont);
+            } else {
+                this[type][k] = cont;
+            }
+        }
+        return this[type];
+    }
+};
+
+module.exports = methods;

format/index.js

@@ -0,0 +1,22 @@
+module.exports = {
+    "html_indent_root": false,
+    "break_attr_limit": -1,
+    "attr_end_with_gt": true,
+    "format_need": ["html", "js", "css"],
+    "js-beautify": {
+        "indent_size": "editor.tabSize",
+        "indent_char": " ",
+        "indent_with_tabs": false,
+        "brace-style": "collapse",
+        "space_after_anon_function": true,
+        "css": {},
+        "js": {},
+        "html": {
+            "force_format": ["template"],
+            "wrap_attributes": "auto"
+        }
+    },
+    "pug-beautify": {
+        "fill_tab": false
+    }
+};

format/js-beautify.conf.js

@@ -0,0 +1,70 @@
+/**
+ * 强制多属性换行
+ * @param {String} str 需要格式化的字符串
+ * @param {Number} breakLimitNum 多余这个数量的属性，才会断行
+ */
+
+function breakTagAttr(str = '', breakLimitNum = 1, opt = {
+    indentSize: 4,
+    attrEndWithGt: true,
+    tempConf: {}
+}) {
+    if (breakLimitNum === -1) {
+        return str;
+    }
+    let {
+        indentSize,
+        attrEndWithGt,
+        tempConf
+    } = opt;
+    let {
+        unBreakAttrList
+    } = tempConf;
+    let padIndent = ' '.repeat(indentSize);
+    const TAG_REG = /[\n\r\t]*(\s*)\<[A-z\-\_0-9]+/;
+    const TAG_END_REG = /\s*(>|\/>)/;
+    const TAG_NAME_REG = /\<([A-z][\w\-]*)/;
+
+    const ATTR_REG = /(\s(\:|\@)?[A-z0-9\-\_\.\:]+(=("[^"]*"|'[^']+'|`[^`]+`|[A-z0-9\_]+))?)/g;
+    const TAG_ATTR_REG = new RegExp(TAG_REG.source + ATTR_REG.source + '+' + TAG_END_REG.source, 'g');
+    const TAG_CLOSE_REG = new RegExp(TAG_END_REG.source + '$');
+
+    let loop = true;
+    while (loop) {
+        // 匹配带有属性的 start tag
+        let res = TAG_ATTR_REG.exec(str);
+        if (res) {
+            // 缩进
+            let indent = res[1];
+            // tag 内容
+            let tagContent = res[0];
+            let tagName = tagContent.match(TAG_NAME_REG);
+            if (unBreakAttrList.includes(tagName[1])) {
+                // 行内标签
+                continue;
+            }
+            // console.log(tagContent + '\n\n');
+            // 匹配 tagContent 的 attr
+            let matchRes = tagContent.match(ATTR_REG);
+            // matchRes 处理
+            // console.log(matchRes);
+            if (matchRes.length > breakLimitNum) { // 一个属性强制断行，或者多属性
+                // 每个 attr 先 trim,然后加换行，空格
+                let newStr = tagContent.replace(ATTR_REG, (match, $1) => {
+                    return '\n' + indent + padIndent + $1.trim();
+                });
+                // tag 结束括号换行
+                newStr = attrEndWithGt ? newStr : newStr.replace(TAG_CLOSE_REG, '\n' + indent + '$1');
+                // 替换整个字符串中的对应内容
+                str = str.replace(tagContent, newStr);
+            }
+        } else {
+            loop = false;
+        }
+    }
+    return str;
+}
+
+module.exports = {
+    breakTagAttr
+};