项目质量监测（二）08-Lint工具之ESLint——vscode插件之StyleLint和HTMLHint

StyleLint

官网：https://stylelint.io/

• 安装依赖：

  npm install -D stylelint-config-recommended stylelint-config-standard
  
  // yarn 
  yarn add stylelint-config-recommended stylelint-config-standard -D
  

• 配置忽略

  // .stylelintignore   忽略stylelint检查的文件
  /src/**/*.css
  

• .stylelintrc.js文件配置

  module.exports = {
    "extends": ["stylelint-config-recommended", "stylelint-config-standard"],
    "rules": {
      "indentation": 2
    }
  }
  

• vscode配置

  安装Prettier + stylelint插件，方便格式化代码。

配置文件：

  "[scss]": {
    "editor.formatOnSave": true
  },
  // 打开scss的validate配置
  "scss.validate": true,

HTMLHint

官网：https://htmlhint.io

github: https://github.com/htmlhint/HTMLHint

• 安装依赖：

  npm install htmlhint --save-dev
  
  // yarn 
  yarn add htmlhint -D
  

• 配置忽略

  // .stylelintignore   忽略stylelint检查的文件
  /src/**/*.css
  

• .htmlhintrc文件配置

  /**
  标签名必须小写
  属性名必须小写
  属性值必须放在双引号中
  属性值一定不可为空
  属性值一定不可重复
  Doctype必须是 HTML 文档的第一行
  标签必须成对
  标签必须自封闭
  特殊字符必须
  ID 属性必须唯一
  src 属性一定不可为空
  title 属性必须出现在标签中
  img 标签必须包含 alt 属性
  Doctype 必须是 HTML5
  ID 和 Class 的命名规则必须统一
  不该使用样式标签
  不该使用行内样式
  不该使用行内脚本
  空格和制表符一定不可混合在行前
  ID 和 Class 一定不可使用广告关键词
  href 必须是绝对路径或者相对路径
  属性值一定不可使用不安全字符
  script 标签不该使用在头部
  */
  {
    "tagname-lowercase": true, 
    "attr-lowercase": true,
    "attr-value-double-quotes": true,
    "attr-value-not-empty": false,
    "attr-no-duplication": true,
    "doctype-first": true,
    "tag-pair": true,
    "empty-tag-not-self-closed": true,
    "spec-char-escape": true,
    "id-unique": true,
    "src-not-empty": true,
    "title-require": true,
    "alt-require": true,
    "doctype-html5": true,
    "id-class-value": "dash",
    "style-disabled": false,
    "inline-style-disabled": false,
    "inline-script-disabled": false,
    "space-tab-mixed-disabled": "space",
    "id-class-ad-disabled": false,
    "href-abs-or-rel": false,
    "attr-unsafe-chars": true,
    "head-script-disabled": true
  }
  

• vscode配置

  安装Prettier，HTMLHint插件，方便格式化代码。

用户配置文件：

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 打开scss的validate配置
  "files.associations": {
  	"*.ext": "html"
  },