在反应项目中使用Eslint代码检查工具及常见问题

输入上述命令之后,会出现询问界面:

　　

& # 63;你想要如何配置ESLint& # 63;(用箭头键)
　　,用一个流行的风格指南
　　& # 10095;回答你的风格
　　,检查您的JavaScript文件(s)
　　

　　 　　

选择“回答你的风格”,后面有一些问题,根据实际进行选择。

　　

上述操作完成之后,会帮我们创建一个基础的.eslintrc.yml文件。我们也可以使用触摸.eslintrc.yml自行创建。

　　

<强> 2。安装babel-eslint
　　

　　

由于项目中需要使用到ES2015的语言规范,因此需要安装babel-eslint:

　　 　　 　　npm安装——save-dev babel-eslint 　　 　　

安装完成之后,我们需要在.eslintrc.yml中修改配置

　　 　　 　　解析:“babel-eslint” 　　 　　

【注意】:若没有该项,曾手动增加

　　

<强> 3。安装eslint-plugin-react
　　

　　

项目中需要使用反应框架,需要识别出反应特定的语法规则和要求,需要安装eslint-plugin-react:

　　 　　 　　npm安装——save-dev eslint-plugin-react 　　 　　

安装完成之后,我们需要引入该Eslint组件。修改.eslintrc.yml配置:

　　 　　 　　插件: 　　——反应 　　 　　

特别提醒:YML语法规则中表示数组格式:——开头,后面为数组元素,如此处的反应。属性值中若不含特殊字符,可以不加上双引号。

　　

<强> 4。安装Airbnb
　　

　　

到现在为止,我们只使用了一些默认创建的校验规则,为了避免我们自己按照Eslint的规则一个一个来个性化定制规则,很是麻烦。这里我们使用GitHub, airbnb/javascript: javascript风格指南规范来定义规则。这就需要安装如下插件:

　　 　　 　　npm我——save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y 　　 　　

接着,我们修改.eslintrc.yml配置,将扩展插件变更为Airbnb:

　　 　　 　　延伸:“airbnb” 　　 　　

到此,静态代码检查工具安装结束。

　　

<>强检查Git提交的代码
　　

　　

除了静态代码检查,我们还设置一道关卡来保证提交的代码符合规范。这就需要使用到我们主角导向钩子。
　　这里假设项目中使用Git进行代码的提交操作。

　　

首先在包中。json中增加如下脚本指令:

　　 　　 　　{ 　　"脚本":{ 　　“棉絮”:“eslint - ext js - ext .jsx src " 　　} 　　} 　　之前 　　 　　

这里将检查目录src下面所有以js或。jsx格式结尾的代码文件。

　　

然后,安装导向,以便检查提交操作:
　　

　　

先执行安装npm安装——save-dev未雨绸缪,然后在包中。json中增加下面配置。

　　 　　 　　{ 　　“未雨绸缪”:( 　　“棉絮” 　　］ 　　} 　　之前 　　 　　

这里的线头对应第第1步中增加的脚本命令名。

　　

完成之后,在每次提交代码之前,未雨绸缪都会拦截Git的提交操作,然后运行线头命令进行代码检测,若检测到有违反校验规则的情况,则会返回错误,从而导致Git提交失败。

　　

　　

　　

<强> 1。代码检查。js文件不支持jsx。
　　

　　

　　

error JSX不允许与扩展的. js文件,反应/jsx-filename-extension
　　

　　 　　

此时需要增加配置以便支持在js文件中支持使用JSX语法。

　　 　　 　　规则: 　　反应/jsx-filename-extension: 　　——警告 　　-扩展: 　　- - - - - -”。js " # . js文件适用 　　——“.jsx” 　　

在反应项目中使用Eslint代码检查工具及常见问题