前言
eslint 是一个非常流行的 JavaScript 静态代码检查工具,能够帮助开发者在编写代码的过程中避免一些常见的错误和不规范的写法。eslint 可以配置规则,让其根据不同的项目需求来自定义校验规则。安装和使用 eslint 对于任何一个前端工程师而言都是非常基础的操作,因此我在这里重点介绍几个常用的 插件/扩展规则。
eslint-config-feng 简介
eslint-config-feng 是一款可以帮助前端工程师自动化 eslint 配置的 npm 包,提供了一套基于最新规范的 eslint 规则,帮助工程师快速的搭建一个符合规范的开发环境,减少因为一些不规范的代码而浪费时间的问题。
该规则基于最近流行的 eslint 规范推出,包含了对于 es6、Node、React 等方面的代码进行检查,并针对页面代码、组件分类等标准提出了建议。下面,将简单介绍如何使用eslint-config-feng。
安装
在项目的根目录里,运行以下命令安装 eslint-config-feng:
npm install eslint-config-feng --save-dev
配置
在项目根目录创建 .eslintrc 文件。设置 eslint 的解析器、扩展、规则等属性,其中 inherits 表示用到了谁的规则。
-- -------------------- ---- ------- - ---------- --------------------- ---------------- - -------------- -- ------------- --------- --------------- - ------ ----- ------------------------------- ---- - -- ------ - ---------- ----- ------- ----- ------ ---- -- -------- --- ---------- -- -
此外,我们还需要添加eslint的插件 eslint-plugin-react 和 eslint-plugin-import, 运行以下命令安装:
npm install eslint-plugin-react eslint-plugin-import --save-dev
示例
在工程项目中创建一个JS文件,添加部分代码,运行 ESlint 检查。
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ---- - ------- -- - ----- ------- --------- - ------------------ ----- -------- - -- -- - -------------- - --- -- ------ - ---- ----------------- ---------------- ------- ------------------------------- ------ -- -- ------ ------- -----
结语
通过使用 eslint-config-feng 和 eslint,我们可以非常方便地规范开发流程,减少错误和问题出现的可能性。eslint-config-feng 提供了非常严格的规则与完善的文档,极大的简化了我们的工作。这篇文章也给出了使用 eslint-config-feng 的基本步骤与配置方法,希望能对前端工程师有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005609481e8991b448dec7f