奥雷莉亚：健康检查模板html？

我最近问为什么在奥雷利亚的模板系统；这是因为自动关闭元素是无效的html

然而，今天我又犯了同样的错误（这一次是关于小部件），弄不明白为什么内容会丢失

问题：在一次吞咽任务中是否有一种方法可以清理Aurelia模板html

我试过使用：

• gulp htmlhint

  ：无法使其在自关闭元素上出错

• gulp htmlint

  ：无法配置它；在默认设置下，会出现错误

• gulp-html5-lint

  ：看起来不可配置，而且它讨厌aurelia的属性

  ---

  假设还没有人回答；我提出“总比没有好（也许）”™ 解决方案

  var gulp = require('gulp');
  var gutil = require('gulp-util');
  
  var voidTags = [
      'area', 'base', 'br', 'col', 'embed', 'hr', 
      'img', 'input', 'keygen', 'link', 'meta', 
      'param', 'source', 'track', 'wbr'];
  
  var checkSelfClose = function () {
    function sanitize(file, cb) { 
  
      var dirty = String(file.contents);
  
      var matches = dirty.match(/(?:\<[\/\\\-\"\'!() a-z=.]+\/\>)/g);
  
      var customTags = [];
  
      if(matches && matches.length > 0)
      {       
          matches.forEach((match)=>{
              var tag = match.match(/[a-z\-]+/)[0];
  
              if(voidTags.indexOf(tag) < 0)
                  customTags.push(tag);   
          });                   
      };
  
      if(customTags.length > 0)
          gutil.log('WARNING', 'found ' + customTags.length + " non-void self-closed tags in", 
          file.path.substring(file.cwd.length, file.path.Length),
          "tags:", customTags
          );
  
      cb(null, file);
    }
    return require('event-stream').map(sanitize);
  }
  
  gulp.task('build-html', function () {
      return gulp.src('source/**/*.html')
      .pipe(checkSelfClose())
      .pipe(gulp.dest('output'));
  });
  

  var gulp=require（'gulp'）；
  var gutil=require（'gulp-util'）；
  var voidTags=[
  “区域”、“基础”、“br”、“列”、“嵌入”、“hr”，
  “img”、“input”、“keygen”、“link”、“meta”，
  “参数”、“源”、“轨迹”、“wbr”]；
  var checkSelfClose=函数（）{
  函数清理（文件，cb）{
  var dirty=String（file.contents）；
  var matches=dirty.match（/（？：\我们可以用解决查找和报告自动关闭元素的问题。它有一个SAXParser类，应该非常健壮（parse5符合html5标准）。解析器在找到开始标记时引发一个事件，该事件包含一个布尔值，表明找到的标记是否自动关闭
  
  var parser = new SAXParser();
  
  parser.on("startTag", (name, attrs, selfClosing)=>{
      if(selfClosing){ 
          //check if name is void, if not report error       
      }
  });
  
  parser.push(html);
  
  为了利用这一功能，我设置了一个项目，可以使用该项目来帮助使用上述方法清理html。开发的lint工具能够运行一系列规则，收集所有错误并将其作为承诺返回。然后可以向用户报告
  
  普通Html/模板
  构成工具集的基础。它包括短绒和一些基本规则：
  
  
  自动关闭-确保非空心图元不会自动关闭
  解析器-返回解析期间捕获的未关闭或不匹配元素的错误
  
  是模板棉绒的填塞包装，可以这样使用：
  
  var gulp = require('gulp');
  var linter = require('gulp-template-lint');
  
  gulp.task('build-html', function () {
      return gulp.src(['source/**/*.html'])
          .pipe(linter())
          .pipe(gulp.dest('output'));
  });
  
  例子
  给定以下html：
  
  <template>
    <custom-element/> 
    <svg>
      <rect/>
    </svg>
    <div>
      <div>
      </div>
  </template>
  
  并用于大口吞咽：
  
  var linter = require('gulp-aurelia-template-lint');
  
  gulp.task('lint-template-html', function () {
      return gulp.src('**/*.html')
          .pipe(linter())
          .pipe(gulp.dest('output'));
  });
  
  这将使用默认的规则集
  
  例子
  使用以下格式不正确的aurelia模板进行的简单测试：
  
  <link/>
  <template bindable="items">
  <require from="foo"/>
  <require frm="foo"/>
  
  <br/>
  <div></div>
  
  <router-view>
    <div/>
  </router-view>
  
  </template>
  <template>
  </template>
  
  
  
  
  
  产出：
  
  
  改进
  还有很多需要改进的地方；例如，有几种方法可以定义普通模板，而不使用
  标记。Aurelia引入的一些特定属性也可以进行清理。
  好问题，我很想用一些东西来填充我的HTML（无法告诉你我被困了一个小时的次数，只更改了开始标记而没有更改结束标记）htmlhint有选项（以前从未使用过）…例如，您可以将其集成到IDE中，或者创建自定义规则另一个可能的选项@MattMcCabe不幸的是，标记自关闭与生成html4投诉代码有关：即
  
  ，而在html5中，您可以执行
  
  。htmlhint中的自定义规则可能是未来的方向。@Meirionhoughes是的，所以rry我在玩过它之后意识到了这一点。我敢肯定，一旦定制组件变得越来越普遍，如果有人对此有问题，就会有解决方案；我很乐意尝试解决这些问题。
  var linter = require('gulp-aurelia-template-lint');
  
  gulp.task('lint-template-html', function () {
      return gulp.src('**/*.html')
          .pipe(linter())
          .pipe(gulp.dest('output'));
  });
  
  <link/>
  <template bindable="items">
  <require from="foo"/>
  <require frm="foo"/>
  
  <br/>
  <div></div>
  
  <router-view>
    <div/>
  </router-view>
  
  </template>
  <template>
  </template>