概述

使用Create-React-App脚手架感觉它的eslint配置有点好用,于是考虑不用Create-React-App脚手架该怎么使用这些配置。

我于是eject了Create-React-App脚手架,查看它的详细配置和官方文档,总结了使用它的eslint配置的方法,记录如下,供以后开发时参考,相信对其它人也有用。

配置

(1)首先安装依赖:

npm install eslint --save-dev
npm install babel-eslint --save-dev
npm install eslint-plugin-flowtype --save-dev
npm install eslint-plugin-jsx-a11y --save-dev

(2)然后配置package.json文件。(不需要配置.eslintrc.js文件,详见Eslint Configuring文档)

"eslintConfig": {
"parser": "babel-eslint",
"extends": [
"plugin:flowtype/recommended",
"plugin:jsx-a11y/recommended"
],
"plugins": [
"flowtype",
"jsx-a11y"
]
}

(3)在主目录下面输入eslint + 文件名即可。比如eslint test.js

测试是否生效

测试内容如下,如果有5个报错,那么证明是生效的。

type X = bool
// Message: Use "boolean", not "bool" // Options: ["boolean"]
type X = bool
// Message: Use "boolean", not "bool" // Options: ["bool"]
type X = boolean
// Message: Use "bool", not "boolean"

感想

以前用eslint的时候感觉每次要配置.eslintrc.js文件超级麻烦,现在才发现可以直接在package.json配置,真的很方便。

Create-React-App项目外使用它的eslint配置的更多相关文章

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

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

  2. 深入 Create React App 核心概念

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

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

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

  4. tap news:week5 0.0 create react app

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

  5. 使用create react app教程

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

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

  9. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

随机推荐

  1. 002之MFCSocket异步编程

    当今的网络程序通用体系结构大多为C/S模式,服务器监听收到来自客户端的请求,然后响应并作出应答. 界面对话框如下,输入IP信息进行通信后再进行连接,连接成功即可开始通信.左侧为客户端,右侧为服务端. ...

  2. jquery 返回浏览器顶部

    经常在网页中看到有这样的现象,点击一个按钮,然后页面会跳到页面的中指定的位置,那这种效果是怎么实现的呢? 很多网页都有这种效果:返回顶部或者跳到不同的楼层(以下是天猫的效果) 实现原理: 1.我们来看 ...

  3. Linux下chkconfig命令介绍

    一.引论 chkconfig命令检查.设置系统的各种服务.这是Red Hat公司遵循GPL规则所开发的程序,它可查询操作系统在每一个执行等级中会执行哪些系统服务, 其中包括各类常驻服务.谨记chkco ...

  4. uboot1.1.6

    http://blog.csdn.net/lizuobin2/article/details/52061530

  5. list中null或者空的区别

    1.list 空 默认值是空,即没有值 null 理解为没有对list集合分配内存空间,实际上压根就不存在. 也可以这样理解: null  未建立对象 空    建立对象未放入值 例如  我有一个空着 ...

  6. 天天向上的力量 III

    描述 一年365天,以第1天的能力值为基数,记为1.0. 当好好学习时,能力值相比前一天提高N‰:当没有学习时,能力值相比前一天下降N‰. 每天努力或放任,一年下来的能力值相差多少呢?其中,N的取值范 ...

  7. 目前php连接mysql的主要方式

    mysqli和PDO, 其中mysqli可以有面向过程,面向对象两种方式.而pdo只有面向对象的方式. <?php // $mysql_server = "localhost" ...

  8. Solidity的地址 数组如何判断是否包含一个给定的地址?

    Q: given address[] wallets. What is the correct method to check that the list contains a given addre ...

  9. 如何解决PHP的高并发和大流量的问题

    基础知识 TFS : 吞吐量 (吞吐量是指系统在单位时间内处理请求的数量) RT : 响应时间 (从请求发出到收到响应时间) 并发数 : 在一段时间内同时访问站点的用户数 QPS : 每秒查询率 (每 ...

  10. 锻造(forging)

    --九校联考24OI__D1T1 题目背景 勇者虽然武力值很高,但在经历了多次战斗后,发现怪物越来越难打,于是开始思考是不是自己平时锻炼没到位,于是苦练一个月后发现--自己连一个史莱姆都打不过了. 勇 ...