阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      ESLint 教程

      编码规范

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

      • 有的人写代码一行代码结尾必须加分号,有的人觉得不加分号更好看;
      • 有的人写代码一行代码不会超过 80 个字符,认为这样看起来简洁明了,有的人喜欢把所有逻辑都写在一行代码上,觉得一段话说完才算完整;
      • 有的人使用变量必然会先定义 var a = 10;,而粗心的人写变量可能是先var a; 然后 a = 10;

      ESLint

      ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于 2013 年 6 月创建。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。

      JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

      ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别,规则本身和测试可以依赖于同样的模式。为了便于人们使用,ESLint 内置了一些规则,当然,你可以在使用过程中自定义规则。

      ESLint 使用 Node.js 编写,这样既可以有一个快速的运行环境的同时也便于安装。

      Philosophy

      所有都是可拔插的

      • 内置规则和自定义规则共用一套规则 API
      • 内置的格式化方法和自定义的格式化方法共用一套格式化 API
      • 额外的规则和格式化方法能够在运行时指定
      • 规则和对应的格式化方法并不强制捆绑使用

      每条规则:

      • 各自独立
      • 可以开启或关闭(没有什么可以被认为“太重要所以不能关闭”)
      • 可以将结果设置成警告或者错误

      另外:

      • ESLint 并不推荐任何编码风格,规则是自由的
      • 所有内置规则都是泛化的

      项目:

      • 通过丰富文档减少沟通成本
      • 尽可能的简单透明
      • 相信测试的重要性

      一个例子

      // .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"
          }
      };
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录