来源:我的博客站 OceanicKang |《Sublime Eslint代码规范检查 插件》
需要用到 npm,如果没装过 npm,请看我的另一篇文章《NPM 安装 及 简单配置》
这个是 nodejs 环境下的 eslint 工具,没有这个的话 sublime 就是通过调用这个来进行 eslint 检查的
$ npm install eslint -g
# 或者
$ cnpm install eslint -g
(要配置eslint的小伙伴们,应该都是知道sublime插件安装方法的,我就不重复了)
首选项 --> Packages Settings --> SublimeLinter --> Settings
将下面代码复制进去
{
"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 所在文件夹即可。
选项 | 类型 | 默认 | 备注 |
---|---|---|---|
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
然后将下面这串代码复制到 .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: