概述

使用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. 使用idea生成maven项目的jar包(转)

    第一步  第二步  第三步 转自:https://blog.csdn.net/waterimelon/article/details/69243651

  2. Swagger使用

    Swagger 1.集成springboot 第一步:pom <dependency> <groupId>io.springfox</groupId> <ar ...

  3. 定时任务 spring @Scheduled注解

    使用spring @Scheduled注解执行定时任务: 运行!!! 关于Cron表达式(转载) 表达式网站生成: http://cron.qqe2.com/  直接点击 cronExpression ...

  4. 教女朋友写第一个php

    1 首先 下载xampp 软件.按默认安装好之后 在电脑的右下角的箭头里能发现一个橘色的小图标 双击它 启动阿帕奇和mysql 会变绿 2 打开 C:\xampp\apache 文件夹 找到httpd ...

  5. 利用iptables防火墙允许1521端口被连接

    今天在虚拟机上装了ora11g , 出现2个问题 1.i386的几个RPM包缺少导致安装验证不通过 2.安装完成后,本地电脑连不上虚拟机oracle , 但是能ping通 问题2: 简单的方法就是关掉 ...

  6. 452. Minimum Number of Arrows to Burst Balloons扎气球的个数最少

    [抄题]: There are a number of spherical balloons spread in two-dimensional space. For each balloon, pr ...

  7. stark组件开发之编辑功能实现

    编辑功能.和添加一样! 唯一不同的就是, 需要编辑一个指定的  记录.这就需要,在列表页面, 渲染编辑的时候,添加一个 id 值: class UserInfoHandler(StartHandler ...

  8. ORM常用字段介绍

    Django中的ORM Django项目使用MySQL数据库 1. 在Django项目的settings.py文件中,配置数据库连接信息: DATABASES = { "default&qu ...

  9. 设计模式学习心得<单利模式 Singleton>

    概述 意图 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 主要解决 一个全局使用的类频繁地创建与销毁. 何时使用 当您想控制实例数目,节省系统资源的时候. 如何解决 判断系统是否已经有这个单 ...

  10. idea配置网络代理

    背景 公司限制连接外网,很多软件都被限制了,包括idea,只能通过代理上网. 使用代理上网,以往都是在IE的工具-Internet选项-连接里进行设置就OK了,谷歌浏览器啥的就可以上网了.但intel ...