"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>;
}
"react/no-string-refs": 1,react 项目中给指定元素加事件,使用到 react 的 ref 属性
常用方法(会报错)
<Form ref="form1"></Form>

this.refs.form.validate((valid) => {

});

正确方法:

<Form ref={ e => { this.form1 = e } }></Form>

this.form1.validate((valid) => {

});
"react/self-closing-comp": 1,//当标签没有子元素的时候,始终使用自闭合的标签
// bad
<Foo className="stuff"></Foo> // good
<Foo className="stuff" />
"react/sort-comp": 1,//按照具体规范的React.createClass 的生命周期函数书写代码
 
"react/jsx-pascal-case": 1,//拓展名:React组件使用.jsx扩展名;文件名:文件名使用帕斯卡命名:HomePage.jsx; 引用命名:React组件使用帕斯卡命名,引用实例采用驼峰式命名
// bad
import reservationCard from './ReservationCard'; // good
import ReservationCard from './ReservationCard'; // bad
const ReservationItem = <ReservationCard />; // good
const reservationItem = <ReservationCard />;
"template-curly-spacing": [1,"always"], 此规则可根据样式指南强制花括号对内使用间距
"quotes"//强制一致使用反引号,双引号,单引号。
      "quotes": [
1,
"single",
{
"avoidEscape": true
}
],
"semi": [1,"never",{"beforeStatementContinuationChars": "always"}],//不加分号,"beforeStatementContinuationChars": "always"要求在声明的末尾加分号,如果下一行开头[(/+,或-
"prefer-const": 1,//如果是不变的,提示用常量const声明会更好
 
"react/prefer-es6-class": 1,//如果组件拥有内部的state或者refs时,更推荐使用class extends Component,除非有更好的理由使用mixin。
// bad
const Listing = React.createClass({
// ...
render() {
return &lt;div&gt;{this.state.hello}&lt;/div&gt;;
}
}); // good
class Listing extends React.Component {
// ...
render() {
return &lt;div&gt;{this.state.hello}&lt;/div&gt;;
}
}
"react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}],//文件是.js还是.jsx
function MyComponent() {
return <div />;
} // bad
组件名: MyComponent.js // good
组件名: MyComponent.jsx
"react/jsx-curly-spacing": [1, "always"],//在jsx属性和表达式中强制空格。
"react/no-deprecated":1,//不使用弃用的方法
"react/jsx-no-undef":1,//在jsx中禁止未声明的变量
"no-undef": 1,//不能有未定义的变量
"react/jsx-no-duplicate-props": 1,//防止在jsx中重复的props
"react/jsx-key": 1,//子数组和迭代器中验证jsx具有key属性
"react/prop-types": [1,{"ignore": ["match"]}],//防止在React组件定义中丢失props验证,这里不针对match验证
"react/no-array-index-key": 1,//防止在数组中遍历中使用数组key做索引
"class-methods-use-this": 1,//该规则旨在标记不使用的类方法this
"no-empty": 1,//块语句中的内容不能为空
"no-case-declarations": 1,//不允许在 case 子句中使用词法声明
"no-return-assign": 1,//禁止在 return 语句中使用赋值语句
"no-param-reassign": 1,不允许对function对参数重新赋值
"no-shadow": 1,//禁止 var 声明 与外层作用域的变量同名
"camelcase": 1,//强制使用骆驼拼写法命名约定
"no-unused-vars": 1,//禁止出现未使用过的变量
 
"react/jsx-closing-tag-location": 1,//强制执行多行JSX元素的结束标记位置
"react/jsx-no-literals":1,//在JSX中使用文字字符串时,您可以将其包装在JSX容器中{'TEXT'}


create-react-app项目中的eslint的更多相关文章

  1. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

  2. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  3. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  4. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  5. Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

    Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...

  6. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  7. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  8. 在React旧项目中安装并使用TypeScript的实践

    前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...

  9. 我是如何在公司项目中使用ESLint来提升代码质量的

    ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具. 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/. ESLint的 ...

  10. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

随机推荐

  1. UITableView:改变 TableHeaderView 的高度

    参考:http://stackoverflow.com/a/526825 有这么一种需求,在列表顶端显示一些别样的数据,而这个别样的数据则需要通过一个别样的 View 来展现,它便是 UITableV ...

  2. Java泛型概述

    泛型是Java中一个非常重要的知识点,在Java集合类框架中泛型被广泛应用.本文我们将从零开始来看一下Java泛型的设计,将会涉及到通配符处理,以及让人苦恼的类型擦除. 泛型基础 泛型类 我们首先定义 ...

  3. http 断点续传

    一.序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Header)和实体组成.大多数 HTTP 协议的使用 ...

  4. 解决错误:“废弃 document 元素之后的内容”——HTML5新特性,局部样式表

    最近正在学习angularjs,不过本文和angularjs没多大关系.在学习使用route和ng-view使用模版之后,发现view装载之后,firefox都会报个错误“废弃 document 元素 ...

  5. Javascript数组与类数组对象

    问题来由: 之前面试X公司的时候,问我关于原型链知道多少,于是我就开始说了一些有关于原型链的东西,面试官问Array的原型是什么,我说是对象,毕竟Array.prototype===array.__p ...

  6. 双向认证SSL原理

    http://m.blog.chinaunix.net/uid-540802-id-3170984.html 文中首先解释了加密解密的一些基础知识和概念,然后通过一个加密通信过程的例子说明了加密算法的 ...

  7. 有关maven不能加载ojdbc14.jar解决方法

    首先下载ojdbc14-10.2.0.4.0.jar这个包,然后在cmd下输入以下 mvn install:install-file -DgroupId=com.oracle -DartifactId ...

  8. webGL 光照

    1.着色(shading) 在三维图形学术语“着色”的真正含义就是,根据光照条件重建“物体各表面明暗不一的效果”的过程.明白着色过程,需要考虑两件事:    1.发出光线的光源类型.    2.物体表 ...

  9. mysql 连接字符串 CONCAT

    以前用SQL Server 连接字符串是用“+”,现在数据库用mysql,写个累加两个字段值SQL语句居然不支持"+",郁闷了半天在网上查下,才知道mysql里的+是数字相加的操作 ...

  10. 如何将会员名单加入LINE@生活圈?

    如何将会员名单加入LINE@生活圈? 我要如何将会员名单加入LINE@生活圈呢?答案是没有办法利用LINE@生活圈直接加入会员名单,LINE@生活圈是许可式行销,必须由LINE好友主动将LINE@生活 ...