eslint-js

如何配置选项？

选项配置文件是.eslintrc.js，选项对应说明如下：

  module.exports = {  
      "plugins": [],          //插件  
      "env": {  
          "browser": true,  
          "node": true  
      },  
      "parser": "esprima",    //指定解析器  
      "parserOptions": {},      
      "rules": {}             //规则  
  };

更多配置说明可以参考options

如何增加规则？

规则简介

官方规则列表

规则设置：

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

HBuilderX增加js校验规则

修改.eslintrc.js文件，添加规则，比如:

  module.exports = {  
      "plugins": [  
          "html"  
      ],  
      "parser": "esprima",  
      "parserOptions": {  
          "ecmaVersion": 2018,  
          "sourceType": "module",  
          "ecmaFeatures": {  
              "jsx": true  
          },  
          "allowImportExportEverywhere": false  
      },  
      "rules": {  
          "camelcase": 2,           //强制驼峰法命名,  
          "indent": [2, 4],         //缩进风格  
          "id-match": 0,            //命名检测  
          "init-declarations": 1,   //声明时必须赋初值  
          "no-undef": 1,            //不能有未定义的变量  
      }  
  };  

html语法校验插件，需要到插件市场安装。

安装完成后，进入【设置】【插件配置】【htmlhintrc】，点击htmlhintrc, 即可配置相关规则。

如何配置选项？

选项配置文件是.htmlhintrc，目前已有的选项对应说明如下：

详细的配置说明可以参考options

如何增加其它选项？

修改.htmlhintrc文件，添加选项，比如:

  {  
    "attr-value-not-empty": true,     //属性值不可为空  
    "tag-self-close": true,           //标签必须自封闭  
    "title-require": true,            //title标签必须出现在 head 标签中  
    "inline-style-disabled": false,   //可以使用行内样式  
    "id-class-ad-disabled": true,     //ID和 Class一定不可使用ad关键词,使用ad关键词的ID或Class，会被广告拦截软件屏蔽  
    "attr-unsafe-chars": true,        //script标签不该使用在head标签  
  }  

HBuilderX中，校验css、less、scss的语法校验插件是stylelint

如何配置选项？

配置文件是.stylelintrc.js

详细的配置说明可以参考

• stylelint官网
• GitHub styleline

规则配置格式

stylelint有上百条规则，可以分为三类：

• 用于校对风格的规则 （主要针对空格（比如说冒号附近的空格）、换行、缩进等等）
• 用于判别代码可维护性的规则 （判断在CSS选择器中是否有使用某个ID，或者在某条声明当中是否应用了!important关键词）

• 用于判断代码错误的规则 （检测错误的HEX颜色写法或者某条简写属性是否会覆盖其他的声明语句）

  规则属性是一个对象，键是规则的名称，值是规则配置。每个规则配置符合下列格式之一：

• 单个值（primary option）
• 一个有两个值的数组（[primary option,secondary option]）
• null (关闭规则)

如何增加其它规则？

修改.stylelintrc.js文件，添加选项，比如:

  module.exports = {  
    "extends": "stylelint-config-recommended",  
    "rules":{  
        "unit-no-unknown": false,  
        "indentation": "tab",       //缩进  
        "unit-no-unknown": true,    //禁止未知单位  
        "color-hex-case": [  
          "lower", {  
          "message": "Lowercase letters are easier to distinguish from numbers"  
          }  
        ],  
        "max-empty-lines": 2,  
        "unit-whitelist": ["em", "rem", "%", "s", "px", "upx"],  
        "number-leading-zero": null  
    }  
  }  

详尽的配置规则

  {  
  "rules": {  
    "at-rule-blacklist": string|[],  
    "at-rule-empty-line-before": "always"|"never",  
    "at-rule-name-case": "lower"|"upper",  
    "at-rule-name-newline-after": "always"|"always-multi-line",  
    "at-rule-name-space-after": "always"|"always-single-line",  
    "at-rule-no-unknown": true,  
    "at-rule-no-vendor-prefix": true,  
    "at-rule-semicolon-newline-after": "always",  
    "at-rule-semicolon-space-before": "always"|"never",  
    "at-rule-whitelist": string|[],  
    "block-closing-brace-empty-line-before": "always-multi-line"|"never",  
    "block-closing-brace-newline-after": "always"|"always-single-line"|"never-single-line"|"always-multi-line"|"never-multi-line",  
    "block-closing-brace-newline-before": "always"|"always-multi-line"|"never-multi-line",  
    "block-closing-brace-space-after": "always"|"always-single-line"|"never-single-line"|"always-multi-line"|"never-multi-line",  
    "block-closing-brace-space-before": "always"|"never"|"always-single-line"|"never-single-line"|"always-multi-line"|"never-multi-line",  
    "block-no-empty": true,  
    "block-opening-brace-newline-after": "always"|"always-multi-line"|"never-multi-line",  
    "block-opening-brace-newline-before": "always"|"always-single-line"|"never-single-line"|"always-multi-line"|"never-multi-line",  
    "block-opening-brace-space-after": "always"|"always-single-line"|"never-single-line"|"always-multi-line"|"never-multi-line",  
    "block-opening-brace-space-before": "always"|"always-single-line"|"never-single-line"|"always-multi-line"|"never-multi-line",  
    "color-hex-case": "lower"|"upper",  
    "color-hex-length": "short"|"long",  
    "color-named": "always-where-possible"|"never",  
    "color-no-hex": true,  
    "color-no-invalid-hex": true,  
    "comment-empty-line-before": "always"|"never",  
    "comment-no-empty": true,  
    "comment-whitespace-inside": "always"|"never",  
    "comment-word-blacklist": string|[],  
    "custom-media-pattern": string,  
    "custom-property-empty-line-before": "always"|"never",  
    "custom-property-pattern": string,  
    "declaration-bang-space-after": "always"|"never",  
    "declaration-bang-space-before": "always"|"never",  
    "declaration-block-no-duplicate-properties": true,  
    "declaration-block-no-redundant-longhand-properties": true,  
    "declaration-block-no-shorthand-property-overrides": true,  
    "declaration-block-semicolon-newline-after": "always"|"always-multi-line"|"never-multi-line",  
    "declaration-block-semicolon-newline-before": "always"|"always-multi-line"|"never-multi-line",  
    "declaration-block-semicolon-space-after": "always"|"never"|"always-single-line"|"never-single-line",  
    "declaration-block-semicolon-space-before": "always"|"never"|"always-single-line"|"never-single-line",  
    "declaration-block-single-line-max-declarations": int,  
    "declaration-block-trailing-semicolon": "always"|"never",  
    "declaration-colon-newline-after": "always"|"always-multi-line",  
    "declaration-colon-space-after": "always"|"never"|"always-single-line",  
    "declaration-colon-space-before": "always"|"never",  
    "declaration-empty-line-before": "always"|"never",  
    "declaration-no-important": true,  
    "declaration-property-unit-blacklist": {},  
    "declaration-property-unit-whitelist": {},  
    "declaration-property-value-blacklist": {},  
    "declaration-property-value-whitelist": {},  
    "font-family-name-quotes": "always-where-required"|"always-where-recommended"|"always-unless-keyword",  
    "font-family-no-duplicate-names": true,  
    "font-family-no-missing-generic-family-keyword": true,  
    "font-weight-notation": "numeric"|"named",  
    "function-blacklist": string|[],  
    "function-calc-no-unspaced-operator": true,  
    "function-comma-newline-after": "always"|"always-multi-line"|"never-multi-line",  
    "function-comma-newline-before": "always"|"always-multi-line"|"never-multi-line",  
    "function-comma-space-after": "always"|"never"|"always-single-line"|"never-single-line",  
    "function-comma-space-before": "always"|"never"|"always-single-line"|"never-single-line",  
    "function-linear-gradient-no-nonstandard-direction": true,  
    "function-max-empty-lines": int,  
    "function-name-case": "lower"|"upper",  
    "function-parentheses-newline-inside": "always"|"always-multi-line"|"never-multi-line",  
    "function-parentheses-space-inside": "always"|"never"|"always-single-line"|"never-single-line",  
    "function-url-no-scheme-relative": true,  
    "function-url-quotes": "always"|"never",  
    "function-url-scheme-blacklist": string|[],  
    "function-url-scheme-whitelist": string|[],  
    "function-whitelist": string|[],  
    "function-whitespace-after": "always"|"never",  
    "indentation": int|"tab",  
    "keyframe-declaration-no-important": true,  
    "keyframes-name-pattern": string,  
    "length-zero-no-unit": true,  
    "linebreaks": "unix"|"windows",  
    "max-empty-lines": int,  
    "max-line-length": int,  
    "max-nesting-depth": int,  
    "media-feature-colon-space-after": "always"|"never",  
    "media-feature-colon-space-before": "always"|"never",  
    "media-feature-name-blacklist": string|[],  
    "media-feature-name-case": "lower"|"upper",  
    "media-feature-name-no-unknown": true,  
    "media-feature-name-no-vendor-prefix": true,  
    "media-feature-name-value-whitelist": {},  
    "media-feature-name-whitelist": string|[],  
    "media-feature-parentheses-space-inside": "always"|"never",  
    "media-feature-range-operator-space-after": "always"|"never",  
    "media-feature-range-operator-space-before": "always"|"never",  
    "media-query-list-comma-newline-after": "always"|"always-multi-line"|"never-multi-line",  
    "media-query-list-comma-newline-before": "always"|"always-multi-line"|"never-multi-line",  
    "media-query-list-comma-space-after": "always"|"never"|"always-single-line"|"never-single-line",  
    "media-query-list-comma-space-before": "always"|"never"|"always-single-line"|"never-single-line",  
    "no-descending-specificity": true,  
    "no-duplicate-at-import-rules": true,  
    "no-duplicate-selectors": true,  
    "no-empty-source": true,  
    "no-empty-first-line": true,  
    "no-eol-whitespace": true,  
    "no-extra-semicolons": true,  
    "no-invalid-double-slash-comments": true,  
    "no-missing-end-of-source-newline": true,  
    "no-unknown-animations": true,  
    "number-leading-zero": "always"|"never",  
    "number-max-precision": int,  
    "number-no-trailing-zeros": true,  
    "property-blacklist": string|[],  
    "property-case": "lower"|"upper",  
    "property-no-unknown": true,  
    "property-no-vendor-prefix": true,  
    "property-whitelist": string|[],  
    "rule-empty-line-before": "always"|"never"|"always-multi-line"|"never-multi-line",  
    "selector-attribute-brackets-space-inside": "always"|"never",  
    "selector-attribute-operator-blacklist": string|[],  
    "selector-attribute-operator-space-after": "always"|"never",  
    "selector-attribute-operator-space-before": "always"|"never",  
    "selector-attribute-operator-whitelist": string|[],  
    "selector-attribute-quotes": "always"|"never",  
    "selector-class-pattern": string,  
    "selector-combinator-blacklist": string|[],  
    "selector-combinator-space-after": "always"|"never",  
    "selector-combinator-space-before": "always"|"never",  
    "selector-combinator-whitelist": string|[],  
    "selector-descendant-combinator-no-non-space": true,  
    "selector-id-pattern": string,  
    "selector-list-comma-newline-after": "always"|"always-multi-line"|"never-multi-line",  
    "selector-list-comma-newline-before": "always"|"always-multi-line"|"never-multi-line",  
    "selector-list-comma-space-after": "always"|"never"|"always-single-line"|"never-single-line",  
    "selector-list-comma-space-before": "always"|"never"|"always-single-line"|"never-single-line",  
    "selector-max-attribute": int,  
    "selector-max-class": int,  
    "selector-max-combinators": int,  
    "selector-max-compound-selectors": int,  
    "selector-max-empty-lines": int,  
    "selector-max-id": int,  
    "selector-max-pseudo-class": int,  
    "selector-max-specificity": string,  
    "selector-max-type": int,  
    "selector-max-universal": int,  
    "selector-nested-pattern": string,  
    "selector-no-qualifying-type": true,  
    "selector-no-vendor-prefix": true,  
    "selector-pseudo-class-blacklist": string|[],  
    "selector-pseudo-class-case": "lower"|"upper",  
    "selector-pseudo-class-no-unknown": true,  
    "selector-pseudo-class-parentheses-space-inside": "always"|"never",  
    "selector-pseudo-class-whitelist": string|[],  
    "selector-pseudo-element-blacklist": string|[],  
    "selector-pseudo-element-case": "lower"|"upper",  
    "selector-pseudo-element-colon-notation": "single"|"double",  
    "selector-pseudo-element-no-unknown": true,  
    "selector-pseudo-element-whitelist": string|[],  
    "selector-type-case": "lower"|"upper",  
    "selector-type-no-unknown": true,  
    "shorthand-property-no-redundant-values": true,  
    "string-no-newline": true,  
    "string-quotes": "single"|"double",  
    "time-min-milliseconds": int,  
    "unit-blacklist": string|[],  
    "unit-case": "lower"|"upper",  
    "unit-no-unknown": true,  
    "unit-whitelist": string|[],  
    "value-keyword-case": "lower"|"upper",  
    "value-list-comma-newline-after": "always"|"always-multi-line"|"never-multi-line",  
    "value-list-comma-newline-before": "always"|"always-multi-line"|"never-multi-line",  
    "value-list-comma-space-after": "always"|"never"|"always-single-line"|"never-single-line",  
    "value-list-comma-space-before": "always"|"never"|"always-single-line"|"never-single-line",  
    "value-list-max-empty-lines": int,  
    "value-no-vendor-prefix": true  
    }  
  }

规则参考列表（中文）

2018-10-16 翻译官网

Possible errors

Color 颜色

• color-no-invalid-hex: 禁止无效的十六进制颜色

Font family 字体系列

• font-family-no-duplicate-names: Disallow duplicate font family names.
• font-family-no-missing-generic-family-keyword: Disallow missing generic families in lists of font family names.

Function 函数

• function-calc-no-unspaced-operator: 禁止在 calc 函数内的运算符间省略空格
• function-linear-gradient-no-nonstandard-direction: 禁止在 linear-gradient() 内使用不符合标准语法的值

String 字符串

• string-no-newline: 不允许字符串（非转义）换行

Unit

• unit-no-unknown: 不允许未知的单位

Property 属性

• property-no-unknown: 不允许未知属性

Keyframe declaration

• keyframe-declaration-no-important: 不允许!important在关键帧声明

Declaration block 声明块

• declaration-block-no-duplicate-properties: 禁止在声明块内出现重复属性
• declaration-block-no-shorthand-property-overrides: 禁止使用速记属性重写相关属性

Block

• block-no-empty: 不允许空块

Selector

• selector-pseudo-class-no-unknown: 不允许未知的伪类选择器
• selector-pseudo-element-no-unknown: 不允许未知的伪元素选择器
• selector-type-no-unknown: 不允许未知类型选择器

Media feature

• media-feature-name-no-unknown: 不允许未知的媒体功能的名字

At-rule

• at-rule-no-unknown: 不允许at-rules不明

Comment

• comment-no-empty: 不允许空注释

General / Sheet

• no-descending-specificity:不允许选择器之后覆盖选择器的低特异性更高的特异性
• no-duplicate-at-import-rules: Disallow duplicate @import rules within a stylesheet.
• no-duplicate-selectors: 不允许重复的选择器
• no-empty-source: 不允许空的来源
• no-extra-semicolons: 不允许额外的分号
• no-invalid-double-slash-comments: 不允许双斜杠注释(/ /…)不支持的CSS

Limit language features

color 颜色

• color-named: 在特定的情况下不允许使用命名的颜色值
• color-no-hex: 禁止使用十六进制的颜色

Function 函数

• function-blacklist: 指定一个不允许使用函数的黑名单
• function-url-no-scheme-relative: 不允许文档相对的URL
• function-url-scheme-blacklist: 指定允许URL方案的黑名单
• function-url-scheme-whitelist: 指定允许URL方案的白名单
• function-whitelist: 指定允许的功能的白名单

Keyframes

• keyframes-name-pattern: Specify a pattern for keyframe names.

Number 数值

• number-max-precision: 限制数值的小数位数

Time

• time-min-milliseconds: Specify the minimum number of milliseconds for time values.

Unit

• unit-blacklist: 指定不允许使用单位的黑名单
• unit-whitelist: 指定允许单位的白名单

Shorthand property

• shorthand-property-no-redundant-values: 不允许在简写属性冗余值

Value 值

• value-no-vendor-prefix: 禁止值添加供应商前缀值

Custom property 自定义属性

• custom-property-pattern: 指定自定义属性的模式

Property 属性

• property-blacklist: 指定一个不允许使用属性的黑名单
• property-no-vendor-prefix: 禁止属性添加供应商前缀
• property-whitelist: 指定一个允许使用属性的白名单

Declaration 声明

• declaration-block-no-redundant-longhand-properties: 不允许手写属性,可以组合成一个简写属性
• declaration-no-important: 不允许!important声明
• declaration-property-unit-blacklist: 指定一个黑名单内不允许声明属性
• declaration-property-unit-whitelist: 指定一个白名单内允许声明属性
• declaration-property-value-blacklist:指定一个黑名单,不允许在声明属性和值对
• declaration-property-value-whitelist: 指定一个允许属性和值对声明的白名单

Declaration block 声明块

• declaration-block-single-line-max-declarations: 在单行声明块中限制声明的数量

Selector 选择器

• selector-attribute-operator-blacklist: 指定一个黑名单不允许属性的操作符
• selector-attribute-operator-whitelist: 指定一个属性允许运营商的白名单
• selector-class-pattern: 指定类选择器的模式（模式指的是正则表达式）
• selector-combinator-blacklist: Specify a blacklist of disallowed combinators.
• selector-combinator-whitelist: Specify a whitelist of allowed combinators.
• selector-id-pattern: 指定id选择器的模式
• selector-max-attribute: Limit the number of attribute selectors in a selector.
• selector-max-class: Limit the number of classes in a selector.
• selector-max-combinators: Limit the number of combinators in a selector.
• selector-max-compound-selectors: 在一个选择器里面限制复合选择器的数量
• selector-max-empty-lines: 限制内相邻的空行选择器的数量
• selector-max-id: Limit the number of ID selectors in a selector.
• selector-max-pseudo-class: Limit the number of pseudo-classes in a selector.
• selector-max-specificity: 限制选择器的特异性
• selector-max-type: Limit the number of type in a selector.
• selector-max-universal: Limit the number of universal selectors in a selector.
• selector-nested-pattern: 指定一个模式选择器的规则嵌套规则
• selector-no-qualifying-type: 不允许符合条件的选择器的类型
• selector-no-vendor-prefix: 不允许选择器的前缀
• selector-pseudo-class-blacklist: 指定一个黑名单禁止伪类选择器
• selector-pseudo-class-whitelist: 指定一个白名单禁止伪类选择器
• selector-pseudo-element-blacklist: Specify a blacklist of disallowed pseudo-element selectors.
• selector-pseudo-element-whitelist: Specify a whitelist of allowed pseudo-element selectors.

Media feature 媒体特性

• media-feature-name-blacklist: Specify a blacklist of disallowed media feature names.
• media-feature-name-no-vendor-prefix: 禁止媒体特性属性名添加供应商前缀
• media-feature-name-value-whitelist: Specify a whitelist of allowed media feature name and value pairs.
• media-feature-name-whitelist: Specify a whitelist of allowed media feature names.

Custom media 自定义媒体

• custom-media-pattern: 指定自定义媒体查询的名称模式

At-rule AT规则

• at-rule-blacklist: 不允许at-rules，指定一个黑名单。
• at-rule-no-vendor-prefix: 禁止AT规则 添加供应商前缀
• at-rule-whitelist:指定允许at-rules的白名单

Comment 注释

• comment-word-blacklist: 指定一个黑名单内不允许的话评论

General / Sheet

• max-nesting-depth: 限制的深度嵌套
• no-unknown-animations: 不允许动画名称不对应@keyframes声明

Stylistic issues

颜色

• color-hex-case: 指定十六进制颜色的大小写
• color-hex-length: 指定十六进制颜色的长度

Font family 字体系列

• font-family-name-quotes: 指定字体系列不应用于单双引号内

Font weight 字体粗细

• font-weight-notation: 要求一致的数值或命名作为 font-weight 的值

Function 函数

• function-comma-newline-after: 在函数的逗号后指定一个换行符或禁止留有空格
• function-comma-newline-before: 在函数的逗号前指定一个换行符或禁止留有空格
• function-comma-space-after: 在函数的逗号后指定一个空格或禁止留有空格
• function-comma-space-before: 在函数的逗号前指定一个空格或禁止留有空格
• function-max-empty-lines: Limit the number of adjacent empty lines within functions (Autofixable).
• function-name-case: Specify lowercase or uppercase for function names (Autofixable).
• function-parentheses-newline-inside: 在函数括号内指定一个换行符或禁止留有空格
• function-parentheses-space-inside: 在函数括号内指定一个空格或禁止留有空格
• function-url-quotes: 为urls指定单引或双引号
• function-whitespace-after: 在函数后指定一个空格或禁止留有空格

Number 数值

• number-leading-zero: 要求或不允许数值小于 1 的数字前面添加 0
• number-no-trailing-zeros: 禁止在数值内尾随 0

String 字符串

• string-quotes: 为字符串指定单引或双引号

Length 长度

• length-zero-no-unit: 禁止单位零长度

Unit 单位

• unit-case: 指定大写或小写的单位

Value 值

• value-keyword-case: 指定大写或小写关键字的值

Value list 值列表

• value-list-comma-newline-after: 在值列表的逗号后指定一个换行符或禁止留有空格
• value-list-comma-newline-before: 在值列表的逗号前指定一个换行符或禁止留有空格
• value-list-comma-space-after: 在值列表的逗号后指定一个空格或禁止留有空格
• value-list-comma-space-before: 在值列表的逗号前指定一个空格或禁止留有空格
• value-list-max-empty-lines: 限制相邻的数量值列表内空行

Custom property 自定义属性

• custom-property-empty-line-before: 自定义属性之前equire或不允许空行

Property 属性

• property-case: 为属性指定小写或大写

Declaration

• declaration-bang-space-after: bang声明之后需要一个空格或者不允许空白
• declaration-bang-space-before: bang声明之前需要一个空格或者不允许空白
• declaration-colon-newline-after: 冒号后的声明需要一个换行符或不允许空白
• declaration-colon-space-after: 冒号后的声明需要一个空格或不允许空白
• declaration-colon-space-before: 冒号之前的声明需要一个空格或不允许空白
• declaration-empty-line-before: 要求声明前不允许空一行

Declaration block

• declaration-block-semicolon-newline-after: 要求一个换行符或不允许空白块分号后
• declaration-block-semicolon-newline-before: 要求一个换行符或不允许空白块分号之前的声明
• declaration-block-semicolon-space-after: 要求一个空间或不允许空白块分号后的声明
• declaration-block-semicolon-space-before: 要求一个空间或不允许空白块分号之前的声明
• declaration-block-trailing-semicolon: 要求或不允许在声明块后面的分号

Block 块

• block-closing-brace-empty-line-before: 要求或不允许关闭括号前空一行
• block-closing-brace-newline-after: 在块的右大括号后指定一个换行符或禁止留有空格
• block-closing-brace-newline-before: 在块的右大括号前指定一个换行符或禁止留有空格
• block-closing-brace-space-after: 在块的右大括号后指定一个空格或禁止留有空格
• block-closing-brace-space-before: 在块的右大括号前指定一个空格或禁止留有空格
• block-opening-brace-newline-after: 在块的左大括号后制定一个换行符
• block-opening-brace-newline-before: 在块的左大括号前指定一个换行符或禁止留有空格
• block-opening-brace-space-after: 在块的左大括号后指定一个空格或禁止留有空格
• block-opening-brace-space-before: 在块的左大括号前指定一个空格或禁止留有空格

Selector 选择器

• selector-attribute-brackets-space-inside: 在括号里的属性选择器需要一个空格或者不允许空白
• selector-attribute-operator-space-after: 需要一个空间或不允许空格后运营商在属性选择器
• selector-attribute-operator-space-before: 需要一个空间或不允许空格内运营商之前属性选择器
• selector-attribute-quotes: 需要或不允许引用属性值
• selector-combinator-space-after: 在复合选择器之后要求或不允许留有一个空格
• selector-combinator-space-before: 在复合选择器之前要求或不允许留有一个空格
• selector-descendant-combinator-no-non-space: 不允许的字符的后代组合子选择器进行技术改造
• selector-pseudo-class-case: 为伪类选择器指定小写或大写
• selector-pseudo-class-parentheses-space-inside: 需要一个空格或不允许空格在括号里面的伪类选择器
• selector-pseudo-element-case: 为伪元素选择器指定小写或大写
• selector-pseudo-element-colon-notation: 为适用的伪元素指定单引号或双冒号符号
• selector-type-case: 指定小写或大写类型选择器

Selector list 选择器列表

• selector-list-comma-newline-after: 在选择器列表的逗号后指定一个换行符或禁止留有空格
• selector-list-comma-newline-before: 在选择器列表的逗号前指定一个换行符或禁止留有空格
• selector-list-comma-space-after: 在选择器列表的逗号后指定一个空格或禁止留有空格
• selector-list-comma-space-before: 在选择器列表的逗号前指定一个空格或禁止留有空格

Rule 规则

• rule-empty-line-before: 不允许rules前空一行

Media feature 媒体特性

• media-feature-colon-space-after: 在媒体特性的冒号后指定一个空格或禁止留有空格
• media-feature-colon-space-before: 在媒体特性的冒号前指定一个空格或禁止留有空格
• media-feature-name-case: 为媒体特性名称指定小写或大写
• media-feature-parentheses-space-inside: 需要一个空间或不允许空格在括号里面的媒体功能
• media-feature-range-operator-space-after: 需要一个空间或不允许空白范围运算符后媒体的特性
• media-feature-range-operator-space-before: 之前需要一个空间或不允许空格符范围在媒体功能

Media query list 媒体查询列表

• media-query-list-comma-newline-after: 需要一个换行符或不允许空格后媒体查询的逗号分隔列表
• media-query-list-comma-newline-before: 需要一个换行符或不允许空格之前媒体查询的逗号分隔列表
• media-query-list-comma-space-after: 需要一个空间或不允许空格后媒体查询的逗号分隔列表
• media-query-list-comma-space-before:需要一个空间或不允许空格之前媒体查询的逗号分隔列表

At-rule AT规则

• at-rule-empty-line-before: 在 AT规则 前要求或不允许留有空行
• at-rule-name-case: 指定at-rules小写或大写的名字
• at-rule-name-newline-after: at-rule名称后需要一个换行符
• at-rule-name-space-after: 需要一个空格后at-rule名称
• at-rule-semicolon-newline-after: 需要一个换行符之后at-rules的分号
• at-rule-semicolon-space-before: 需要一个空格之后at-rules的分号

Comment 注释

• comment-empty-line-before: 要求或不允许注释前面留有一个空格
• comment-whitespace-inside: 要求或不允许注释内留有一个空格

General / Sheet 常用样式

• indentation: 指定缩进
• linebreaks: Specify unix or windows linebreaks (Autofixable).
• max-empty-lines: 限制相邻的空行数
• max-line-length: 限制每行的长度
• no-eol-whitespace: 禁止行尾留有空白
• no-missing-end-of-source-newline: 不允许丢失end-of-source换行
• no-empty-first-line: Disallow empty first lines. (Autofixable)

vue语法校验需要安装eslint-plugins-vue插件

插件安装完成后，进入【插件配置】，即可找到刚才安装插件。它的对应的配置文件是.eslintrc.js，选项对应说明如下：

  module.exports = {  
      "extends": "plugin:vue/essential",  
      "parserOptions": {},      
      "rules": {}             //规则  
  };

更多配置说明可以参考options

规则简介

官方规则列表

规则设置：

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

增加或修改vue校验规则

修改.eslintrc.js文件，添加规则，比如:

  module.exports = {  
      "extends": "plugin:vue/base",  
      parserOptions: {  
          ecmaVersion: 2017,  
          sourceType: 'module'  
      },  
      "rules":{  
          //在computed properties中禁用异步actions  
          'vue/no-async-in-computed-properties': 'error',  
          //不允许重复的keys  
          'vue/no-dupe-keys': 'error',  
          //不允许重复的attributes  
          'vue/no-duplicate-attributes': 'error',  
          //在 <template> 标签下不允许解析错误  
          'vue/no-parsing-error': ['error',{  
              'x-invalid-end-tag': false,  
          }],  
          //不允许覆盖保留关键字  
          'vue/no-reserved-keys': 'error',  
          //强制data必须是一个带返回值的函数  
          // 'vue/no-shared-component-data': 'error',  
          //不允许在computed properties中出现副作用。  
          'vue/no-side-effects-in-computed-properties': 'error',  
          //<template>不允许key属性  
          'vue/no-template-key': 'error',  
          //在 <textarea> 中不允许mustaches  
          'vue/no-textarea-mustache': 'error',  
          //不允许在v-for或者范围内的属性出现未使用的变量定义  
          'vue/no-unused-vars': 'error',  
          //<component>标签需要v-bind:is属性  
          'vue/require-component-is': 'error',  
          // render 函数必须有一个返回值  
          'vue/require-render-return': 'error',  
          //保证 v-bind:key 和 v-for 指令成对出现  
          'vue/require-v-for-key': 'error',  
          // 检查默认的prop值是否有效  
          'vue/require-valid-default-prop': 'error',  
          // 保证computed属性中有return语句   
          'vue/return-in-computed-property': 'error',  
          // 强制校验 template 根节点  
          'vue/valid-template-root': 'error',  
          // 强制校验 v-bind 指令  
          'vue/valid-v-bind': 'error',  
          // 强制校验 v-cloak 指令  
          'vue/valid-v-cloak': 'error',  
          // 强制校验 v-else-if 指令  
          'vue/valid-v-else-if': 'error',  
          // 强制校验 v-else 指令   
          'vue/valid-v-else': 'error',  
          // 强制校验 v-for 指令  
          'vue/valid-v-for': 'error',  
          // 强制校验 v-html 指令  
          'vue/valid-v-html': 'error',  
          // 强制校验 v-if 指令  
          'vue/valid-v-if': 'error',  
          // 强制校验 v-model 指令  
          'vue/valid-v-model': 'error',  
          // 强制校验 v-on 指令  
          'vue/valid-v-on': 'error',  
          // 强制校验 v-once 指令  
          'vue/valid-v-once': 'error',  
          // 强制校验 v-pre 指令  
          'vue/valid-v-pre': 'error',  
          // 强制校验 v-show 指令  
          'vue/valid-v-show': 'error',  
          // 强制校验 v-text 指令  
          'vue/valid-v-text': 'error'  
      }  
  };  

在研究离线打包，和三方插件之后的一天，发现uniapp可以直接调用安卓里写的方法，之前完全是自己想复杂了，主要还是h5+ 的开发没那么熟悉。

此处基于uniapp在Android Studio离线打包成功后部分。

1.因为之前离线打包，安卓下的项目java里面的全部都删除了，现在新增一个自定义的包在下面新增一个java类。为了测试功能，写了个简单的加法。

package com.hji.test;  

public class AddCount {  
    public int add(int a, int b) {  
        return a + b;  
    }  
}  

在uniapp vue下，新增一个按钮，和方法

add2(){  
            var AddCount = plus.android.importClass('com.hji.test.AddCount');  
            var addCount = new AddCount();  
            this.result1 = addCount.add(1,2);  
        },

本地打包后，替换掉www下文件。运行就可以

简单哭了，我想的也太复杂了T T
为了测试调用安卓上页面，也写了个简单的拍照；
在自定义的包下新建一个java类

package com.hji.test;  

import android.content.Intent;  
import android.graphics.Bitmap;  
import android.os.Bundle;  
import android.provider.MediaStore;  
import android.support.v7.app.AppCompatActivity;  
import android.view.View;  
import android.widget.ImageView;  

import com.example.mytest.R;  

public class TakePhotoActivity extends AppCompatActivity {  
    private ImageView imageView;  

    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_take_photo);  

        imageView = findViewById(R.id.imageView);  

    }  

    static final int REQUEST_IMAGE_CAPTURE = 1;  

    public void takePhoto(View view) {  
        dispatchTakePictureIntent();  
    }  

    private void dispatchTakePictureIntent() {  
        Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);  
        if (takePictureIntent.resolveActivity(getPackageManager()) != null) {  
            startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE);  
        }  
    }  

    @Override  
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {  
        if (requestCode == REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) {  
            Bundle extras = data.getExtras();  
            Bitmap imageBitmap = (Bitmap) extras.get("data");  
            imageView.setImageBitmap(imageBitmap);  
        }  
    }  

}  

在res下layout新增一个拍照页面

<?xml version="1.0" encoding="utf-8"?>  
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    tools:context="com.hji.test.TakePhotoActivity">  

    <ImageView  
        android:id="@+id/imageView"  
        android:layout_width="342dp"  
        android:layout_height="360dp"  
        android:layout_marginStart="16dp"  
        android:layout_marginLeft="16dp"  
        android:layout_marginTop="17dp"  
        app:layout_constraintStart_toStartOf="parent"  
        app:layout_constraintTop_toBottomOf="@+id/button2"  
        tools:srcCompat="@tools:sample/avatars" />  

    <Button  
        android:id="@+id/button2"  
        style="@style/Widget.AppCompat.Button.Small"  
        android:layout_width="101dp"  
        android:layout_height="48dp"  
        android:layout_marginStart="63dp"  
        android:layout_marginLeft="63dp"  
        android:layout_marginTop="16dp"  
        android:onClick="takePhoto"  
        android:text="拍 照"  
        android:textColor="@android:color/holo_green_dark"  
        android:textSize="14sp"  
        android:typeface="normal"  
        android:visibility="visible"  
        app:layout_constraintStart_toStartOf="parent"  
      />  
</android.support.constraint.ConstraintLayout>

在uniapp下使用

    takePhoto() {  
            var main = plus.android.runtimeMainActivity();  
            var Intent = plus.android.importClass('android.content.Intent');  
            var MyActivity = plus.android.importClass('com.hji.test.TakePhotoActivity');  
            var intent = new Intent(main, MyActivity.class);  
            main.startActivity(intent);  
        },

写个按钮直接调用，本地打包后，运行。就OK了 = =

根据要求，新增安卓项目目录截图。

没想到会有这么多人需要结合原生开发。可能会遇到各种各样的问题；
留下demo代码。需要的可以下载测试下。
https://github.com/sunshine-jing/uniapp-AndroidTest
test是uniapp项目；
mytest是安卓项目

今天仔细看了下demo，红色是之前用插件的形式调试出来的；
绿色的是之后发现可以直接调用到addcout方法。
demo第一个测试出现 test123，是插件出来的，name和value是uniapp内传过去后，返回到界面上的。

本帖文档已集成到: hx产品文档

一个校验工具可以帮助我们在编写代码时避免一些愚蠢的错误。

一个好的校验工具可以在我们浪费时间找BUG之前告诉我们存在的问题。

一个好的校验工具可以确保一个项目遵循编码规范。

1. 插件安装与配置

HBuilderX 包含4款语法校验插件，htmlhint, stylelint, eslint-plugin-vue, eslint-js。主要用于校验html,css/less/sass/scss,vue, javascript

如下图:

1.1 安装插件

点击菜单【工具】【插件安装】，在弹出的窗口中，根据需要安装所需插件即可。

1.2 插件配置

安装完插件后，进入菜单【工具】【插件配置】，找到所需插件，进行插件配置。

2. 语法校验

当代码中出现错误时，保存的时候，底部工具栏会出现提示，且代码中出错的地方会出现红色波浪线，按下F4可以跳转到错误的地方。

如下图：

3. 插件规则配置

插件配置文件入口：菜单【工具】【插件配置】

stylus和php，暂时没有语法校验插件，后期会增加。

备注： 关于eslint， HBuilderX 2.6.8已支持语法错误自动修复。见本文第四章。

4. eslint自动修复、以及实时校验功能说明

2.6.8+版本起，新增eslint 文件保存自动修复错误、实时语法校验的功能。见https://ask.dcloud.net.cn/article/37070

2.2.0和2.6.8之间的版本，使用eslint一键修复功能。见https://ask.dcloud.net.cn/article/36532

混合开发ios与安卓蓝牙收发数据，通讯加密解密已经完成。还希望官方继续更新，欢迎大家一起讨论进步！

【此事件研究第二天】为了实现安卓和uniapp结合，发现之前是直接想复杂了，想着用插件的方式，完全可以直接调用java写的方法和页面。
uniapp直接调用安卓自定义方法

在需要接入三方sdk的情况下，研究了下uniapp离线打包。整个过程中遇到的坑
uniapp离线打包填坑记

在离线打包成功后，后续又花了些时间研究了，引入自定义插件。
参考文档：uni-app原生插件开发教程 Android Studio 版
全程参考官方提供文档，可最新sdk包里下载下来的UniPlugin-Hello-AS项目；
主要也是想弄明白整个流程。

纯小白经验记录贴，pc和手机端一起搞的，担心太久不搞手机会忘记。

1.在HbuilderX新建一个uniapp项目，就是最简单的hello uniapp,

1. 在Android Studio 内新建一个安卓项目，将uniapp项目离线打包至安卓项目内，并成功运行。
2. 全都成功后，按照官方提供的文档uni-app原生插件开发教程 Android Studio 版；
   在uni-app插件Module，我给的名字mytest_text,剩下的配置就按照官方提供的就行。

4.上面的完了，配置就结束了，可以开始开发了。（官方提供的其实已经很简单了，但是我太蠢了，看着脑壳疼，走了个简单的，枯了）
就是写了一个简单的方法可以在uniapp下vue中调用。第一步出去，那离成功就不远了。

在module下src->main->java->com.exmaple.mytest_test 下新建MyTestText。
参考UniPlugin-Hello-AS项目下的 RichAlertWXModule

package com.example.mytest_text;  

import com.taobao.weex.WXSDKEngine;  
import com.alibaba.fastjson.JSONObject;  
import com.taobao.weex.annotation.JSMethod;  
import com.taobao.weex.bridge.JSCallback;  

public class MyTestText extends WXSDKEngine.DestroyableModule {  
    public String NAME = "name";  
    public String VALUE = "value";  
    @Override  
    public void destroy() {  

    }  
    @JSMethod(uiThread = true)  
    public void add(JSONObject options, JSCallback jsCallback) {  
        System.out.println("WWWWWWW-WWWWW");  
        String name = options.getString(NAME);  
        String value = options.getString(VALUE);  
        JSONObject result = new JSONObject();  
        result.put("result",name+value);  
        jsCallback.invoke(result);  
    }  
}  

新建 MyTest_AppProxy

package com.example.mytest_text;  

import android.app.Application;  

import com.taobao.weex.WXSDKEngine;  
import com.taobao.weex.common.WXException;  

import io.dcloud.weex.AppHookProxy;  

public class MyTest_AppProxy  implements AppHookProxy {  
    @Override  
    public void onCreate(Application application) {  
    }  
}  

用于引入插件配置，
在安卓项目 assets下新建一个dcloud_uniplugins.json文件，

{  
  "nativePlugins": [  
    {  
      "hooksClass": "",  
      "plugins": [  
        {  
          "type": "module",  
          "name": "MyTest-Text",  
          "class": "com.example.mytest_text.MyTestText"  
        }  
      ]  
    },  
    {  
      "hooksClass": "uni.dcloud.io.uniplugin_stepcounter.StepCounterHookProxy"  
    }  
  ]  
}

name:为插件名，在uniapp调用时需要用到，class需要是自己java类

5.安卓上配置好，现在转向uniapp内，在需要的地方调用方法。本地打包，将生成的文件www下的替换掉之前的。在安卓下运行。就可以调用成功

运行后显示；

一款基于MUI框架制作红色精美的服装商城app界面模板，也可以用来做手机移动端服装购物商城或其它主题商城模板。

下载地址：https://www.sucaihuo.com/templates/5871.html

看图

这两个都表示长按触发事件，那么这两个有啥区别呢？

经过实践，发现在微信和h5端只有longpress起效果，在支付宝小程序端只有longTap起效果，一开始做用了longpress，结果坑了支付宝，这两个还要用区分编译分开来写两套代码

我在想官方不能把不同环境的长按事件合成一个吗？还是有技术难题

1、本程序使用HBuilderX工具开发
2、与井通接口对接，采集并解析数据展现给用户
3、使用uniapp，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台
4、本程序示例包含用户存储、与井通Api交互、与自开发程序交互、并提供开发基础组件和动画效果等功能