没有合适的资源?快使用搜索试试~ 我知道了~
首页在React项目中使用Eslint代码检查工具及常见问题
在React项目中使用Eslint代码检查工具及常见问题
4 下载量 125 浏览量
更新于2023-03-16
收藏 75KB PDF 举报
主要介绍了在React项目中使用Eslint代码检查工具及常见问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
资源详情
资源推荐
在在React项目中使用项目中使用Eslint代码检查工具及常见问题代码检查工具及常见问题
主要介绍了在React项目中使用Eslint代码检查工具及常见问题,小编觉得挺不错的,现在分享给大家,也给大
家做个参考。一起跟随小编过来看看吧
背景背景
最近使用 create-react-app 创建了一个项目。但是众所周知的是,这个脚手架创建的项目并没有默认加入 Eslint 等 lint 插件来
规范代码。
考虑到项目中很多项目没有使用类似的代码检查工具,为了规范开发。这次有必要记录一下流程。
使用使用 Eslint 流程流程
1. 安装安装 Eslint
首先,先安装 Eslint 到项目本地(全局安装亦可)。
npm --save-dev install eslint
安装完成之后,我们先创建基础的 .eslintrc.yml (建议使用 .yml 格式,json/js 格式也可以):
./node_modules/.bin/eslint --init ## 全局安装,可用 `eslint --init`
输入上述命令之后,会出现询问界面:
? How would you like to configure ESLint? (Use arrow keys)
Use a popular style guide
❯ Answer questions about your style
Inspect your JavaScript file(s)
选择“Answer questions about your style”,后面有一些问题,根据实际进行选择。
上述操作完成之后,会帮我们创建一个基础的 .eslintrc.yml 文件。我们也可以使用 touch .eslintrc.yml 自行创建。
2. 安装安装 babel-eslint
由于项目中需要使用到 ES2015 的语言规范,因此需要安装 babel-eslint :
npm install --save-dev babel-eslint
安装完成之后,我们需要在 .eslintrc.yml 中修改配置
parser: "babel-eslint"
【注意】:若没有该项,曾手动增加
3. 安装安装 eslint-plugin-react
项目中需要使用 React 框架,需要识别出 React 特定的语法规则和要求,需要安装 eslint-plugin-react :
npm install --save-dev eslint-plugin-react
安装完成之后,我们需要引入该 Eslint 组件。修改 .eslintrc.yml 配置:
plugins:
- react
特别提醒:YML语法规则中表示数组格式:- 开头,后面为数组元素,如此处的 react。属性值中若不含特殊字符,可以不加
上双引号。
4. 安装安装 Airbnb
到现在为止,我们只使用了一些默认创建的校验规则,为了避免我们自己按照 Eslint 的规则一个一个来个性化定制规则,很是
麻烦。这里我们使用 GitHub - airbnb/javascript: JavaScript Style Guide 规范来定义规则。这就需要安装如下插件:
npm i --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y
接着,我们修改 .eslintrc.yml 配置,将扩展插件变更为 Airbnb :
extends: "airbnb"
到此,静态代码检查工具安装结束。
weixin_38684892
- 粉丝: 10
- 资源: 936
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功