转载的～eslintReact-NativeWeb前端入门

Eslint 超简单入门教程

2017-08-12  本文已影响1186人  dkvirus

两个月之前在项目中就开始使用 Eslint ，当时直接 copy 别人的 .eslintrc.js 文件，感觉好复杂，一直没吃透，中间去把 Eslint 官方文档看了数遍，依然无果。今天刚好没事，回过头来想整理一下 Eslint 的使用，发现突然变得好简单。总结下在这过程中走得弯路。

  • 先要知道 Lint 是什么，Eslint 又是什么；
  • 因为想要的太多（想把 Eslint 官方文档里每个字都记住）就容易抓不住重点（目标是在项目中使用Eslint，这仅仅是个工具，工具又怎么会搞的太难）。

更新：
2017年10月13日 添加全局变量配置。
2017年10月18日 添加单行跳过 lint 校验。

一、目标

学习完本教程希望对下面这个 .eslintrc.js 文件能够做到心里有数。

// .eslintrc.js 
module.exports = {
  "extends": "airbnb",
  "rules": {
    "semi": [2, "never"],
    "no-console": 0,
    "comma-dangle": [2, "always-multiline"],
    "max-len": 0,
    "react/jsx-first-prop-new-line": 0,
    "react/jsx-filename-extension": 0,
    "space-before-function-paren": [2, "always"],
    "no-unused-expressions": [0, {
      "allowShortCircuit": true,
      "allowTernary": true
    }],
    "arrow-body-style": [0, "never"],
    "func-names": 0,
    "prefer-const": 0,
    "no-extend-native": 0,
    "no-param-reassign": 0,
    "no-restricted-syntax": 0,
    "no-eval": 0,
    "no-continue": 0,
    "react/jsx-no-bind": 0,
    "no-unused-vars": [2, { "ignoreRestSiblings": true }],
    "no-underscore-dangle": 0,
    "global-require": 0,
    "import/no-unresolved": 0,
    "import/extensions": 0,
    "jsx-a11y/href-no-hash": 0,
    "react/no-array-index-key": 0,
    "react/require-default-props": 0,
    "react/forbid-prop-types": 0,
    "react/no-string-refs": 0,
    "react/no-find-dom-node": 0,
    "import/no-extraneous-dependencies": 0,
    "import/prefer-default-export": 0,
    "react/no-danger": 0,
    "jsx-a11y/no-static-element-interactions": 0,
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 8,
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "settings": {
    "import/resolver": "node"
    }
};

二、Eslint 是什么

1. 编码规范

每个程序员都有自己的编码习惯，最常见的莫过于：

2. Lint 的含义

如果你写自己的项目怎么折腾都没关系，但是在公司中老板希望每个人写出的代码都要符合一个统一的规则，这样别人看源码就能够看得懂，因为源码是符合统一的编码规范制定的。

那么问题来了，总不能每个人写的代码老板都要一行行代码去检查吧，这是一件很蠢的事情。凡是重复性的工作，都应该被制作成工具来节约成本。这个工具应该做两件事情：

Lint 因此而诞生。

3. Eslint 的含义

Lint 是检验代码格式工具的一个统称，具体的工具有 Jslint 、 Eslint 等等 ...........

我们可以形象地将 Lint 看成是 电商行业，而 电商行业 具体表现有 淘宝（Eslint）、京东（Jslint）等。

三、使用 Eslint

确保你的电脑安装了 node 和 npm 环境

四、.eslintrc.js 配置文件讲解

按照上述操作，会生成默认 .eslintrc.js 配置文件，内容如下：

// .eslintrc.js 
module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

该文件导出一个对象，对象包含属性 env、extends、parserOptions、plugins、rules 五个属性，作为刚学习 Eslint 的新手，我们总是想要竭尽所能的详细了解每一个属性是什么，干嘛用的，以获取小小的安全感。

五、更新部分

1. 全局变量配置。

如使用 window 对象，默认情况下会报 no-undef 的错误，需要在 .eslintrc 中进行相应配置。

{
    "rules": {
        // ...
    },
    "globals": {
        "window": true
    }
}

2. 单行跳过 lint 校验

在实际编码时，可能会出现以下的代码。

const apple = "apple";
const balana = "balana";

module.exports = {
    fruit: balana ;
}

在最上面定义了两个变量，在底部的配置文件中只可能用到其中一个变量，另一个用不到的在 eslint 校验时就会报错 no-unused-vars 的错误，意思是变量定义了但是没有被用到。

其中一种解决方案是在 .eslintrc 文件中配置 rules no-unused-vars: 0，意思是项目中不检验变量定义未使用这条规则。强烈不建议这样做，这个规则十分有用，可以规避编写代码时遗漏的变量。

另一种解决方案就是使用行内注释跳过对 apple 和 balana 两个变量跳过 eslint 校验，只影响这两个变量，不影响外部。写法如下：

const apple = "apple";  // eslint-disable-line
const balana = "balana";  // eslint-disable-line
  
module.exports = {
    fruit: balana ;
}

此时使用 eslint 校验时就不会再报错了。

3. 常见规则含义解释

var foo = {x: x};    // 会报错
var bar = {a: function () {}};  // 会报错
var foo = {x};    // 不会报错
var bar = {a () {}};    // 不会报错

// 回调函数，函数的参数是个函数，这个参数函数就是回调函数
funciton bar () {}      // 不是回调函数，不会报错
// setTimeout 的第一个参数就是回调函数，不用箭头函数会报错
setTimeout(() => {
    // .......
}, 1000)

function bar ({ data = {} }) {
    data.num = 12;      // 会报错
}
/* 
虽然报错，又不想要将该校验关闭，如果代码中只有 data 这个属性有这种情形，
可以在 .eslintrc.js 中的 rules 属性中添加配置（可忽略 data 属性做此校验）：
'no-param-reassign': ['error', { 'props': true, 'ignorePropertyModificationsFor': ['data'] }],
'no-param-reassign': 0,  // 关闭该属性校验
*/

function sum (num) {
  let num = 2;    // 报错，因为 num 变量作为参数已经申明过了
}

六、最后

由于作者文笔有限，文章如有遗漏或表达有误，请不吝赐教。希望读完本教程对于文章头部那份配置文件有所理解。

打个广告，最近忽悠了个程序媛入行，她也在简书记录自己学习历程，希望看到这里的看官们可以去 她的简书主页 点个关注，给入门者一点小小的鼓励。

上一篇下一篇

猜你喜欢

热点阅读