0.0.6 add config

win7killer · win7killer · commit 3fe44d5f344f · 2018-04-13T18:40:36.000+08:00
diff --git a/extension.js b/extension.js
@@ -7,7 +7,13 @@ const formatInit = require('./src');
 function activate(context) {
     // 注册命令，该命令和package.json中命令一致
     let disposable = vscode.commands.registerCommand('extension.vueFormat', function () {
-        formatInit.init();
+        let acEditor = vscode.window.activeTextEditor;
+
+        if (acEditor && acEditor.document.languageId === 'vue') {
+            formatInit.init();
+        } else {
+            vscode.window.showInformationMessage('It‘s not a .vue file');
+        }
         // vscode.window.showInformationMessage('vue format now');
     });
 
diff --git a/js-beautify.conf.json b/js-beautify.conf.json
@@ -1,9 +1,15 @@
 {
-    "indent_size": 4,
-    "indent_char": " ",
-    "space_after_anon_function": true,
-    "keep_array_indentation": true,
-    "css": {},
-    "js": {},
-    "html": {}
+    "js-beautify": {
+        "indent_size": "editor.tabSize",
+        "indent_char": " ",
+        "indent_with_tabs": false,
+        "brace-style": "collapse",
+        "space_after_anon_function": true,
+        "css": {},
+        "js": {},
+        "html": {}
+    },
+    "pug-beautify": {
+        "fill_tab": false
+    }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "vue-format",
     "displayName": "vue-format",
     "description": "",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "publisher": "febean",
     "engines": {
         "vscode": "^1.22.0"
@@ -19,49 +19,45 @@
         "url": "https://github.com/win7killer/vue-format"
     },
     "main": "./extension",
-
     "contributes": {
         "configuration": {
             "type": "object",
             "title": "vue-format",
             "properties": {
-                "vue-format.config": {
+                "vue-format.js-beautify": {
                     "type": "object",
                     "default": {
-                        "indent_size": 4,
+                        "indent_size": "editor.tabSize",
                         "indent_char": " ",
                         "indent_with_tabs": false,
+                        "brace-style": "collapse",
                         "space_after_anon_function": true,
-                        "css": {
-                            "indent_size": 4
-                        },
-                        "js": {
-                            "indent_size": 4,
-                            "brace-style": "collapse"
-                        },
-                        "html": {
-                            "indent_size": 4
-                        }
+                        "css": {},
+                        "js": {},
+                        "html": {}
                     },
                     "description": "The config use some js-beautify options, see js-beautify.（使用js-beautify配置项，详情查看js-beautify）"
+                },
+                "vue-format.pug-beautify": {
+                    "type": "object",
+                    "default": {
+                        "fill_tab": false
+                    },
+                    "description": "The config use some pug-beautify options, see pug-beautify.（使用pug-beautify配置项，详情查看pug-beautify）"
                 }
             }
         },
-        "commands": [
-            {
+        "commands": [{
+            "when": "resourceLangId == vue",
+            "command": "extension.vueFormat",
+            "title": "Vue Format"
+        }],
+        "menus": {
+            "editor/context": [{
                 "when": "resourceLangId == vue",
                 "command": "extension.vueFormat",
-                "title": "Vue Format"
-            }
-        ],
-        "menus": {
-            "editor/context": [
-                {
-                    "when": "resourceLangId == vue",
-                    "command": "extension.vueFormat",
-                    "group": "navigation"
-                }
-            ]
+                "group": "navigation"
+            }]
         }
     },
     "scripts": {
@@ -76,6 +72,7 @@
         "@types/mocha": "^2.2.42"
     },
     "dependencies": {
-        "js-beautify": "^1.7.5"
+        "js-beautify": "^1.7.5",
+        "pug-beautify": "^0.1.1"
     }
 }
diff --git a/src/index.js b/src/index.js
@@ -2,78 +2,83 @@
  * @file 格式化 单vue组件 文件
  * @author fe_bean
  */
-
-const {window, Position, Range, workspace} = require('vscode');
+const {
+    window,
+    Position,
+    Range,
+    workspace
+} = require('vscode');
 const beautify = require('js-beautify');
-
-// let terminal = window.createTerminal({name: "xmake"});
-// terminal.show(true);
-// terminal.sendText("xmake");
-
+const pugBeautify = require('pug-beautify');
+let defaultConf = require('../js-beautify.conf.json');
 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;
-        // let conf = workspace.getConfiguration('vue-format');
-        // let ss = typeof conf.config + '';
-        // console();
+        // 获取配置
+        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 htmlText = text.match(/[\w\W]+<\/template>\s?/)[0];
-        let jsText = text.match(/<script[\w\W]+<\/script>\s?/)[0];
-        let cssText = text.match(/<style[\w\W]+<\/style>\s?/)[0];
-        this.newText += this.beautyHtml(htmlText);
-        this.newText += this.beautyJs(jsText);
-        this.newText += this.beautyCss(cssText);
+        let htmlText = text.match(/[\w\W]+<\/template>\s?/);
+        let jsText = text.match(/<script[\w\W]+<\/script>\s?/);
+        let cssText = text.match(/<style[\w\W]+<\/style>\s?/);
+
+        this.newText += htmlText ? this.beautyHtml(htmlText[0]) : '';
+        this.newText += jsText ? this.beautyJs(jsText[0]) : '';
+        this.newText += cssText ? this.beautyCss(cssText[0]) : '';
         this.newText = this.newText.replace(/(\n)+$/, '\n');
     },
     beautyHtml(text) {
-        if (!text) {
-            throw new Error(text);
-        }
         let lang = this.getLang(text);
         text = text.replace(/<template[^>]*>([\w\W]+)<\/template>/, '$1');
-        let str = beautify.html(text, {
-            indent_size: 4
-        });
+        let tempConf = {};
+        let str = text;
+        if (/pug/.test(lang)) {
+            str = pugBeautify(text, this.pugBeautifyConf)
+                .trim()
+                ;
+        } else {
+            tempConf = Object.assign({}, this.jsBeautifyConf, this.jsBeautifyConf.html);
+            str = beautify.html(text, tempConf);
+        }
         return `<template${lang}>\n${str}\n</template>\n\n`;
     },
     beautyCss(text) {
-        if (!text) {
-            throw new Error(text);
-        }
         let scoped = /<style[^>]*\s+scoped/.test(text) ? ' scoped' : '';
         let lang = this.getLang(text);
         text = text.replace(/<style[^>]*>([\w\W]+)<\/style>/, '$1');
-        let str = beautify.css(text, {
-            indent_size: 4
-        });
+        let tempConf = Object.assign({}, this.jsBeautifyConf, this.jsBeautifyConf.css);
+        let str = beautify.css(text, tempConf);
         return `<style${lang}${scoped}>\n${str}\n</style>\n\n`;
     },
     beautyJs(text) {
-        if (!text) {
-            throw new Error(text);
-        }
         let lang = this.getLang(text);
         text = text.replace(/<script[^>]*>([\w\W]+)<\/script>/, '$1');
-        let str = beautify.js(text, {
-            indent_size: 4,
-            space_after_anon_function: true,
-            keep_array_indentation: true
-        });
-
+        let tempConf = Object.assign({}, this.jsBeautifyConf, this.jsBeautifyConf.js);
+        let str = beautify.js(text, tempConf);
         return `<script${lang}>\n${str}\n</script>\n\n`;
     },
     getLang(text) {
@@ -82,18 +87,54 @@ let methods = {
     },
     writeFile() {
         let start = new Position(0, 0);
-        let end = new Position(this.lineCount, 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);
         });
     },
-    config() {
-        const configuration = workspace.getConfiguration('vue-format');
-        return {
+    getConfig() {
 
-        };
+        this.editorConf = Object.assign({}, workspace.getConfiguration('editor'));
+        this.initDefaultJsBConf(this.jsBeautifyConf);
+        let vueFormatConf = workspace.getConfiguration('vue-format');
+        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) {
+            // if (!this[type][k]) {
+            //     continue;
+            // }
+            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];
     }
 };
 
