Skip to content

ESLint

eslint --init 默认推荐本地安装 ,全局无法使用

串联和等级

禁用

js
/* eslint-disable */

const h = this.$createElement // eslint-disable-line

禁用 for in

会遍历原型链

禁用 for of

iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations

rules

js
  extends: [
    '@vue/airbnb', // 缩进要求 2
    'plugin:vue/essential',
    // 'eslint:recommended' // 不检查缩进
  ],

  rules: {
    'indent': ['warn', 2],
    'max-lines': [
      0,
      600
    ],
    'max-lines-per-function': [
      0,
      100
    ],
    'import/extensions': [
      'off',
      'always',
      {
        js: 'never',
        vue: 'never'
      }
    ],
    'comma-dangle': [
      'error',
      {
        objects: 'only-multiline',
        arrays: 'only-multiline'
      }
    ],
    'no-restricted-syntax': 0,
    'import/no-unresolved': 0,
    'no-multiple-empty-lines': [
      2,
      {
        max: 2
      }
    ],
    'dot-notation': [
      'error',
      {
        allowKeywords: false,
        allowPattern: ''
      }
    ],
    'func-names': 0,
    'func-style': 0,
    'key-spacing': [
      2,
      {
        beforeColon: false,
        afterColon: true
      }
    ],
    'max-nested-callbacks': 0,
    'new-cap': [
      2,
      {
        newIsCap: true,
        capIsNew: false
      }
    ],
    'new-parens': 2,
    'newline-after-var': 0,
    'no-array-constructor': 2,
    'no-inline-comments': 0,
    'no-lonely-if': 0,
    'no-param-reassign': 0,
    'quote-props': 0,
    'max-len': 0,
    'guard-for-in': 0,
    'operator-assignment': 0,
    'no-use-before-define': [
      2,
      'nofunc'
    ],
    semi: 0,
    'linebreak-style': 0,
    'arrow-parens': 0,
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'consistent-return': 0,
    'space-before-function-paren': 0,
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },

对象深嵌套解构

js
const { statement: { isConfirmed }, statement } = this.props;
// 一行解出 statement 及下一级的 isConfirmed

Destructuring assignment | MDN

vue/require-default-prop

vue

json
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],

case

  • Value must be omitted for boolean attributes 存在默认值,删除即可
  • hasOwnProperty 不允许直接在 object 上使用 Object.prototype 上的方法
    1. Object.create 创建的 object 可能没有这个方法
    2. 原型方法可能被修改
js
// error
foo.hasOwnProperty("bar")
// right
Object.prototype.hasOwnProperty.call(foo, "bar")
  • 对象方法,使用缩写,相当于 function。如果用到 this,这种方式就不行,还是用箭头函数吧

react

如果用到 pre state

js
this.setState(state => { count: state.count + 1 })

linebreak-style

airbnb 是 unix

不使用,只能关掉

jsx 部分字符符号可能意外渲染到界面上

eslint-plugin-react/no-unescaped-entities.md at master · yannickcr/eslint-plugin-react 解决:使用表达式,如

div 上绑定 onClick

eslint-plugin-jsx-a11y/no-static-element-interactions.md at master · jsx-eslint/eslint-plugin-jsx-a11y

解决:添加 role

jsx
<div className="foo" onClick={() => {}} role="button" />

import 不存在(比如删了)

eslint recommend / react 规则集里没有,需要安装 eslint-plugin-import,或者在文件头设置@ts-check

javascript - how can I get warnings when importing modules that don't exist - Stack Overfloweslint-plugin-import/named.md at f2db74a347a030c15a387826500cdc98203eac1e · benmosher/eslint-plugin-import

alias path es/ts 无法识别

需要手动在对应配置添加

webpack小记——alias与eslint

eslint 和 prettier 冲突

使用 prettier 最好禁用 eslint 中代码格式化相关的规则 安装 eslint-config-prettier

另一种做法是 prettier-eslint,先 prettier 然后 eslint fix,两者兼顾

disable missing space before function parentheses · Issue #44 · prettier/eslint-plugin-prettier https://github.com/prettier/eslint-plugin-prettier/issues/44#issuecomment-323657069

暂时禁用 prettier 保存时运行

vscode 简单格式化需求,用 eslint 插件

Setting -> formatter

antfu/eslint-config: Anthony's ESLint config presets

为什么不用 prettier,有很多预设规则,适应有成本

当一个程序员对算法、语言标准、底层、原生、英文文档这些词汇产生恐惧感的时候,他的技术生命已经走到尽头