Sublime Eslint代码规范检查 插件
     发布在:Others      浏览:43      评论:0 条评论

需要用到 npm,如果没装过 npm,请看我的另一篇文章《NPM 安装 及 简单配置》

Eslint安装

这个是 nodejs 环境下的 eslint 工具,没有这个的话 sublime 就是通过调用这个来进行 eslint 检查的

$ npm install eslint -g
# 或者
$ cnpm install eslint -g

Sublime配置

(要配置eslint的小伙伴们,应该都是知道sublime插件安装方法的,我就不重复了)

  1. 安装 SublimeLinter 插件 和 ESlint 插件

首选项 --> Packages Settings --> SublimeLinter --> Settings

Sublime Eslint代码规范检查 插件

将下面代码复制进去

{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
        /*********************这里是关键*********************/
            "eslint": {
                "@disable": false,
                "args": [],
                "excludes": []
            },
        /**************************************************/
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        /*********************这里是关键*********************/
        "paths": {
            "linux": [],
            "osx": [],
            "windows": [
                "E:\nodejs\node_global"
            ]
        },
        /**************************************************/
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "javascript (babel)": "javascript",
            "magicpython": "python",
            "php": "html",
            "python django": "python",
            "pythonimproved": "python"
        },
        "tooltip_fontsize": "1rem",
        "tooltip_theme": "Packages/SublimeLinter/tooltip-themes/Default/Default.tooltip-theme",
        "tooltip_theme_excludes": [],
        "tooltips": false,
        "use_current_shell_path": false,
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

“linters” 里的代码一般在安装 eslint 插件的时候就会自动添加。

"paths" 里主要填写本地 eslint 的路径,即 npm 安装的 eslint 路径。根据你的系统选择,Linux 环境下写在 linux 里,Windows 环境下写在 windows 里。路径只需要写到 eslint 所在文件夹即可。

  1. SublimeLinter配置
选项 类型 默认 备注
debug boolean false 如果为true,SublimeLinter会将检查结果打印到Sublime的控制台中
lint_mode string background 设置当前的lint模式,可选值有background(后台实时)、load/save、save only(仅保存时候)和manual
path array 设置额外的路径用于搜索可执行文件。例如,设置nodejs的位置
show_errors_on_save boolean false 当你保存文件的时候会弹出一个显示检查结果的快速面板
linters object 分别设置每个linter插件

更多配置可查看官方文档 http://www.sublimelinter.com/en/latest/linter_settings.html

Eslint 配置文件

  1. 在项目跟目录创建(.eslintrc.js)文件

然后将下面这串代码复制到 .eslintrc.js 这个文件里

module.exports = {
"env": {
"browser": true,
"node": true,
"es6": true, // 这个设置会自动启用 ES6 语法
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 6, // 设置为 3, 5 (默认), 6、7 或 8 指定你想要使用的 ECMAScript 版本。你也可以指定为 2015(同 6),2016(同 7),或 2017(同 8)使用年份命名
"sourceType": "module", // 设置为 "script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)
"ecmaFeatures": { // 这是个对象,表示你想使用的额外的语言特性:
"jsx": true, // 启用 JSX
}
},
// 规则配置
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
],
//
//
// 可能的错误
// 这些规则与 JavaScript 代码中可能的语法错误或逻辑错误有关
//
// 禁止 for 循环出现方向错误的循环,比如 for (i = 0; i < 10; i--)
'for-direction': 2,
// getter 必须有返回值,并且禁止返回空,比如 return;
'getter-return': [
'error',
{
allowImplicit: false
}
],
// 禁止在 if, for, while 里使用赋值语句,除非这个赋值语句被括号包起来了
'no-cond-assign': [
'error',
'except-parens'
],
// 禁止使用 console
// @off console 的使用很常见
'no-console': 0,
// 禁止将常量作为 if, for, while 里的测试条件,比如 if (true), for (;;),除非循环内部有 break 语句
'no-constant-condition': [
'error',
{
checkLoops: false
}
],
// 禁止在正则表达式中出现 Ctrl 键的 ASCII 表示,即禁止使用 /\x1f/
// 开启此规则,因为字符串中一般不会出现 Ctrl 键,所以一旦出现了,可能是一个代码错误
'no-control-regex': 2,
// @fixable 禁止使用 debugger
'no-debugger': 2,
// 禁止在函数参数中出现重复名称的参数
'no-dupe-args': 2,
// 禁止在对象字面量中出现重复名称的键名
'no-dupe-keys': 2,
//禁止多余的冒号
"no-extra-semi": 2,
//禁止switch穿透
"no-fallthrough": 1,
//禁止省略浮点数中的0 .5 3.
"no-floating-decimal": 2,
//禁止重复的函数声明
"no-func-assign": 2,
//禁止使用八进制数字
"no-octal": 2,
//禁止使用八进制转义序列
"no-octal-escape": 2,
//不能比较自身
"no-self-compare": 2,
//不能有声明后未被使用的变量或参数
"no-unused-vars": [2, {"vars": "all", "args": "none"}],
//一行结束后面不要有空格
"no-trailing-spaces": 1,
//不能有未定义的变量
"no-undef": 1,
//函数调用时 函数名与()之间不能有空格
"no-spaced-func": 2,
//禁止混用tab和空格
"no-mixed-spaces-and-tabs": [2, false],
//换行风格
"linebreak-style": [0, "windows"],
//空行最多不能超过2行
"no-multiple-empty-lines": [1, {"max": 2}],
//缩进风格
"indent": [2, 4],
//引号类型 `` "" ''
"quotes": [1, "single"],
//关键字后面是否要空一格
"space-after-keywords": [0, "always"],
//不以新行开始的块{前面要不要有空格
"space-before-blocks": [1, "always"],
//函数定义时括号前面要不要有空格
"space-before-function-paren": [1, "always"],
//一元运算符的前/后要不要加空格
"space-unary-ops": [1, { "words": true, "nonwords": false }],
//使用严格模式
"strict": 2,
//this别名
"consistent-this": [2, "self"],
//switch语句最后必须有default
"default-case": 2,
}
};

这串代码是对你 eslint 检查规则的配置,这是我自己配的代码规范,当然你也可以自己配。

上面这些代码已经涵盖了日常使用的一些,还有更多规则还请自行查看官方文档 http://eslint.cn/docs/rules/

最后

SublimeLinter 不只是支持 ESlint,还有很多,比如 php 代码规范检查

SublimeLinter 还有很多功效,在这里就不细讲了,有待各位挖掘哈。

【注】由于 CSDN 改版导致图片全部失效,而我又有点懒(略略略)。所以图片我全删了,大家看着文字来哈 :aini:

Responses