![](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/88/35/65_avatar_mid.jpg?v=0)
JavaScript语法校验
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, //不能有未定义的变量
}
};
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, //不能有未定义的变量
}
};
收起阅读 »
![](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/88/35/65_avatar_mid.jpg?v=0)
html语法校验
html语法校验插件,需要到插件市场安装。
安装完成后,进入【设置】【插件配置】【htmlhintrc】,点击htmlhintrc
, 即可配置相关规则。
如何配置选项?
选项配置文件是.htmlhintrc,目前已有的选项对应说明如下:
选项 | 说明 |
---|---|
tagname-lowercase | 标签名是否开启小写; true:启用, false:禁用 |
attr-lowercase | 属性名是否开启小写,true:启用, false:禁用 |
attr-value-double-quotes | 属性值是否必须放在双引号中,true:启用, false:禁用 |
doctype-first | Doctype是否必须是HTML文档的第一行,true:启用, false:禁用 |
tag-pair | 标签是否必须成对,true:启用, false:禁用 |
spec-char-escape | 特殊字符是否必须转义,true:启用, false:禁用 |
id-unique | ID属性是否必须唯一,true:启用, false:禁用 |
src-not-empty | src属性是否为空,true:启用, false:禁用 |
attr-no-duplication: | 同一标签中,属性值是否不可重复, true:启用, false:禁用 |
详细的配置说明可以参考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标签
}
html语法校验插件,需要到插件市场安装。
安装完成后,进入【设置】【插件配置】【htmlhintrc】,点击htmlhintrc
, 即可配置相关规则。
如何配置选项?
选项配置文件是.htmlhintrc,目前已有的选项对应说明如下:
选项 | 说明 |
---|---|
tagname-lowercase | 标签名是否开启小写; true:启用, false:禁用 |
attr-lowercase | 属性名是否开启小写,true:启用, false:禁用 |
attr-value-double-quotes | 属性值是否必须放在双引号中,true:启用, false:禁用 |
doctype-first | Doctype是否必须是HTML文档的第一行,true:启用, false:禁用 |
tag-pair | 标签是否必须成对,true:启用, false:禁用 |
spec-char-escape | 特殊字符是否必须转义,true:启用, false:禁用 |
id-unique | ID属性是否必须唯一,true:启用, false:禁用 |
src-not-empty | src属性是否为空,true:启用, false:禁用 |
attr-no-duplication: | 同一标签中,属性值是否不可重复, true:启用, false:禁用 |
详细的配置说明可以参考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标签
}
收起阅读 »
![](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/88/35/65_avatar_mid.jpg?v=0)
stylelint插件:css、less、scss语法校验说明
HBuilderX中,校验css、less、scss的语法校验插件是stylelint
如何配置选项?
配置文件是.stylelintrc.js
详细的配置说明可以参考
规则配置格式
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)
HBuilderX中,校验css、less、scss的语法校验插件是stylelint
如何配置选项?
配置文件是.stylelintrc.js
详细的配置说明可以参考
规则配置格式
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)
![](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/88/35/65_avatar_mid.jpg?v=0)
Vue语法校验
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'
}
};
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'
}
};
收起阅读 »
![](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/21/32/72_avatar_mid.jpg?v=0)
uniapp直接调用安卓自定义方法
在研究离线打包,和三方插件之后的一天,发现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了 = =
根据要求,新增安卓项目目录截图。
![](http://img-cdn-tc.dcloud.net.cn/uploads/article/20190712/4a4e162227aa19682426097e5250fb43.png)
没想到会有这么多人需要结合原生开发。可能会遇到各种各样的问题;
留下demo代码。需要的可以下载测试下。
https://github.com/sunshine-jing/uniapp-AndroidTest
test是uniapp项目;
mytest是安卓项目
今天仔细看了下demo,红色是之前用插件的形式调试出来的;
绿色的是之后发现可以直接调用到addcout方法。
demo第一个测试出现 test123,是插件出来的,name和value是uniapp内传过去后,返回到界面上的。
在研究离线打包,和三方插件之后的一天,发现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内传过去后,返回到界面上的。
![](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/88/35/65_avatar_mid.jpg?v=0)
HBuilderX语法校验、eslint实时校验自动修复功能说明
本帖文档已集成到: 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. 插件规则配置
插件配置文件入口:菜单【工具】【插件配置】
语言/文件 | 插件名称 | 配置文件 | 配置教程 |
---|---|---|---|
vue | eslint-plugin-vue | .eslintrc.js | vue规则配置说明 |
css/less/sass | stylelint | .stylelintrc.js | css规则配置说明 |
html | htmllint | .htmlhintrc | html规则配置说明 |
javascript | eslint-js | .eslintrc.js | js规则配置说明 |
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
本帖文档已集成到: 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. 插件规则配置
插件配置文件入口:菜单【工具】【插件配置】
语言/文件 | 插件名称 | 配置文件 | 配置教程 |
---|---|---|---|
vue | eslint-plugin-vue | .eslintrc.js | vue规则配置说明 |
css/less/sass | stylelint | .stylelintrc.js | css规则配置说明 |
html | htmllint | .htmlhintrc | html规则配置说明 |
javascript | eslint-js | .eslintrc.js | js规则配置说明 |
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
收起阅读 »![](https://img-cdn-tc.dcloud.net.cn/account/identicon/0a7cc9312e0c6c94d3d0e40798521405.png)
ios和安卓蓝牙通讯开发经验分享
混合开发ios与安卓蓝牙收发数据,通讯加密解密已经完成。还希望官方继续更新,欢迎大家一起讨论进步!
混合开发ios与安卓蓝牙收发数据,通讯加密解密已经完成。还希望官方继续更新,欢迎大家一起讨论进步!
![](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/21/32/72_avatar_mid.jpg?v=0)
安卓原生小白,uniapp离线打包接入自定义插件简单调用成功流程记录
【此事件研究第二天】为了实现安卓和uniapp结合,发现之前是直接想复杂了,想着用插件的方式,完全可以直接调用java写的方法和页面。
uniapp直接调用安卓自定义方法
在需要接入三方sdk的情况下,研究了下uniapp离线打包。整个过程中遇到的坑
uniapp离线打包填坑记
在离线打包成功后,后续又花了些时间研究了,引入自定义插件。
参考文档:uni-app原生插件开发教程 Android Studio 版
全程参考官方提供文档,可最新sdk包里下载下来的UniPlugin-Hello-AS项目;
主要也是想弄明白整个流程。
纯小白经验记录贴,pc和手机端一起搞的,担心太久不搞手机会忘记。
1.在HbuilderX新建一个uniapp项目,就是最简单的hello uniapp,
- 在Android Studio 内新建一个安卓项目,将uniapp项目离线打包至安卓项目内,并成功运行。
- 全都成功后,按照官方提供的文档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下的替换掉之前的。在安卓下运行。就可以调用成功
运行后显示;
【此事件研究第二天】为了实现安卓和uniapp结合,发现之前是直接想复杂了,想着用插件的方式,完全可以直接调用java写的方法和页面。
uniapp直接调用安卓自定义方法
在需要接入三方sdk的情况下,研究了下uniapp离线打包。整个过程中遇到的坑
uniapp离线打包填坑记
在离线打包成功后,后续又花了些时间研究了,引入自定义插件。
参考文档:uni-app原生插件开发教程 Android Studio 版
全程参考官方提供文档,可最新sdk包里下载下来的UniPlugin-Hello-AS项目;
主要也是想弄明白整个流程。
纯小白经验记录贴,pc和手机端一起搞的,担心太久不搞手机会忘记。
1.在HbuilderX新建一个uniapp项目,就是最简单的hello uniapp,
- 在Android Studio 内新建一个安卓项目,将uniapp项目离线打包至安卓项目内,并成功运行。
- 全都成功后,按照官方提供的文档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下的替换掉之前的。在安卓下运行。就可以调用成功
运行后显示;
收起阅读 »![](https://img-cdn-tc.dcloud.net.cn/account/identicon/18835d7c067702dbaf0112d6713c9859.png)
MUI框架制作红色精美的服装商城app界面模板
一款基于MUI框架制作红色精美的服装商城app界面模板,也可以用来做手机移动端服装购物商城或其它主题商城模板。
一款基于MUI框架制作红色精美的服装商城app界面模板,也可以用来做手机移动端服装购物商城或其它主题商城模板。
下载地址:https://www.sucaihuo.com/templates/5871.html
收起阅读 »![](https://img-cdn-tc.dcloud.net.cn/account/identicon/a158cca35f46dd5064d22ecd3b0a7279.png)
触发事件`@longTap`和`@longpress`
这两个都表示长按触发事件,那么这两个有啥区别呢?
经过实践,发现在微信和h5端只有longpress起效果,在支付宝小程序端只有longTap起效果,一开始做用了longpress,结果坑了支付宝,这两个还要用区分编译分开来写两套代码
我在想官方不能把不同环境的长按事件合成一个吗?还是有技术难题
这两个都表示长按触发事件,那么这两个有啥区别呢?
经过实践,发现在微信和h5端只有longpress起效果,在支付宝小程序端只有longTap起效果,一开始做用了longpress,结果坑了支付宝,这两个还要用区分编译分开来写两套代码
我在想官方不能把不同环境的长按事件合成一个吗?还是有技术难题
收起阅读 »