devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【最佳实践】Eslint 配置、使用技巧、代码检查的过程、肝这一篇就够了！_eslint.config.mjs

作者：我家自动化 | 2024-07-29 03:17:09

赞

踩

eslint.config.mjs

大家好，我是DX3906

目录

Eslint 配置

文件配置

.eslintrc.js 或者eslint.config.mjs 文件

eslintrc 总配置参考文档，按需使用：

在vscode中使用eslint插件

配置.eslintignore 文件

在setting中搜所eslint

代码检查的过程通常如下【面试题】：

结语

ESLint 是一个插件化的静态代码分析工具，用于识别 JavaScript 代码中的问题。它在代码质量和编码风格方面有助于保持一致性。

Eslint 配置

  • 安装：npm install -g eslint
  • 初始化：eslint --init

1.这里选：To check syntax and find problems【检查语法并查找问题】

2.这里选：JavaScript modules【JavaScript模块（ECMAScript Modules，简称ESM）】

3.您的项目使用哪个框架？按需选择 【React或者Vue】

4.你的项目使用TypeScript吗？按需选择【Ts或者Js】

5.你的代码在哪里运行？按 a 都选上（a 选择所有，i 反选全部）

6.您想现在安装它们吗？选择 YES

7.您想使用哪个包管理器？选择 npm或者yarn

文件配置

.eslintrc.js 或者eslint.config.mjs 文件

  • 安装结束后，项目根目录下多出了新的文件 .eslintrc.js，修改如下：

  • react 项目配置

  1. import globals from "globals";
  2. import pluginJs from "@eslint/js";
  3. import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
  4.  
  5.  
  6. export default [
  7.   {files: ["**/*.{js,mjs,cjs,jsx}"]},
  8.   { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
  9.   {languageOptions: { globals: {...globals.browser, ...globals.node} }},
  10.   pluginJs.configs.recommended,
  11.   pluginReactConfig,
  12. ];
  • eslintrc 总配置参考文档，按需使用：
  1. /**
  2.  * ESLint rules 规则
  3.  *	off 或 0 : 表示关闭规则
  4.  *	warn 或 1 : 表示开启规则，使用警告级别的错误（不会导致程序退出）
  5.  *  error 或 2 : 表示开启规则，使用错误级别的错误（会导致程序退出）
  6.  */
  7.  
  8. module.exports = {
  9.   parser: 'babel-eslint',
  10.   parserOptions: {
  11.     ecmaVersion: 2017,
  12.     sourceType: 'module',
  13.     ecmaFeatures: {
  14.       experimentalObjectRestSpread: true,
  15.       jsx: true,
  16.       modules: true
  17.     }
  18.   },
  19.   env: {
  20.     browser: true,
  21.     node: true,
  22.     commonjs: true,
  23.     es6: true
  24.   },
  25.   // 以当前目录为根目录，不再向上查找 .eslintrc.js
  26.   root: true,
  27.   rules: {
  28.     // 禁止 for 循环出现方向错误的循环，比如 for (i = 0; i < 10; i--)
  29.     'for-direction': 'error',
  30.     // getter 必须有返回值，并且禁止返回空，比如 return;
  31.     'getter-return': [
  32.       'error',
  33.       {
  34.         allowImplicit: false
  35.       }
  36.     ],
  37.     // 禁止将 await 写在循环里，因为这样就无法同时发送多个异步请求了
  38.     // @off 要求太严格了，有时需要在循环中写 await
  39.     'no-await-in-loop': 'off',
  40.     // 禁止与负零进行比较
  41.     'no-compare-neg-zero': 'error',
  42.     // 禁止在测试表达式中使用赋值语句，除非这个赋值语句被括号包起来了
  43.     'no-cond-assign': [
  44.       'error',
  45.       'except-parens'
  46.     ],
  47.     // 禁止使用 console
  48.     // @off console 的使用很常见
  49.     'no-console': 'off',
  50.     // 禁止将常量作为分支条件判断中的测试表达式，但允许作为循环条件判断中的测试表达式
  51.     'no-constant-condition': [
  52.       'error',
  53.       {
  54.         checkLoops: false
  55.       }
  56.     ],
  57.     // 禁止在正则表达式中出现 Ctrl 键的 ASCII 表示，即禁止使用 /\x1f/
  58.     // @off 几乎不会遇到这种场景
  59.     'no-control-regex': 'off',
  60.     // @fixable 禁止使用 debugger
  61.     'no-debugger': 'error',
  62.     // 禁止在函数参数中出现重复名称的参数
  63.     'no-dupe-args': 'error',
  64.     // 禁止在对象字面量中出现重复名称的键名
  65.     'no-dupe-keys': 'error',
  66.     // 禁止在 switch 语句中出现重复测试表达式的 case
  67.     'no-duplicate-case': 'error',
  68.     // 禁止出现空代码块，允许 catch 为空代码块
  69.     'no-empty': [
  70.       'error',
  71.       {
  72.         allowEmptyCatch: true
  73.       }
  74.     ],
  75.     // 禁止在正则表达式中使用空的字符集 []
  76.     'no-empty-character-class': 'error',
  77.     // 禁止将 catch 的第一个参数 error 重新赋值
  78.     'no-ex-assign': 'error',
  79.     // @fixable 禁止不必要的布尔类型转换，比如 !! 或 Boolean
  80.     'no-extra-boolean-cast': 'error',
  81.     // @fixable 禁止函数表达式中出现多余的括号，比如 let foo = (function () { return 1 })
  82.     'no-extra-parens': [
  83.       'error',
  84.       'functions'
  85.     ],
  86.     // @fixable 禁止出现多余的分号
  87.     'no-extra-semi': 'error',
  88.     // 禁止将一个函数声明重新赋值，如：
  89.     // function foo() {}
  90.     // foo = bar
  91.     'no-func-assign': 'error',
  92.     // 禁止在 if 代码块内出现函数声明
  93.     'no-inner-declarations': [
  94.       'error',
  95.       'both'
  96.     ],
  97.     // 禁止在 RegExp 构造函数中出现非法的正则表达式
  98.     'no-invalid-regexp': 'error',
  99.     // 禁止使用特殊空白符（比如全角空格），除非是出现在字符串、正则表达式或模版字符串中
  100.     'no-irregular-whitespace': [
  101.       'error',
  102.       {
  103.         skipStrings: true,
  104.         skipComments: false,
  105.         skipRegExps: true,
  106.         skipTemplates: true
  107.       }
  108.     ],
  109.     // 禁止将 Math, JSON 或 Reflect 直接作为函数调用
  110.     'no-obj-calls': 'error',
  111.     // 禁止使用 hasOwnProperty, isPrototypeOf 或 propertyIsEnumerable
  112.     // @off hasOwnProperty 比较常用
  113.     'no-prototype-builtins': 'off',
  114.     // @fixable 禁止在正则表达式中出现连续的空格，必须使用 /foo {3}bar/ 代替
  115.     'no-regex-spaces': 'error',
  116.     // 禁止在数组中出现连续的逗号，如 let foo = [,,]
  117.     'no-sparse-arrays': 'error',
  118.     // 禁止在普通字符串中出现模版字符串里的变量形式，如 'Hello ${name}!'
  119.     'no-template-curly-in-string': 'error',
  120.     // 禁止出现难以理解的多行表达式，如：
  121.     // let foo = bar
  122.     // [1, 2, 3].forEach(baz);
  123.     'no-unexpected-multiline': 'error',
  124.     // 禁止在 return, throw, break 或 continue 之后还有代码
  125.     'no-unreachable': 'error',
  126.     // 禁止在 finally 中出现 return, throw, break 或 continue
  127.     'no-unsafe-finally': 'error',
  128.     // @fixable 禁止在 in 或 instanceof 操作符的左侧使用感叹号，如 if (!key in object)
  129.     'no-unsafe-negation': 'error',
  130.     // 必须使用 isNaN(foo) 而不是 foo === NaN
  131.     'use-isnan': 'error',
  132.     // 注释必须符合 jsdoc 的规范
  133.     // @off jsdoc 要求太严格
  134.     'valid-jsdoc': 'off',
  135.     // typeof 表达式比较的对象必须是 'undefined', 'object', 'boolean', 'number', 'string', 'function' 或 'symbol'
  136.     'valid-typeof': 'error',
  137.  
  138.  
  139.  
  140.     //
  141.     //
  142.     // 最佳实践
  143.     // 这些规则通过一些最佳实践帮助你避免问题
  144.     //
  145.     // setter 必须有对应的 getter，getter 可以没有对应的 setter
  146.     'accessor-pairs': [
  147.       'error',
  148.       {
  149.         setWithoutGet: true,
  150.         getWithoutSet: false
  151.       }
  152.     ],
  153.     // 数组的方法除了 forEach 之外，回调函数必须有返回值
  154.     'array-callback-return': 'error',
  155.     // 将 var 定义的变量视为块作用域，禁止在块外使用
  156.     'block-scoped-var': 'error',
  157.     // 在类的非静态方法中，必须存在对 this 的引用
  158.     // @off 太严格了
  159.     'class-methods-use-this': 'off',
  160.     // 禁止函数的循环复杂度超过 20，https://en.wikipedia.org/wiki/Cyclomatic_complexity
  161.     'complexity': [
  162.       'error',
  163.       {
  164.         max: 20
  165.       }
  166.     ],
  167.     // 禁止函数在不同分支返回不同类型的值
  168.     // @off 太严格了
  169.     'consistent-return': 'off',
  170.     // @fixable if 后面必须要有 {，除非是单行 if
  171.     'curly': [
  172.       'error',
  173.       'multi-line',
  174.       'consistent'
  175.     ],
  176.     // switch 语句必须有 default
  177.     // @off 太严格了
  178.     'default-case': 'off',
  179.     // @fixable 链式调用的时候，点号必须放在第二行开头处，禁止放在第一行结尾处
  180.     'dot-location': [
  181.       'error',
  182.       'property'
  183.     ],
  184.     // @fixable 禁止出现 foo['bar']，必须写成 foo.bar
  185.     // @off 当需要写一系列属性的时候，可以更统一
  186.     'dot-notation': 'off',
  187.     // @fixable 必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外
  188.     'eqeqeq': [
  189.       'error',
  190.       'always',
  191.       {
  192.         null: 'ignore'
  193.       }
  194.     ],
  195.     // for in 内部必须有 hasOwnProperty
  196.     'guard-for-in': 'error',
  197.     // 禁止使用 alert
  198.     // @off alert 很常用
  199.     'no-alert': 'off',
  200.     // 禁止使用 caller 或 callee
  201.     'no-caller': 'error',
  202.     // switch 的 case 内有变量定义的时候，必须使用大括号将 case 内变成一个代码块
  203.     'no-case-declarations': 'error',
  204.     // 禁止在正则表达式中出现形似除法操作符的开头，如 let a = /=foo/
  205.     // @off 有代码高亮的话，在阅读这种代码时，也完全不会产生歧义或理解上的困难
  206.     'no-div-regex': 'off',
  207.     // @fixable 禁止在 else 内使用 return，必须改为提前结束
  208.     // @off else 中使用 return 可以使代码结构更清晰
  209.     'no-else-return': 'off',
  210.     // 不允许有空函数，除非是将一个空函数设置为某个项的默认值
  211.     'no-empty-function': [
  212.       'error',
  213.       {
  214.         allow: [
  215.           'functions',
  216.           'arrowFunctions'
  217.         ]
  218.       }
  219.     ],
  220.     // 禁止解构中出现空 {} 或 []
  221.     'no-empty-pattern': 'error',
  222.     // 禁止使用 foo == null 或 foo != null，必须使用 foo === null 或 foo !== null
  223.     // @off foo == null 用于判断 foo 不是 undefined 并且不是 null，比较常用，故允许此写法
  224.     'no-eq-null': 'off',
  225.     // 禁止使用 eval
  226.     'no-eval': 'error',
  227.     // 禁止修改原生对象
  228.     'no-extend-native': 'error',
  229.     // @fixable 禁止出现没必要的 bind
  230.     'no-extra-bind': 'error',
  231.     // @fixable 禁止出现没必要的 label
  232.     'no-extra-label': 'error',
  233.     // switch 的 case 内必须有 break, return 或 throw
  234.     'no-fallthrough': 'error',
  235.     // @fixable 表示小数时，禁止省略 0，比如 .5
  236.     'no-floating-decimal': 'error',
  237.     // 禁止对全局变量赋值
  238.     'no-global-assign': 'error',
  239.     // @fixable 禁止使用 !! ~ 等难以理解的运算符
  240.     // 仅允许使用 !!
  241.     'no-implicit-coercion': [
  242.       'error',
  243.       {
  244.         allow: [
  245.           '!!'
  246.         ]
  247.       }
  248.     ],
  249.     // 禁止在全局作用域下定义变量或申明函数
  250.     'no-implicit-globals': 'error',
  251.     // 禁止在 setTimeout 或 setInterval 中传入字符串，如 setTimeout('alert("Hi!")', 100);
  252.     'no-implied-eval': 'error',
  253.     // 禁止在类之外的地方使用 this
  254.     // @off this 的使用很灵活，事件回调中可以表示当前元素，函数也可以先用 this，等以后被调用的时候再 call
  255.     'no-invalid-this': 'off',
  256.     // 禁止使用 __iterator__
  257.     'no-iterator': 'error',
  258.     // 禁止使用 label
  259.     'no-labels': 'error',
  260.     // 禁止使用没必要的 {} 作为代码块
  261.     'no-lone-blocks': 'error',
  262.     // 禁止在循环内的函数中出现循环体条件语句中定义的变量，比如：
  263.     // for (var i = 0; i < 10; i++) {
  264.     //     (function () { return i })();
  265.     // }
  266.     'no-loop-func': 'error',
  267.     // 禁止使用 magic numbers
  268.     // @off 太严格了
  269.     'no-magic-numbers': 'off',
  270.     // @fixable 禁止出现连续的多个空格，除非是注释前，或对齐对象的属性、变量定义、import 等
  271.     'no-multi-spaces': [
  272.       'error',
  273.       {
  274.         ignoreEOLComments: true,
  275.         exceptions: {
  276.           Property: true,
  277.           BinaryExpression: false,
  278.           VariableDeclarator: true,
  279.           ImportDeclaration: true
  280.         }
  281.       }
  282.     ],
  283.     // 禁止使用 \ 来换行字符串
  284.     'no-multi-str': 'error',
  285.     // 禁止直接 new 一个类而不赋值
  286.     'no-new': 'error',
  287.     // 禁止使用 new Function，比如 let x = new Function("a", "b", "return a + b");
  288.     'no-new-func': 'error',
  289.     // 禁止使用 new 来生成 String, Number 或 Boolean
  290.     'no-new-wrappers': 'error',
  291.     // 禁止使用 0 开头的数字表示八进制数
  292.     'no-octal': 'error',
  293.     // 禁止使用八进制的转义符
  294.     'no-octal-escape': 'error',
  295.     // 禁止对函数的参数重新赋值
  296.     'no-param-reassign': 'error',
  297.     // 禁止使用 __proto__
  298.     'no-proto': 'error',
  299.     // 禁止重复定义变量
  300.     'no-redeclare': 'error',
  301.     // 禁止使用指定的对象属性
  302.     // @off 它用于限制某个具体的 api 不能使用
  303.     'no-restricted-properties': 'off',
  304.     // 禁止在 return 语句里赋值
  305.     'no-return-assign': [
  306.       'error',
  307.       'always'
  308.     ],
  309.     // 禁止在 return 语句里使用 await
  310.     'no-return-await': 'error',
  311.     // 禁止出现 location.href = 'javascript:void(0)';
  312.     'no-script-url': 'error',
  313.     // 禁止将自己赋值给自己
  314.     'no-self-assign': 'error',
  315.     // 禁止将自己与自己比较
  316.     'no-self-compare': 'error',
  317.     // 禁止使用逗号操作符
  318.     'no-sequences': 'error',
  319.     // 禁止 throw 字面量，必须 throw 一个 Error 对象
  320.     'no-throw-literal': 'error',
  321.     // 循环内必须对循环条件的变量有修改
  322.     'no-unmodified-loop-condition': 'error',
  323.     // 禁止无用的表达式
  324.     'no-unused-expressions': [
  325.       'error',
  326.       {
  327.         allowShortCircuit: true,
  328.         allowTernary: true,
  329.         allowTaggedTemplates: true
  330.       }
  331.     ],
  332.     // @fixable 禁止出现没用的 label
  333.     'no-unused-labels': 'error',
  334.     // 禁止出现没必要的 call 或 apply
  335.     'no-useless-call': 'error',
  336.     // 禁止出现没必要的字符串连接
  337.     'no-useless-concat': 'error',
  338.     // 禁止出现没必要的转义
  339.     // @off 转义可以使代码更易懂
  340.     'no-useless-escape': 'off',
  341.     // @fixable 禁止没必要的 return
  342.     // @off 没必要限制 return
  343.     'no-useless-return': 'off',
  344.     // 禁止使用 void
  345.     'no-void': 'error',
  346.     // 禁止注释中出现 TODO 和 FIXME
  347.     // @off TODO 很常用
  348.     'no-warning-comments': 'off',
  349.     // 禁止使用 with
  350.     'no-with': 'error',
  351.     // Promise 的 reject 中必须传入 Error 对象，而不是字面量
  352.     'prefer-promise-reject-errors': 'error',
  353.     // parseInt 必须传入第二个参数
  354.     'radix': 'error',
  355.     // async 函数中必须存在 await 语句
  356.     // @off async function 中没有 await 的写法很常见，比如 koa 的示例中就有这种用法
  357.     'require-await': 'off',
  358.     // var 必须在作用域的最前面
  359.     // @off var 不在最前面也是很常见的用法
  360.     'vars-on-top': 'off',
  361.     // @fixable 立即执行的函数必须符合如下格式 (function () { alert('Hello') })()
  362.     'wrap-iife': [
  363.       'error',
  364.       'inside',
  365.       {
  366.         functionPrototypeMethods: true
  367.       }
  368.     ],
  369.     // @fixable 必须使用 if (foo === 5) 而不是 if (5 === foo)
  370.     'yoda': [
  371.       'error',
  372.       'never',
  373.       {
  374.         onlyEquality: true
  375.       }
  376.     ],
  377.  
  378.  
  379.  
  380.     //
  381.     //
  382.     // 严格模式
  383.     // 这些规则与严格模式指令有关
  384.     //
  385.     // @fixable 禁止使用 'strict';
  386.     'strict': [
  387.       'error',
  388.       'never'
  389.     ],
  390.  
  391.  
  392.  
  393.     //
  394.     //
  395.     // 变量
  396.     // 这些规则与变量申明有关
  397.     //
  398.     // 变量必须在定义的时候赋值
  399.     // @off 先定义后赋值很常见
  400.     'init-declarations': 'off',
  401.     // 禁止 catch 的参数名与定义过的变量重复
  402.     // @off 太严格了
  403.     'no-catch-shadow': 'off',
  404.     // 禁止使用 delete
  405.     'no-delete-var': 'error',
  406.     // 禁止 label 名称与定义过的变量重复
  407.     'no-label-var': 'error',
  408.     // 禁止使用指定的全局变量
  409.     // @off 它用于限制某个具体的变量名不能使用
  410.     'no-restricted-globals': 'off',
  411.     // 禁止变量名与上层作用域内的定义过的变量重复
  412.     // @off 很多时候函数的形参和传参是同名的
  413.     'no-shadow': 'off',
  414.     // 禁止使用保留字作为变量名
  415.     'no-shadow-restricted-names': 'error',
  416.     // 禁止使用未定义的变量
  417.     'no-undef': [
  418.       'error',
  419.       {
  420.         typeof: false
  421.       }
  422.     ],
  423.     // @fixable 禁止将 undefined 赋值给变量
  424.     'no-undef-init': 'error',
  425.     // 禁止对 undefined 重新赋值
  426.     'no-undefined': 'error',
  427.     // 定义过的变量必须使用
  428.     'no-unused-vars': [
  429.       'error',
  430.       {
  431.         vars: 'all',
  432.         args: 'none',
  433.         caughtErrors: 'none',
  434.         ignoreRestSiblings: true
  435.       }
  436.     ],
  437.     // 变量必须先定义后使用
  438.     'no-use-before-define': [
  439.       'error',
  440.       {
  441.         functions: false,
  442.         classes: false,
  443.         variables: false
  444.       }
  445.     ],
  446.  
  447.  
  448.  
  449.     //
  450.     //
  451.     // Node.js 和 CommonJS
  452.     // 这些规则与在 Node.js 中运行的代码或浏览器中使用的 CommonJS 有关
  453.     //
  454.     // callback 之后必须立即 return
  455.     // @off Limitations 太多了
  456.     'callback-return': 'off',
  457.     // require 必须在全局作用域下
  458.     // @off 条件加载很常见
  459.     'global-require': 'off',
  460.     // callback 中的 error 必须被处理
  461.     'handle-callback-err': 'error',
  462.     // 禁止直接使用 Buffer
  463.     'no-buffer-constructor': 'error',
  464.     // 相同类型的 require 必须放在一起
  465.     // @off 太严格了
  466.     'no-mixed-requires': 'off',
  467.     // 禁止直接 new require('foo')
  468.     'no-new-require': 'error',
  469.     // 禁止对 __dirname 或 __filename 使用字符串连接
  470.     'no-path-concat': 'error',
  471.     // 禁止使用 process.env.NODE_ENV
  472.     // @off 使用很常见
  473.     'no-process-env': 'off',
  474.     // 禁止使用 process.exit(0)
  475.     // @off 使用很常见
  476.     'no-process-exit': 'off',
  477.     // 禁止使用指定的模块
  478.     // @off 它用于限制某个具体的模块不能使用
  479.     'no-restricted-modules': 'off',
  480.     // 禁止使用 node 中的同步的方法，比如 fs.readFileSync
  481.     // @off 使用很常见
  482.     'no-sync': 'off',
  483.  
  484.  
  485.  
  486.     //
  487.     //
  488.     // 风格问题
  489.     // 这些规则与代码风格有关，所以是非常主观的
  490.     //
  491.     // @fixable 配置数组的中括号内前后的换行格式
  492.     // @off 配置项无法配制成想要的样子
  493.     'array-bracket-newline': 'off',
  494.     // @fixable 数组的括号内的前后禁止有空格
  495.     'array-bracket-spacing': [
  496.       'error',
  497.       'never'
  498.     ],
  499.     // @fixable 配置数组的元素之间的换行格式
  500.     // @off 允许一行包含多个元素，方便大数量的数组的书写
  501.     'array-element-newline': 'off',
  502.     // @fixable 代码块如果在一行内，那么大括号内的首尾必须有空格，比如 function () { alert('Hello') }
  503.     'block-spacing': [
  504.       'error',
  505.       'always'
  506.     ],
  507.     // @fixable if 与 else 的大括号风格必须一致
  508.     // @off else 代码块可能前面需要有一行注释
  509.     'brace-style': 'off',
  510.     // 变量名必须是 camelcase 风格的
  511.     // @off 很多 api 或文件名都不是 camelcase
  512.     'camelcase': 'off',
  513.     // @fixable 注释的首字母必须大写
  514.     // @off 没必要限制
  515.     'capitalized-comments': 'off',
  516.     // @fixable 对象的最后一个属性末尾必须有逗号
  517.     // @off 没必要限制
  518.     'comma-dangle': 'off',
  519.     // @fixable 逗号前禁止有空格，逗号后必须要有空格
  520.     'comma-spacing': [
  521.       'error',
  522.       {
  523.         'before': false,
  524.         'after': true
  525.       }
  526.     ],
  527.     // @fixable 禁止在行首写逗号
  528.     'comma-style': [
  529.       'error',
  530.       'last'
  531.     ],
  532.     // @fixable 用作对象的计算属性时，中括号内的首尾禁止有空格
  533.     'computed-property-spacing': [
  534.       'error',
  535.       'never'
  536.     ],
  537.     // 限制 this 的别名
  538.     // @off 没必要限制
  539.     'consistent-this': 'off',
  540.     // @fixable 文件最后一行必须有一个空行
  541.     // @off 没必要限制
  542.     'eol-last': 'off',
  543.     // @fixable 函数名和执行它的括号之间禁止有空格
  544.     'func-call-spacing': [
  545.       'error',
  546.       'never'
  547.     ],
  548.     // 函数赋值给变量的时候，函数名必须与变量名一致
  549.     'func-name-matching': [
  550.       'error',
  551.       'always',
  552.       {
  553.         includeCommonJSModuleExports: false
  554.       }
  555.     ],
  556.     // 函数必须有名字
  557.     // @off 没必要限制
  558.     'func-names': 'off',
  559.     // 必须只使用函数声明或只使用函数表达式
  560.     // @off 没必要限制
  561.     'func-style': 'off',
  562.     // 禁止使用指定的标识符
  563.     // @off 它用于限制某个具体的标识符不能使用
  564.     'id-blacklist': 'off',
  565.     // 限制变量名长度
  566.     // @off 没必要限制变量名长度
  567.     'id-length': 'off',
  568.     // 限制变量名必须匹配指定的正则表达式
  569.     // @off 没必要限制变量名
  570.     'id-match': 'off',
  571.     // @fixable 一个缩进必须用四个空格替代
  572.     'indent': [
  573.       'off',
  574.       2,
  575.       {
  576.         SwitchCase: 1,
  577.         flatTernaryExpressions: true
  578.       }
  579.     ],
  580.     // @fixable jsx 中的属性必须用双引号
  581.     'jsx-quotes': [
  582.       'error',
  583.       'prefer-double'
  584.     ],
  585.     // @fixable 对象字面量中冒号前面禁止有空格，后面必须有空格
  586.     'key-spacing': [
  587.       'error',
  588.       {
  589.         beforeColon: false,
  590.         afterColon: true,
  591.         mode: 'strict',
  592.       }
  593.     ],
  594.     // @fixable 关键字前后必须有空格
  595.     'keyword-spacing': [
  596.       'error',
  597.       {
  598.         before: true,
  599.         after: true
  600.       }
  601.     ],
  602.     // 单行注释必须写在上一行
  603.     // @off 没必要限制
  604.     'line-comment-position': 'off',
  605.     // @fixable 限制换行符为 LF 或 CRLF
  606.     // @off 没必要限制
  607.     'linebreak-style': 'off',
  608.     // @fixable 注释前后必须有空行
  609.     // @off 没必要限制
  610.     'lines-around-comment': 'off',
  611.     // 代码块嵌套的深度禁止超过 5 层
  612.     'max-depth': [
  613.       'error',
  614.       5
  615.     ],
  616.     // 限制一行的长度
  617.     // @off 现在编辑器已经很智能了，不需要限制一行的长度
  618.     'max-len': 'off',
  619.     // 限制一个文件最多的行数
  620.     // @off 没必要限制
  621.     'max-lines': 'off',
  622.     // 回调函数嵌套禁止超过 3 层，多了请用 async await 替代
  623.     'max-nested-callbacks': [
  624.       'error',
  625.       3
  626.     ],
  627.     // 函数的参数禁止超过 7 个
  628.     'max-params': [
  629.       'error',
  630.       7
  631.     ],
  632.     // 限制函数块中的语句数量
  633.     // @off 没必要限制
  634.     'max-statements': 'off',
  635.     // 限制一行中的语句数量
  636.     // @off 没必要限制
  637.     'max-statements-per-line': 'off',
  638.     // 三元表达式必须得换行
  639.     // @off 三元表达式可以随意使用
  640.     'multiline-ternary': 'off',
  641.     // new 后面的类名必须首字母大写
  642.     'new-cap': [
  643.       'error',
  644.       {
  645.         newIsCap: true,
  646.         capIsNew: false,
  647.         properties: true
  648.       }
  649.     ],
  650.     // @fixable new 后面的类必须有小括号
  651.     'new-parens': 'error',
  652.     // 链式调用必须换行
  653.     // @off 没必要限制
  654.     'newline-per-chained-call': 'off',
  655.     // 禁止使用 Array 构造函数
  656.     'no-array-constructor': 'error',
  657.     // 禁止使用位运算
  658.     // @off 位运算很常见
  659.     'no-bitwise': 'off',
  660.     // 禁止使用 continue
  661.     // @off continue 很常用
  662.     'no-continue': 'off',
  663.     // 禁止在代码后添加内联注释
  664.     // @off 内联注释很常用
  665.     'no-inline-comments': 'off',
  666.     // @fixable 禁止 else 中只有一个单独的 if
  667.     // @off 单独的 if 可以把逻辑表达的更清楚
  668.     'no-lonely-if': 'off',
  669.     // 禁止混用不同的操作符，比如 let foo = a && b < 0 || c > 0 || d + 1 === 0
  670.     // @off 太严格了，可以由使用者自己去判断如何混用操作符
  671.     'no-mixed-operators': 'off',
  672.     // 禁止混用空格和缩进
  673.     'no-mixed-spaces-and-tabs': 'error',
  674.     // 禁止连续赋值，比如 a = b = c = 5
  675.     // @off 没必要限制
  676.     'no-multi-assign': 'off',
  677.     // @fixable 禁止出现超过三行的连续空行
  678.     'no-multiple-empty-lines': [
  679.       'error',
  680.       {
  681.         max: 3,
  682.         maxEOF: 1,
  683.         maxBOF: 1
  684.       }
  685.     ],
  686.     // 禁止 if 里面有否定的表达式，比如：
  687.     // if (a !== b) {
  688.     //     doSomething();
  689.     // } else {
  690.     //     doSomethingElse();
  691.     // }
  692.     // @off 否定的表达式可以把逻辑表达的更清楚
  693.     'no-negated-condition': 'off',
  694.     // 禁止使用嵌套的三元表达式，比如 a ? b : c ? d : e
  695.     // @off 没必要限制
  696.     'no-nested-ternary': 'off',
  697.     // 禁止直接 new Object
  698.     'no-new-object': 'error',
  699.     // 禁止使用 ++ 或 --
  700.     // @off 没必要限制
  701.     'no-plusplus': 'off',
  702.     // 禁止使用特定的语法
  703.     // @off 它用于限制某个具体的语法不能使用
  704.     'no-restricted-syntax': 'off',
  705.     // 禁止使用 tabs
  706.     'no-tabs': 'error',
  707.     // 禁止使用三元表达式
  708.     // @off 三元表达式很常用
  709.     'no-ternary': 'off',
  710.     // @fixable 禁止行尾有空格
  711.     'no-trailing-spaces': 'error',
  712.     // 禁止变量名出现下划线
  713.     // @off 下划线在变量名中很常用
  714.     'no-underscore-dangle': 'off',
  715.     // @fixable 必须使用 !a 替代 a ? false : true
  716.     // @off 后者表达的更清晰
  717.     'no-unneeded-ternary': 'off',
  718.     // @fixable 禁止属性前有空格，比如 foo. bar()
  719.     'no-whitespace-before-property': 'error',
  720.     // @fixable 禁止 if 后面不加大括号而写两行代码
  721.     'nonblock-statement-body-position': [
  722.       'error',
  723.       'beside',
  724.       {
  725.         overrides: {
  726.           while: 'below'
  727.         }
  728.       }
  729.     ],
  730.     // @fixable 大括号内的首尾必须有换行
  731.     'object-curly-newline': [
  732.       'error',
  733.       {
  734.         multiline: true,
  735.         consistent: true
  736.       }
  737.     ],
  738.     // @fixable 对象字面量只有一行时，大括号内的首尾必须有空格
  739.     'object-curly-spacing': [
  740.       'error',
  741.       'always',
  742.       {
  743.         arraysInObjects: true,
  744.         objectsInObjects: false
  745.       }
  746.     ],
  747.     // @fixable 对象字面量内的属性每行必须只有一个
  748.     // @off 没必要限制
  749.     'object-property-newline': 'off',
  750.     // 禁止变量申明时用逗号一次申明多个
  751.     'one-var': [
  752.       'error',
  753.       'never'
  754.     ],
  755.     // @fixable 变量申明必须每行一个
  756.     'one-var-declaration-per-line': [
  757.       'error',
  758.       'always'
  759.     ],
  760.     // @fixable 必须使用 x = x + y 而不是 x += y
  761.     // @off 没必要限制
  762.     'operator-assignment': 'off',
  763.     // @fixable 需要换行的时候，操作符必须放在行末，比如：
  764.     // let foo = 1 +
  765.     //     2
  766.     // @off 有时放在第二行开始处更易读
  767.     'operator-linebreak': 'off',
  768.     // @fixable 代码块首尾必须要空行
  769.     // @off 没必要限制
  770.     'padded-blocks': 'off',
  771.     // @fixable 限制语句之间的空行规则，比如变量定义完之后必须要空行
  772.     // @off 没必要限制
  773.     'padding-line-between-statements': 'off',
  774.     // @fixable 对象字面量的键名禁止用引号括起来
  775.     // @off 没必要限制
  776.     'quote-props': 'off',
  777.     // @fixable 必须使用单引号，禁止使用双引号
  778.     'quotes': [
  779.       'error',
  780.       'single',
  781.       {
  782.         avoidEscape: true,
  783.         allowTemplateLiterals: true
  784.       }
  785.     ],
  786.     // 必须使用 jsdoc 风格的注释
  787.     // @off 太严格了
  788.     'require-jsdoc': 'off',
  789.     // @fixable 结尾必须有分号
  790.     'semi': [
  791.       'error',
  792.       'always',
  793.       {
  794.         omitLastInOneLineBlock: true
  795.       }
  796.     ],
  797.     // @fixable 一行有多个语句时，分号前面禁止有空格，分号后面必须有空格
  798.     'semi-spacing': [
  799.       'error',
  800.       {
  801.         before: false,
  802.         after: true
  803.       }
  804.     ],
  805.     // @fixable 分号必须写在行尾，禁止在行首出现
  806.     'semi-style': [
  807.       'error',
  808.       'last'
  809.     ],
  810.     // 对象字面量的键名必须排好序
  811.     // @off 没必要限制
  812.     'sort-keys': 'off',
  813.     // 变量申明必须排好序
  814.     // @off 没必要限制
  815.     'sort-vars': 'off',
  816.     // @fixable if, function 等的大括号之前必须要有空格，比如 if (a) {
  817.     'space-before-blocks': [
  818.       'error',
  819.       'always'
  820.     ],
  821.     // @fixable function 的小括号之前必须要有空格
  822.     'space-before-function-paren': [
  823.       'error',
  824.       {
  825.         anonymous: 'ignore',
  826.         named: 'never',
  827.         asyncArrow: 'always'
  828.       }
  829.     ],
  830.     // @fixable 小括号内的首尾禁止有空格
  831.     'space-in-parens': [
  832.       'error',
  833.       'never'
  834.     ],
  835.     // @fixable 操作符左右必须有空格，比如 let sum = 1 + 2;
  836.     'space-infix-ops': 'error',
  837.     // @fixable new, typeof 等后面必须有空格，++, -- 等禁止有空格，比如：
  838.     // let foo = new Person();
  839.     // bar = bar++;
  840.     'space-unary-ops': [
  841.       'error',
  842.       {
  843.         words: true,
  844.         nonwords: false
  845.       }
  846.     ],
  847.     // @fixable 注释的斜线或 * 后必须有空格
  848.     'spaced-comment': [
  849.       'error',
  850.       'always',
  851.       {
  852.         block: {
  853.           exceptions: [
  854.             '*'
  855.           ],
  856.           balanced: true
  857.         }
  858.       }
  859.     ],
  860.     // @fixable case 的冒号前禁止有空格，冒号后必须有空格
  861.     'switch-colon-spacing': [
  862.       'error',
  863.       {
  864.         after: true,
  865.         before: false
  866.       }
  867.     ],
  868.     // @fixable 模版字符串的 tag 之后禁止有空格，比如 tag`Hello World`
  869.     'template-tag-spacing': [
  870.       'error',
  871.       'never'
  872.     ],
  873.     // @fixable 文件开头禁止有 BOM
  874.     'unicode-bom': [
  875.       'error',
  876.       'never'
  877.     ],
  878.     // @fixable 正则表达式必须有括号包起来
  879.     // @off 没必要限制
  880.     'wrap-regex': 'off',
  881.  
  882.  
  883.  
  884.     //
  885.     //
  886.     // ECMAScript 6
  887.     // 这些规则与 ES6（即通常所说的 ES2015）有关
  888.     //
  889.     // @fixable 箭头函数能够省略 return 的时候，必须省略，比如必须写成 () => 0，禁止写成 () => { return 0 }
  890.     // @off 箭头函数的返回值，应该允许灵活设置
  891.     'arrow-body-style': 'off',
  892.     // @fixable 箭头函数只有一个参数的时候，必须加括号
  893.     // @off 应该允许灵活设置
  894.     'arrow-parens': 'off',
  895.     // @fixable 箭头函数的箭头前后必须有空格
  896.     'arrow-spacing': [
  897.       'error',
  898.       {
  899.         before: true,
  900.         after: true
  901.       }
  902.     ],
  903.     // constructor 中必须有 super
  904.     'constructor-super': 'error',
  905.     // @fixable generator 的 * 前面禁止有空格，后面必须有空格
  906.     'generator-star-spacing': [
  907.       'error',
  908.       {
  909.         before: false,
  910.         after: true
  911.       }
  912.     ],
  913.     // 禁止对定义过的 class 重新赋值
  914.     'no-class-assign': 'error',
  915.     // @fixable 禁止出现难以理解的箭头函数，比如 let x = a => 1 ? 2 : 3
  916.     'no-confusing-arrow': [
  917.       'error',
  918.       {
  919.         allowParens: true
  920.       }
  921.     ],
  922.     // 禁止对使用 const 定义的常量重新赋值
  923.     'no-const-assign': 'error',
  924.     // 禁止重复定义类
  925.     'no-dupe-class-members': 'error',
  926.     // 禁止重复 import 模块
  927.     'no-duplicate-imports': 'error',
  928.     // 禁止使用 new 来生成 Symbol
  929.     'no-new-symbol': 'error',
  930.     // 禁止 import 指定的模块
  931.     // @off 它用于限制某个具体的模块不能使用
  932.     'no-restricted-imports': 'off',
  933.     // 禁止在 super 被调用之前使用 this 或 super
  934.     'no-this-before-super': 'error',
  935.     // @fixable 禁止出现没必要的计算键名，比如 let a = { ['0']: 0 };
  936.     'no-useless-computed-key': 'error',
  937.     // 禁止出现没必要的 constructor，比如 constructor(value) { super(value) }
  938.     'no-useless-constructor': 'error',
  939.     // @fixable 禁止解构时出现同样名字的的重命名，比如 let { foo: foo } = bar;
  940.     'no-useless-rename': 'error',
  941.     // @fixable 禁止使用 var
  942.     'no-var': 'error',
  943.     // @fixable 必须使用 a = {b} 而不是 a = {b: b}
  944.     // @off 没必要强制要求
  945.     'object-shorthand': 'off',
  946.     // @fixable 必须使用箭头函数作为回调
  947.     // @off 没必要强制要求
  948.     'prefer-arrow-callback': 'off',
  949.     // @fixable 申明后不再被修改的变量必须使用 const 来申明
  950.     // @off 没必要强制要求
  951.     'prefer-const': 'off',
  952.     // 必须使用解构
  953.     // @off 没必要强制要求
  954.     'prefer-destructuring': 'off',
  955.     // @fixable 必须使用 0b11111011 而不是 parseInt('111110111', 2)
  956.     // @off 没必要强制要求
  957.     'prefer-numeric-literals': 'off',
  958.     // 必须使用 ...args 而不是 arguments
  959.     // @off 没必要强制要求
  960.     'prefer-rest-params': 'off',
  961.     // @fixable 必须使用 ... 而不是 apply，比如 foo(...args)
  962.     // @off  apply 很常用
  963.     'prefer-spread': 'off',
  964.     // @fixable 必须使用模版字符串而不是字符串连接
  965.     // @off 字符串连接很常用
  966.     'prefer-template': 'off',
  967.     // generator 函数内必须有 yield
  968.     'require-yield': 'error',
  969.     // @fixable ... 的后面禁止有空格
  970.     'rest-spread-spacing': [
  971.       'error',
  972.       'never'
  973.     ],
  974.     // @fixable import 必须按规则排序
  975.     // @off 没必要强制要求
  976.     'sort-imports': 'off',
  977.     // 创建 Symbol 时必须传入参数
  978.     'symbol-description': 'error',
  979.     // @fixable ${name} 内的首尾禁止有空格
  980.     'template-curly-spacing': [
  981.       'error',
  982.       'never'
  983.     ],
  984.     // @fixable yield* 后面必须要有空格
  985.     'yield-star-spacing': [
  986.       'error',
  987.       'after'
  988.     ]
  989.   }
  990. };

在vscode中使用eslint插件

配置.eslintignore 文件
  • 没有则需要新建一个 .eslintignore
  1. # npm包
  2. /node_modules
  3. package-lock.json
  4.  
  5. # build产物
  6. /dist
  7. /types
  8.  
  9. # eslint
  10. .eslintcache
  11.  
  12. # jest
  13. /coverage
  14.  
  15. # docs api文档
  16. /docs
  17.  
  18. # webpack 配置
  19. /scripts
  20.  
  21. #webstorm
  22. .idea
  23.   # 自动引入生成文件
  24.   auto-imports.d.ts
  25.   components.d.ts

在setting中搜所eslint

代码检查的过程通常如下【面试题】：


1、配置：首先需要为 ESLint 提供一套规则，这些规则可以在.eslintrc配置文件中定义，或者在项目的package.json文件中的eslintConfig字段里指定。规则可以继承自一套已有的规则集，如eslint:recommended，或者可以是一个流行的样式指南，如airbnb。也可以是自定义的规则集。
2、解析：当运行 ESLint 时，它会使用一个解析器（如espree，默认的解析器）来解析代码，将代码转换成一个抽象语法树（AST）。AST 是代码结构的一个树状表示，能让 ESLint 理解代码的语义结构。
3、遍历：一旦代码被转换成 AST，ESLint 则会遍历该树。它会查找树的每个节点，检查是否有任何规则适用于该节点。在遍历过程中，如果发现违反了某项规则，ESLint 将记录一个问题（通常称为“lint 错误”）。
4、报告：在遍历完整个 AST 之后，ESLint 会生成一份报告。这份报告详细说明了它在代码中找到的任何问题。这些问题会被分类为错误或警告，根据配置设置的不同，某些问题可能会阻止构建过程或者被忽略。
5、修复：对于某些类型的问题，ESLint 提供了自动修复的功能。这意味着你可以让 ESLint 尝试自动修复它所发现的问题，不需人工干预。
6、集成： ESLint 可以集成到 IDE 中，这样就可以在代码编写过程中即时提供反馈。它也可以被集成到构建工具如 Webpack 或任务运行器 Grunt、Gulp 中，作为构建过程或提交代码到版本控制系统前的一个步骤。
通过以上步骤，ESLint 帮助开发者在编码过程中遵循一致的风格和避免出现潜在的错误。

结语

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/896915
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。