Sublime代码规范安装实时监测插件安装
一:安装eslint
1、eslint
相比jslint、jshint等这些检测工具来说,eslint最大的吸引力就在于可以支持js、jsx、es6(es2015)等代码的检测。立即开始安装吧!
2、先安装两个nodejs插件
npm install eslint -g
npm install babel-eslint -g
3、在sublime里安装eslint插件
1. 安装 SublimeLinter
调出package control 【ctrl + shift + p】搜索SublimeLinter进行安装
2. 安装 SublimeLinter-contrib-eslint
调出package control搜索eslint安装即可,全名:SublimeLinter-contrib-eslint。注意:该插件只支持Sublime text 3
4、在项目根目录编写配置文件: .eslintrc
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"parser": "babel-eslint",
"ecmaFeatures": {
"jsx": true
},
//"extends": ["eslint:all"],
"rules": {
"no-mixed-spaces-and-tabs": [2, false],
"unicode-bom":0,
"indent": [1, 4, { "SwitchCase": 1 }],
"linebreak-style": [0, "windows"],
"eol-last": ["error", "always"],
"max-len": [1, 120],
"semi": [2, "always"],
"curly": [2, "all"],
"no-use-before-define": ["error", { "functions": true, "classes": true }],
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],
"no-loop-func": "error",
"radix": "error",
"quotes": [1, "single", "avoid-escape"],
"no-multi-str": "error",
"no-new-wrappers":2,
"no-new-object": "error",
"no-new-func": 1,
"no-array-constructor":2,
"guard-for-in": 1,
"no-inner-declarations": [2, "functions"],
"no-prototype-builtins":2,
"no-extend-native": 2,
"no-proto":2,
"no-eval":2,
"no-with":2,
"no-delete-var": "error"
}
}
编写完成后放至你项目根目录下即可。
window用户可用命令提示符生成该文件:echo {} > .eslintrc
更多配置信息请参看eslint官网
代码检测效果图:
二:安装csslint
安装SublimeLinter-csslint的步骤:
使用npm全局安装csslint:
1: npm install -g csslint
2: 在Sublime Text 3中安装SublimeLinter
3: 在Sublime Text 3中安装 【ctrl + shift + p】SublimeLinter-csslint
4: 在项目根目录编写配置文件: .csslintrc
window用户可用命令提示符生成该文件:echo {} > . csslintrc
示例如下:
{
"rules": {
"known-properties": 2, //未知的属性报错
"empty-rules": 1, //空规则
"duplicate-properties": 1, //重复属性
"overqualified": 0, //允许元素标签的优先级,如 div.test
"adjoining-classes": 0, //允许 .foo.bar 格式的连写
"important": 0,
"indentation": 4,
"string-quotes": "double",
"max-line-length": [120, {
"severity": "warning"
}],
"no-extra-semicolons": true,
"selector-pseudo-class-case": ["lower", {
"severity": "warning"
}],
"selector-pseudo-element-case": ["lower", {
"severity": "warning"
}],
"selector-type-case": ["lower", {
"severity": "warning"
}],
"property-case": "lower",
"at-rule-name-case": "lower",
"media-feature-name-case": "lower",
"unit-case": "lower",
"function-name-case": "lower",
"value-keyword-case": "lower",
"color-hex-case": "lower",
"declaration-colon-space-before": "never",
"declaration-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-colon-space-after": "always",
"declaration-block-single-line-max-declarations": 1,
"declaration-block-semicolon-newline-before": "never-multi-line",
"declaration-block-semicolon-newline-after": "always",
"declaration-block-semicolon-space-before": "never",
"declaration-block-trailing-semicolon": "always",
"block-no-empty": true,
"block-no-single-line": true,
"block-closing-brace-newline-before": "always",
"block-closing-brace-newline-after": "always",
"block-opening-brace-space-before": "always",
"block-opening-brace-newline-after": "always",
"selector-max-empty-lines": 0,
"selector-list-comma-space-before": "never",
"selector-list-comma-newline-before": "never-multi-line",
"selector-list-comma-newline-after": "always",
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always",
"declaration-block-no-redundant-longhand-properties": [true, {
"severity": "warning"
}],
"font-weight-notation": "numeric",
"font-family-name-quotes": "always-where-recommended",
"font-family-no-duplicate-names": true,
"number-leading-zero": ["never", {
"severity": "warning"
}],
"number-no-trailing-zeros": [true, {
"severity": "warning"
}],
"length-zero-no-unit": true,
"color-hex-length": "short",
"value-list-comma-newline-before": "never-multi-line",
"value-list-comma-newline-after": "never-multi-line",
"value-list-comma-space-before": "never",
"value-list-comma-space-after": "always",
"selector-no-qualifying-type": [true, {
"severity": "warning"
}],
"function-url-quotes": ["never", {
"severity": "warning"
}],
"media-feature-no-missing-punctuation": true,
"media-query-list-comma-newline-after": "always",
"media-query-list-comma-space-before": "never",
"comment-whitespace-inside": "always",
"selector-max-compound-selectors": [3, {
"severity": "warning"
}]
}
}
5: 重启sublime即可看到效果
三:安装 HTMLHint
1:JavaScript with node
install
npm
installhtmlhint
--save
使用npm全局安装csslint:
1: npm install -g htmlhint
2: 在Sublime Text 3中安装SublimeLinter
3: 在Sublime Text 3中安装【ctrl + shift + p】SublimeLinter-htmlhint
4: 在项目根目录编写配置文件: .htmlhintrc
window用户可用命令提示符生成该文件:echo {} > . htmlhintrc
示例如下:
{
"asset-type": true,
"attr-lowercase": true,
"attr-no-duplication": true,
"attr-value-double-quotes": true,
"bool-attribute-value": true,
"button-name": true,
"button-type": true,
"charset": true,
"css-in-head": true,
"doctype": true,
"html-lang": true,
"ie-edge": true,
"img-alt": true,
"img-src": true,
"img-title": true,
"img-width-height": true,
"indent-char": "space-4",
"lowercase-class-with-hyphen": true,
"lowercase-id-with-hyphen": true,
"nest": true,
"rel-stylesheet": true,
"script-content": true,
"script-in-tail": true,
"self-close": "no-close",
"spec-char-escape": true,
"style-content": true,
"style-disabled": true,
"tag-pair": true,
"tagname-lowercase": true,
"title-required": true,
"unique-id": true,
"no-duplication-id-and-name": true,
"viewport": true,
"label-for-input": true,
"no-meta-css": {
"threshold": 3,
"minlen": 3
}
}
重启sublime,效果如下: