npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

normae-lint-html

v0.0.1

Published

A lint plugin for normae to validate html.

Downloads

2

Readme

normae-lint-html

normae-lint-html是适用于normae的html静态代码检查插件,在htmllint的基础上配置扩展而成,代码规范依据于拉勾网前端的Code Guide

使用

fis.conf.js

fis.match('*.html', {
    lint: fis.plugin('html')
});

shell

$ normae release -l

参数

interrupt

  • 表示在lint过程中检查到不合法的代码时,是否立即退出程序,停止release
  • 默认值为false
fis.match('*.html', {
    lint: fis.plugin('html', {
        interrupt: true
    });
});

sets

  • 表示lint检查的rule
  • 默认值为
{
    // htmllint default rule
   'indent-style': 'spaces',        // 缩进需使用空格
   'indent-width': 4,               // 缩进需4个空格的长度
   'tag-name-lowercase': true,      // 标签名需小写
   'tag-self-close': true,          // 无内容标签需自闭合
   'attr-quote-style': 'double',    // 属性值需使用双引号
   'attr-name-style': 'dash',       // 属性名只能使用中划线连接单词
   'attr-no-dup': true,             // 属性不能重复
   'id-class-no-ad': true,          // id/class中不能有ad单词
   'id-no-dup': true,               // id在html文档中不能重复
   'img-req-alt': true,             // img标签需要alt属性,且值不能为空
   'img-req-src': true,             // img标签需要src属性,且值不能为空

   // custom rule 
   'id-style-camel': true,          // id只能使用驼峰命名法
   'class-style-underscore': true,  // class只能使用下划线连接单词
   'css-js-no-type': true,          // link[rel=stylesheet]/style/script标签不需要type属性
   'boolean-attr-no-value': true,   // boolean类型的属性,不需要赋值
   'img-req-width-height': true,    // img标签需要width/height属性,且值不能为空
   'button-req-type': true,         // button标签需要type属性,且值不能为空
   'form-req-method-post': true     // form标签需要method属性,且值为post
};
  • 如果想修改以上htmllint默认的rule,请传入对应的rule和值以覆盖默认值,具体可以参考htmllint的文档;如果想修改normae-lint-html自定义的rule,请传入对应的rule和false值以覆盖默认值,但是基本上不建议做修改。
fis.match('*.html', {
    lint: fis.plugin('html', {
        sets: {
            'tag-self-close': false
        }
    });
});