eslint使用手札

eslint官网https://eslint.org/
规则表https://eslint.org/docs/rules/

忽略eslint检查

-忽略单行eslint检查
Use // eslint-disable-next-line to ignore the next line.

// eslint-disable-next-line

• 可以在你的文件中使用以下格式的块注释来临时禁止规则出现警告:

/* eslint-disable */
alert('foo');
/* eslint-enable */

-你也可以对指定的规则启用或禁用警告:

/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

• 忽略整个文件
  在项目根目录下创建一个.eslintignore的文件，将你认为没必要加入检查的文件目录放在里面。

/src/views/yourfile.vue
/src/assets/images/picture.png
/node_modules/*
/**/vendor/*.js

• 注释格式汇总

/*eslint-disable*/
/*eslint-enable*/
/*global*/
/*eslint*/
/*eslint-env*/
// eslint-disable-line
// eslint-disable-next-line

配置规则

-vue2配置eslint规则
vue2中，在package.json中配置eslint自定义规则，格式如下

{
  "name":  "my-website",
  "version": "0.1.1",
  ...
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": {
      "@vue/standard"
    },
    "rules": {
      "no-extra-semi": 0,
      "eol-last": 0,
      "no-empty-character-class": 0
    },
  }
}

-创建.eslintrc配置规则
你可以在根目录下创建一个.eslintrc的文件，该文件的作用是能管理整个项目的代码检查规则。

{
    "extends": "eslint:recommended",
    "rules": {
        "consistent-return": 2,
        "indent"           : [1, 4],
        "no-else-return"   : 1,
        "semi"             : [1, "always"],
        "space-unary-ops"  : 2
    }
}

eslint 配置

在这里首先推荐一下尾逗号，加上尾逗号的好处只有一个，但真的十分重要，那就是 diff 会非常好看。然后 eslint-plugin-vue 插件是一些预设规则组合，分 base，essential，strongly-recommended，recommended 四级，请自由选择，没有最好的搭配，只要用得舒服就好，团队合作还是非常推荐定好 eslint 规则，使用尽量详细的同一套规则，在代码合并时感觉会非常爽快。

image

设置 eslint 后建议配置开发服务器的 overlay 选项，在 eslint 报错时会覆盖在页面上，时刻提醒你写代码得有信条。

  devServer: {
    overlay: {
      warnings: true,
      errors: true,
    },
  },