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

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 install htmlhint --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，效果如下：

转载于:https://my.oschina.net/joldy/blog/831432