前端开发规范之React应用使用ESLint

function0831 · 掘金 · · 2017-12-22 05:50

现代前端技术飞速发展，最终形成了以效率和质量为核心的两大趋势。就效率而言，在大型前端项目的开发中，规范的制定、框架的出现与升级、构建的使用更新、组件化的设计实现等都在于前端能更快、更高效地完成更多的事情。质量方面，前端优的提出、前端用户数据的收集、错误日志的收集上报等，都是为了帮助开发者来提高前端性能，提升用户体验。

目前，前端已进入了以效率和质量为核心的工业化时代，各类辅助工具的使用和技术的使用大大减少了前端开发的重复工作量，省去了很多低效的操作。在团队开发中，编码规范至关重要，一份统一的编码规范可以大大降低阅读代码的成本。近几年来，前端业界对编码规范的自动化工具也做了不少实践，从最早的 JSLint,到之后的 JSHint,再到今天的 ESLint。

React使用ESLint

ESLint由 Nicholas C.Zakas 编写，目标是以可扩展、每条规则独立、不内置编码风格为理念编写一个 Lint 工具。用户可以定制自己的规则作成公共包。

ESlint 主要有一下特点：

默认规则包含所有JSLint、JSHint 中存在的规则，易迁移
规则可配置性高，可设置 "警告" "错误" 两个 error 等级，或者直接禁用
包含代码风格检测的规则
支持插件扩展、自定义规则

针对React 开发者，ESLint 已经可以很好地支持JSX语法。

我们从React 应用中怎么配置开始说起。首先通过 npm来安装必要的包：

$ npm install --save-dev babel-eslint eslint eslint-plugin-react

注：这里建议推荐大家可以用 yarn 来安装，详见Yarn中文网

babel-eslint让 ESLint 用 Babel 作为解释器，eslint-plugin-react 让 ESLint 支持 React 语法。然后，在 package.json 里配置对应的 scripts,例如我们对 src 和 test 目录作检查:

"scripts":{
    "lint":"eslint src test"
}

ESLint的配置写在根目录下，新配置文件 .eslintrc,如果子目录也包含 .eslintrc，则子目录会忽略根目录的配置文件。这种设置方式便于在不同环境下使用不同的配置。相关代码如下：

{
    "extends":"eslint:recommended",
    "ecmaFeatures":{
        "jsx":true,
        "modules":true
    },
    "env":{
        "browser":true,
        "node":true,
        "es6":true
    },
    "parser":"babel-eslint",
    "rules":{
        "strict":0,
        "valid-jsdoc":2,
        "react/jsx-uses-react":2,
        "react/jsx-uses-vars":2,
        "react/react-in-jsx-scope":2
    },
    "plugins":[
        "react"
    ]
}

其中，plugins 处配置了 react,既加入了自定义规则，这也是 ESLint 最核心的功能之一。此外，我们也可以在文件内配置特别的配置。

禁用 ESLint,比如：

/* eslint-disable */
const obj={
    key:"value",
};
/* eslint-enable */

禁用一条 Lint，比如：

/* eslint-disable no-console */
console.log('test');
/* eslint-enable no-console */

调整 Eslint 规则，比如：

/* eslint no-console:"error"*/
console.log('test');

ESLint 还有一个参数 extends，相当于我们的配置继承于它。在上述配置中，我们写的是 eslint:recommended，这是内置的配置。我们之后的自定义配置就继承于它。这里，推荐开发者使用 Airbnb 定制的 JavaScript 规范写法，整套规范推荐了 ES6 的语法，是整个前端业界最火也是比较公认的方案。由它的规范写成的公共配置是 eslint-config-airbnb。我们可以通过 npm 安装它，并在自己的 ESLint config 中将 Airbnb 的配置设置成基础设置。

最后，.eslintrc可以写成如下形式:

{
    "extends":"eslint-config-airbnb",
    "ecmaFeatures":{
        "jsx":true,
        "modules":true
    },
    "env":{
        "browser":true,
        "node":true,
        "es6":true
    },
    "parser":"babel-eslint",
    "rules":{
        "strict":0,
        "valid-jsdoc":2,
        "react/jsx-uses-react":2,
        "react/jsx-uses-vars":2,
        "react/react-in-jsx-scope":2
    },
    "plugins":[
        "react"
    ]
}

开发规范可以认为是软件开发工程师之间交流的另一种语言，它在一定程度上决定了团队协作过程中开发的程序代码是否具有一致性和易维护性，统一的开发规范常常可以降低代码的出错概率和团队开发的协作成本。开发规范制定的重要性不言而喻，使用怎样的规范又成为了另一个问题，因为编程规范并不唯一。通俗地讲，规范地差别很多时候只是代码写法的区别，不同的规范都有各自的特点，没有优劣之分，在选择时也没必要纠结使用哪一种规范，不过既然规范是提高一个团队开发效率的虚拟工具，那么一个团队里还是尽可能使用同一种开发规范比较好。欢迎大家加入前端技术交流群 544587175。

原文地址：访问原文地址
快照地址：访问文章快照

分享到微博