• ESLint规则整理与实际应用


    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
    本文链接:https://blog.csdn.net/lhb_11/article/details/77962933
    1.安装
    1.1本地安装(运用到此项目)

    $ npm install eslint --save-dev
    1
    1.2全局安装(运用到所有项目)

    $ npm install -g eslint
    1
    2.配置
    2.1使用 .eslintrc 文件

    $ eslint --init
    1


    2.2在 package.json 中添加 eslintConfig配置块

    2.3直接在代码文件中定义

    2.3.1 禁用 ESLint:

    /* eslint-disable */
    var a = 100;
    console.log(a);
    /* eslint-enable */
    1
    2
    3
    4
    2.3.2 禁用一条规则:

    /*eslint-disable no-console */
    var a = 100;
    console.log(a);
    /*eslint-enable no-console */
    1
    2
    3
    4
    2.3.3 调整规则:

    /* eslint no-console:0 */
    var a = 100;
    console.log(a);
    1
    2
    3
    3.错误级别
    “off” or 0 - 关闭(禁用)规则
    “warn” or 1 - 将规则视为一个警告(并不会导致检查不通过)
    “error” or 2 - 将规则视为一个错误 (退出码为1,检查不通过)
    有些规则还带有可选的参数。

    4.常用规则
    类别 描述
    Possible Errors 可能的错误或逻辑错误
    no-cond-assign 禁止条件表达式中出现模棱两可的赋值操作符
    no-console 禁用console
    no-constant-condition 禁止在条件中使用常量表达式
    no-debugger 禁用 debugger
    no-dupe-args 禁止 function 定义中出现重名参数
    no-dupe-keys 禁止对象字面量中出现重复的 key
    no-duplicate-case 禁止出现重复的 case 标签
    no-empty 禁止出现空语句块
    no-ex-assign 禁止对 catch 子句的参数重新赋值
    no-extra-boolean-cast 禁止不必要的布尔转换
    no-extra-parens 禁止不必要的括号
    no-extra-semi 禁止不必要的分号
    no-func-assign 禁止对 function 声明重新赋值
    no-inner-declarations 禁止在嵌套的块中出现变量声明或 function 声明
    no-irregular-whitespace 禁止在字符串和注释之外不规则的空白
    no-obj-calls 禁止把全局对象作为函数调用
    no-sparse-arrays 禁用稀疏数组
    no-prototype-builtins 禁止直接使用Object.prototypes 的内置属性
    no-unexpected-multiline 禁止出现令人困惑的多行表达式
    no-unreachable 禁止在return、throw、continue 和 break语句之后出现不可达代码
    use-isnan 要求使用 isNaN() 检查 NaN
    valid-typeof 强制 typeof 表达式与有效的字符串进行比较
    —– —–
    Best Practices 最佳实践
    array-callback-return 强制数组方法的回调函数中有 return 语句
    block-scoped-var 强制把变量的使用限制在其定义的作用域范围内
    complexity 指定程序中允许的最大环路复杂度
    consistent-return 要求 return 语句要么总是指定返回的值,要么不指定
    curly 强制所有控制语句使用一致的括号风格
    default-case 要求 switch 语句中有 default 分支
    dot-location 强制在点号之前和之后一致的换行
    dot-notation 强制在任何允许的时候使用点号
    eqeqeq 要求使用 === 和 !==
    guard-for-in 要求 for-in 循环中有一个 if 语句
    no-alert 禁用 alert、confirm 和 prompt
    no-case-declarations 不允许在 case 子句中使用词法声明
    no-else-return 禁止 if 语句中有 return 之后有 else
    no-empty-function 禁止出现空函数
    no-eq-null 禁止在没有类型检查操作符的情况下与 null 进行比较
    no-eval 禁用 eval()
    no-extra-bind 禁止不必要的 .bind() 调用
    no-fallthrough 禁止 case 语句落空
    no-floating-decimal 禁止数字字面量中使用前导和末尾小数点
    no-implicit-coercion 禁止使用短符号进行类型转换
    no-implicit-globals 禁止在全局范围内使用 var 和命名的 function 声明
    no-invalid-this: 禁止 this 关键字出现在类和类对象之外
    no-lone-blocks 禁用不必要的嵌套块
    no-loop-func 禁止在循环中出现 function 声明和表达式
    no-magic-numbers 禁用魔术数字
    no-multi-spaces 禁止使用多个空格
    no-multi-str 禁止使用多行字符串
    no-new 禁止在非赋值或条件语句中使用 new 操作符
    no-new-func 禁止对 Function 对象使用 new 操作符
    no-new-wrappers 禁止对 String,Number 和 Boolean 使用 new 操作符
    no-param-reassign 不允许对 function 的参数进行重新赋值
    no-redeclare 禁止使用 var 多次声明同一变量
    no-return-assign 禁止在 return 语句中使用赋值语句
    no-script-url 禁止使用 javascript: url
    no-self-assign 禁止自我赋值
    no-self-compare 禁止自身比较
    no-sequences 禁用逗号操作符
    no-unmodified-loop-condition 禁用一成不变的循环条件
    no-unused-expressions 禁止出现未使用过的表达式
    no-useless-call 禁止不必要的 .call() 和 .apply()
    no-useless-concat 禁止不必要的字符串字面量或模板字面量的连接
    vars-on-top 要求所有的 var 声明出现在它们所在的作用域顶部
    —– —–
    Strict Mode 使用严格模式和严格模式指
    strict 要求或禁止使用严格模式指令
    —– —–
    Variables 变量声明
    init-declarations 要求或禁止 var 声明中的初始化
    no-catch-shadow 不允许 catch 子句的参数与外层作用域中的变量同名
    no-restricted-globals 禁用特定的全局变量
    no-shadow 禁止 var 声明 与外层作用域的变量同名
    no-undef 禁用未声明的变量,除非它们在 /global / 注释中被提到
    no-undef-init 禁止将变量初始化为 undefined
    no-unused-vars 禁止出现未使用过的变量
    no-use-before-define 不允许在变量定义之前使用它们
    —– —–
    Nodejs and CommonJS Node.js,CommonJS
    global-require 要求 require() 出现在顶层模块作用域中
    handle-callback-err 要求回调函数中有容错处理
    no-mixed-requires 禁止混合常规 var 声明和 require 调用
    no-new-require 禁止调用 require 时使用 new 操作符
    no-path-concat 禁止对 dirname 和 filename进行字符串连接
    no-restricted-modules 禁用指定的通过 require 加载的模块
    —– —–
    Stylistic Issues 风格指南
    array-bracket-spacing 强制数组方括号中使用一致的空格
    block-spacing 强制在单行代码块中使用一致的空格
    brace-style 强制在代码块中使用一致的大括号风格
    camelcase 强制使用骆驼拼写法命名约定
    comma-spacing 强制在逗号前后使用一致的空格
    comma-style 强制使用一致的逗号风格
    computed-property-spacing 强制在计算的属性的方括号中使用一致的空格
    eol-last 强制文件末尾至少保留一行空行
    func-names 强制使用命名的 function 表达式
    func-style 强制一致地使用函数声明或函数表达式
    indent 强制使用一致的缩进
    jsx-quotes 强制在 JSX 属性中一致地使用双引号或单引号
    key-spacing 强制在对象字面量的属性中键和值之间使用一致的间距
    keyword-spacing 强制在关键字前后使用一致的空格
    linebreak-style 强制使用一致的换行风格
    lines-around-comment 要求在注释周围有空行
    max-depth 强制可嵌套的块的最大深度
    max-len 强制一行的最大长度
    max-lines 强制最大行数
    max-nested-callbacks 强制回调函数最大嵌套深度
    max-params 强制 function 定义中最多允许的参数数量
    max-statements 强制 function 块最多允许的的语句数量
    max-statements-per-line 强制每一行中所允许的最大语句数量
    new-cap 要求构造函数首字母大写
    new-parens 要求调用无参构造函数时有圆括号
    newline-after-var 要求或禁止 var 声明语句后有一行空行
    newline-before-return 要求 return 语句之前有一空行
    newline-per-chained-call 要求方法链中每个调用都有一个换行符
    no-array-constructor 禁止使用 Array 构造函数
    no-continue 禁用 continue 语句
    no-inline-comments 禁止在代码行后使用内联注释
    no-lonely-if 禁止 if 作为唯一的语句出现在 else 语句中
    no-mixed-spaces-and-tabs 不允许空格和 tab 混合缩进
    no-multiple-empty-lines 不允许多个空行
    no-negated-condition 不允许否定的表达式
    no-plusplus 禁止使用一元操作符 ++ 和 –
    no-spaced-func 禁止 function 标识符和括号之间出现空格
    no-ternary 不允许使用三元操作符
    no-trailing-spaces 禁用行尾空格
    no-whitespace-before-property 禁止属性前有空白
    object-curly-newline 强制花括号内换行符的一致性
    object-curly-spacing 强制在花括号中使用一致的空格
    object-property-newline 强制将对象的属性放在不同的行上
    one-var 强制函数中的变量要么一起声明要么分开声明
    one-var-declaration-per-line 要求或禁止在 var 声明周围换行
    operator-assignment 要求或禁止在可能的情况下要求使用简化的赋值操作符
    operator-linebreak 强制操作符使用一致的换行符
    quote-props 要求对象字面量属性名称用引号括起来
    quotes 强制使用一致的反勾号、双引号或单引号
    require-jsdoc 要求使用 JSDoc 注释
    semi 要求或禁止使用分号而不是 ASI
    semi-spacing 强制分号之前和之后使用一致的空格
    sort-vars 要求同一个声明块中的变量按顺序排列
    space-before-blocks 强制在块之前使用一致的空格
    space-before-function-paren 强制在 function的左括号之前使用一致的空格
    space-in-parens 强制在圆括号内使用一致的空格
    space-infix-ops 要求操作符周围有空格
    space-unary-ops 强制在一元操作符前后使用一致的空格
    spaced-comment 强制在注释中 // 或 /* 使用一致的空格

    5.实际项目中使用(Gulp中使用)
    5.1 安装插件

    $ npm install gulp-eslint
    1
    5.2 应用

    var gulp = require('gulp');
    var eslint = require('gulp-eslint');
    gulp.task('lint',function(){
    return gulp.src(['app/**/*.js']) //指定的校验路径
    .pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校验文件
    .pipe(eslint.format())
    });
    1
    2
    3
    4
    5
    6
    7
    输入命令行

    $ gulp lint
    1
    就可以直接运行了相应的配置文件来校验文件了。

    5.3 忽视

    你可以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。.eslintignore 文件是一个纯文本文件,其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。例如,以下将忽略所有的 JavaScript 文件:

    **/*.js

    当 ESLint 运行时,在确定哪些文件要检测之前,它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件,当遍历目录时,将会应用这些偏好设置。一次只有一个 .eslintignore 文件会被使用,所以,不是当前工作目录下的 .eslintignore 文件将不会被用到。

    Globs 匹配使用 node-ignore,所以大量可用的特性有:
    1
    2
    3
    4
    5
    6
    7
    以 # 开头的行被当作注释,不影响忽略模式。
    路径是相对于 .eslintignore 的位置或当前工作目录。这也会影响通过 –ignore-pattern传递的路径。
    忽略模式同 .gitignore 规范
    以 ! 开头的行是否定模式,它将会重新包含一个之前被忽略的模式。

    除了 .eslintignore 文件中的模式,ESLint总是忽略 /node_modules/ 和 /bower_components/ 中的文件。

    例如:把下面 .eslintignore 文件放到当前工作目录里,将忽略 node_modules,bower_components 和所有以 .ts.js 或者 .coffee.js 为扩展名的文件以及 build/ 目录下除了 build/index.js 的所有文件。

    /node_modules/ and /bower_components/ ignored by default

    Ignore built files except build/index.js

    build/*
    !build/index.js

    如果相比于当前工作目录下 .eslintignore 文件,你更想使用一个不同的文件,你可以在命令行使用 –ignore-path 选项指定它。例如,你可以使用 .jshintignore 文件,因为它有相同的格式:

    eslint –ignore-path .jshintignore file.js

    你也可以使用你的 .gitignore 文件:

    eslint –ignore-path .gitignore file.js

    任何文件只要满足标准忽略文件格式都可以用。记住,指定 –ignore-path 意味着任何现有的 .eslintignore 文件将不被使用。请注意,.eslintignore 中的匹配规则比 .gitignore 中的更严格。

    使用到,记录一下
    ————————————————
    版权声明:本文为CSDN博主「lhb_11」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/lhb_11/article/details/77962933

  • 相关阅读:
    JQuery EasyUI的datagrid的使用方式总结
    重新=》easyui DataGrid是否可以动态的改变列显示的顺序
    easyui datagrid 列拖动
    MTK平台下Battery驱动分析
    Shell编程——Shell中的数学运算
    新产品为了效果,做的比較炫,用了非常多的图片和JS,所曾经端的性能是非常大的问题,分篇记录前端性能优化的一些小经验。
    iOS内存管理机制解析之MRC手动引用计数机制
    微软下一代站点开发框架:ASP.NET MVC 6 新特性揭秘
    JS简单正则得到字符串中特定的值
    数据结构和算法面试总结
  • 原文地址:https://www.cnblogs.com/qinlongqiang/p/11633390.html
Copyright © 2020-2023  润新知