Sublime代码规范安装实时监测插件安装

Sublime代码规范安装实时监测插件安装

一：安装eslint

1、eslint

相比jslint、jshint等这些检测工具来说，eslint最大的吸引力就在于可以支持js、jsx、es6(es2015)等代码的检测。立即开始安装吧！

2、先安装两个nodejs插件

npminstall eslint -g

npminstall 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: npminstall -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

install

htmlhint

--save[/code]
使用npm全局安装csslint：

1: npminstall -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，效果如下：