create-react-app项目中的eslint
"no-multi-spaces": 1, //禁止多个空格
"jsx-quotes": 1, //此规则强制在JSX属性中一致使用双引号或单引号
"react/jsx-closing-bracket-location": 1, //有多行属性的话, 新建一行关闭标签,为JSX语法使用下列的对齐方式
// bad
<Foo superLongParam="bar"
anotherSuperLongParam="baz" /> // good
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
/> // 如果组件的属性可以放在一行就保持在当前一行中,(个人觉得如果只有一个属性就放在一行)
<Foo bar="bar" />
react/jsx-boolean-value": 1,//当属性值等于true的时候,省略该属性的赋值
disabled=“true” 改成 disabled
"react/wrap-multilines": 1,使用括号包裹多行JSX标签
// bad
render() {
return <MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
} // good
render() {
return (
<MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
);
} // good, when single line
render() {
const body = <div>hello</div>;
return <MyComponent>{body}</MyComponent>;
}
<Form ref="form1"></Form> this.refs.form.validate((valid) => { });
正确方法:
<Form ref={ e => { this.form1 = e } }></Form> this.form1.validate((valid) => { });
// bad
<Foo className="stuff"></Foo> // good
<Foo className="stuff" />
//按照具体规范的React.createClass 的生命周期函数书写代码
// bad
import reservationCard from './ReservationCard'; // good
import ReservationCard from './ReservationCard'; // bad
const ReservationItem = <ReservationCard />; // good
const reservationItem = <ReservationCard />;
"quotes": [
1,
"single",
{
"avoidEscape": true
}
],
"beforeStatementContinuationChars": "always"
要求在声明的末尾加分号,如果下一行开头[
,(
,/
,+
,或-
。// bad
const Listing = React.createClass({
// ...
render() {
return <div>{this.state.hello}</div>;
}
}); // good
class Listing extends React.Component {
// ...
render() {
return <div>{this.state.hello}</div>;
}
}
function MyComponent() {
return <div />;
} // bad
组件名: MyComponent.js // good
组件名: MyComponent.jsx
//防止在数组中遍历中使用数组key做索引
this
{'TEXT'}
create-react-app项目中的eslint的更多相关文章
- create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 在React旧项目中安装并使用TypeScript的实践
前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...
- 我是如何在公司项目中使用ESLint来提升代码质量的
ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具. 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/. ESLint的 ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
随机推荐
- autofac 实例生命周期
转自逆心博客园 autofac 实例生命周期 实例生命周期决定在同一个服务的每个请求的实例是如何共享的. 当请求一个服务的时候,Autofac会返回一个单例 (single instance作用域), ...
- Redis系列-php怎么通过redis扩展使用redis
From: http://blog.csdn.net/love__coder/article/details/8691679 通过前面几篇blog,我们应该对redis有个大致的认识,这里再讲解下,p ...
- 使用DataSource绑定一维数组时,DataTextField只需绑定空字符串
方法定义: public static void InitDropDownList(DropDownList ddl, bool isAddTopItem, DropDownList ddlSub, ...
- WebGL 进入三维世界
1.观察目标点和上方向 为了确定观察者的状态,你需要获取两项信息:视点,即观察者的位置:观察目标点(look-at point),即被观察目标所在的点,它可以用来确定视线.此外,因为我们需要把观察到的 ...
- Linux下修改当前用户的最大线程数和 open files
1 查看当前用户的线程 ulimit -a 2 修改配置文件 vi /etc/security/limits.d/90-nproc.conf 3 改完即可生效 4 修改可打开的最大文件数 vi /e ...
- Linux进程作业的查看和杀死
引入进程 进程 线程 PS命令.TOP命令.其他查看进程命令 进程的优先级 作业控制机制 kill命令 一.引入进程 1.内存划分为:用户空间和内核空间 1.在用户空间里运行的进程,就是用户进程,所属 ...
- scala中隐式转换之隐式转换调用类中本不存在的方法
/** * Created by root * Description : 隐式转换调用类中本不存在的方法 */ class Person(name : String){ def getPersonN ...
- CM和CDH的安装-进阶完成
安装Cloudera Manager Server 和Agent 1.在cdh1解压cloudera-manager-el6-cm5.9.0_x86_64.tar.gz(cdh1节点)tar -zcv ...
- 第一个map reduce程序
完成了第一个mapReduce例子,记录一下. 实验环境: hadoop在三台ubuntu机器上部署 开发在window7上进行 hadoop版本2.2.0 下载了hadoop-eclipse-plu ...
- osgearth2.8关于RectangleNodeEditor编辑点不可见的问题
static_cast<SphereDragger*>(_llDragger)->setColor(osg::Vec4(0,0,1,0)); Alpha写成了0 应该写成 stati ...