version 0.1.0 , see changeLog

Author: win7killer

CHANGELOG.md

@@ -29,3 +29,9 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 ### 0.0.13
 - 支持多 `style`、`script`标签格式化
+
+### 0.1.0
+- 命令执行环境判断由 resourceLangId 改为 editorLangId，支持非 ".vue" 文件直接更改右下角语言为vue
+- 自行尝试修复 [issues#1](https://github.com/win7killer/vue-format/issues/1) 中涉及到的 js-beauty 格式化强制换行问题
+- 暂时停用 js-beautify.html.wrap_attributes 配置项（有上一条更改决定）
+- 增加 break_attr_limit 配置项，当tag的属性数量大于这个值，则该tag所有属性强制换行；-1时强制不换行

README.md

@@ -2,6 +2,12 @@
 
 format single file with '.vue'.（格式化单组件“.vue”文件代码）
 > If you have some issue, just let me know https://github.com/win7killer/vue-format
+
+`Welcome to star && fork`
+
+## Big Notice
+> 0.1.0 版本 尝试解决了 js-beauty 的标签换行导致缩进异常问题，如有问题，随时 issue
+
 ## Features
 <img src="https://raw.githubusercontent.com/win7killer/vue-format/master/images/command.gif" alt="command" width=600/>
 
@@ -16,6 +22,7 @@ format single file with '.vue'.（格式化单组件“.vue”文件代码）
 ```json
 {
     "html_indent_root": false, // 是否缩进vue template中的根节点
+    "break_attr_limit": -1, // tag 的 attrs 大于该数值时，强制 attrs 换行，-1时不换行
     "js-beautify": {
         "indent_size": "editor.tabSize",
         "indent_char": " ",
@@ -26,8 +33,6 @@ format single file with '.vue'.（格式化单组件“.vue”文件代码）
         "js": {},
         "html": {
             "force_format": ["template"],
-            // tag 的多个 attribute 换行展示 [auto|force-expand-multiline|force|force-aligned]
-            "wrap_attributes": "force-expand-multiline"
         }
     },
     "pug-beautify": {
@@ -36,6 +41,15 @@ format single file with '.vue'.（格式化单组件“.vue”文件代码）
 }
 
 ```
+
+### 暂时停用该配置
+<del>// tag 的多个 attribute 换行展示 [auto|force-expand-multiline|force|force-aligned]</del>
+
+<del>// js-beautify.html.wrap_attributes: "force-expand-multiline"</del>
+
 ### Change Log
 [CHANGELOG.md](./CHANGELOG.md)
 
+### Todo List
+[todo.md](./todo.md)
+

images/command.gif

@@ -1,5 +1,6 @@
 {
     "html_indent_root": false,
+    "break_attr_limit": -1,
     "js-beautify": {
         "indent_size": "editor.tabSize",
         "indent_char": " ",

js-beautify.conf.json

@@ -2,10 +2,10 @@
     "name": "vue-format",
     "displayName": "vue-format",
     "description": "A beautify extension for .vue file",
-    "version": "0.0.13",
+    "version": "0.1.0",
     "publisher": "febean",
     "engines": {
-        "vscode": "^1.2.0"
+        "vscode": "^1.12.0"
     },
     "icon": "images/logo.png",
     "categories": [
@@ -29,6 +29,11 @@
                     "default": false,
                     "description": "If indent the root-tag in .vue's template(是否缩进vue组件template中的根节点)"
                 },
+                "vue-format.break_attr_limit": {
+                    "type": "number",
+                    "default": -1,
+                    "description": "Break attributes when tag's attributes.length > this number, no break when -1.(tag 的 attrs 大于该数值时，强制 attrs 换行，-1时不换行)"
+                },
                 "vue-format.js-beautify": {
                     "type": "object",
                     "default": {
@@ -42,8 +47,7 @@
                         "html": {
                             "force_format": [
                                 "template"
-                            ],
-                            "wrap_attributes": "auto"
+                            ]
                         }
                     },
                     "description": "The config use some js-beautify options, see js-beautify.（使用js-beautify配置项，详情查看js-beautify）"
@@ -59,15 +63,15 @@
         },
         "commands": [
             {
-                "when": "resourceLangId == vue",
+                "when": "editorLangId == vue",
                 "command": "extension.vueFormat",
                 "title": "Vue Format"
             }
         ],
         "menus": {
             "editor/context": [
                 {
-                    "when": "resourceLangId == vue",
+                    "when": "editorLangId == vue",
                     "command": "extension.vueFormat",
                     "group": "navigation"
                 }

package-lock.json

@@ -10,6 +10,7 @@ const {
 } = require('vscode');
 const beautify = require('js-beautify');
 const pugBeautify = require('pug-beautify');
+const { breakTagAttr } = require('./plugins');
 let defaultConf = require('../js-beautify.conf.json');
 
 let editor;
@@ -99,9 +100,12 @@ let methods = {
                 .trim();
         } else {
             tempConf = Object.assign(tempConf, this.jsBeautifyConf, this.jsBeautifyConf.html);
+            delete tempConf.wrap_attributes;
             str = beautify.html(text, tempConf);
         }
-
+        if (+this.vueFormatConf.break_attr_limit > -1) {
+            str = breakTagAttr(str, +this.vueFormatConf.break_attr_limit);
+        }
         return indentRoot ? `${str}\n\n` : `<template${lang}>\n${str}\n</template>\n\n`;
     },
     beautyCss(text) {

package.json

@@ -1,12 +1,52 @@
-const HtmlParseTag = require('html-parse-stringify');
-let methods = {
-    init(str) {
-        let res = this.format(str);
-        return res;
-    },
-    format(str) {
-        return HtmlParseTag.parse(str);
+/**
+ * 强制多属性换行
+ * @param {String} str 需要格式化的字符串
+ * @param {Number} breakLimitNum 多余这个数量的属性，才会断行
+ */
+
+function breakTagAttr(str = '', breakLimitNum = 1) {
+    if (breakLimitNum === -1) {
+        return str;
     }
-};
+    const TAG_REG = /[\n\r\t]*(\s*)\<[A-z\-\_0-9]+/;
+    const TAG_END_REG = /\s*(>|\/>)/;
+
+    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 + '$');
 
-module.exports = methods;
+    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];
+            // 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 + '    ' + $1.trim();
+                });
+                // tag 结束括号换行
+                newStr = newStr.replace(TAG_CLOSE_REG, '\n' + indent + '$1');
+                // 替换整个字符串中的对应内容
+                str = str.replace(tagContent, newStr);
+            }
+        } else {
+            // console.log('stop');
+            loop = false;
+        }
+    }
+    return str;
+}
+
+module.exports = {
+    breakTagAttr
+};

src/index.js

@@ -1,9 +1,9 @@
-const Plugins = require('./plugins');
+const { breakTagAttr } = require('./plugins');
 
 let str = `
 <template>
-<div v-show="isShow" v-transfer-dom >
-    <x-dialog class="lm-dialog sssss" v-model="show" >
+<div v-show="isShow" v-transfer-dom>
+    <x-dialog class="lm-dialog sssss" v-model="show">
         <div class="dialog-content-wrapper">
             <div class="dialog-title"></div>
             <slot name="dialog-content">
@@ -20,6 +20,37 @@ let str = `
 </template>
 `;
 
-let str1 = Plugins.init(str);
+let str1 = `
+<template>
+<div v-if="{
+        ss: 1 > 0
+    }" :style="{
+
+    }" :class="{
+        show: 1 > 2
+    }" :ccccc='[
+        "haha"
+    ]' data-text=">>>>>>>>>>>" @click="clickFn" class="article" data-id=123 ff="><<><><><">
+    <ArticleList :data="123" name="cccss" class="go"></ArticleList>
+    <p id="sdsd" name="cc"><span></span></p>
+    <div class="class">shit</div>
+    <div class="test" :data-cc="getCC">{{getCC.replace(/\s/, '')}}</div>
+    <div class="test" :data-cc="getCC">{{getCC > 123 ? 'sss' : 'dddd'}}</div>
+
+    <div class="left clearfix" id="haha">
+        <ul class="clearfix">
+            <li v-for="(item, index) of list" :key="index" :data="item" class="item">{{test}}</li>
+        </ul>
+    </div>
+    <x-man class="sdsd" id="123"></x-man>
+</div>
+</template>
+`;
+
+let str2 = `
+<x-man class="sdsd" id="123"></x-man>
+`;
+
+let res = breakTagAttr(str1, 1);
 
-console.log(`\n`, JSON.stringify(str1, null, 2));
+console.log(res);

src/plugins.js

@@ -1 +1,2 @@
-none
+# todo list
+- 升级到 ts