react-cli
更新日志:
v1.2.0
...未完待续
v1.1.0
- 添加editorconfig
- 配置ESLint
- 集成prettier
- 集成 lint-staged
实现细节:
添加editorconfig
editorconfig 帮助我们约束多个开发者在同一个项目中代码风格,更重要的是它是跨编辑器,IDE 的。
# http://editorconfig.org
# 这是根文件,不用继续往上查找
root = true
# 匹配全部文件
[*]
# 缩进风格,可选"space"、"tab"
indent_style = space
# 缩进的空格树 2
indent_size = 2
# 结尾换行符,可选"if"、"or"、"orif"
end_of_line = lf
# 设置字符集
charset = utf-8
# 删除一行中的前后空格
trim_trailing_whitespace = true
# 在文件结尾插入新行
insert_final_newline = true
配置ESLint
ESLint 可以约束团队成员的代码风格,并且找出一些容易产生问题的代码。vscode 中安装 ESLint 后可以在 问题 面板中看到 ESLint 提示的各种错误。ESLint 自带的 autoFix 也挺好用的。
create-react-app 默认集成了ESLint, 要让编辑器正确提示ESLint错误,需要在项目根目录添加 .eslintrc.js:
/**
* create-react-app默认集成了ESLint, 此配置让编辑器正确提示ESLint错误
*/
module.exports = {
extends: ['react-app'],
};
并且将package.json的配置移除
- "eslintConfig": {
- "extends": "react-app"
- },
为了让vscode的eslint插件启用typescript支持,需要添加下面的配置到项目文件夹中 文件->首选项-> 设置-> 项目文件夹。或者你也可以专门去保存工作区,添加这些配置到工作区中。
{
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
]
}
集成prettier
你进一步编辑 .eslintrc.js 文件,这些更改也 只会影响编辑器集成。它们不会影响终端和浏览器中的 lint 输出。这是因为 Create React App 有意提供了一组最常见的错误规则。
如果要为项目强制执行编码风格,就需要考虑使用 Prettier 而不是 ESLint 样式规则。
/**
* https://prettier.io/docs/en/options.html:请确保先执行了 npm i -D prettier
* 项目代码风格优先级
* 1. .perttierc.js
* 2. .editorconfig
* 3. vscode中的设置
*/
module.exports = {
// 指定打印机将换行的行长度。默认 80
printWidth: 100,
// 指定每个缩进级别的空格数。默认 2
// tabWidth: 2,
// 指定使用制表符缩进行。 默认 false
// useTabs: false,
// 在语句末尾打印分号。默认 true
// semi: true,
// 使用单引号而不是双引号。默认 false
singleQuote: true,
// 引用对象中的属性时更改:默认 as-needed-仅在需要时在对象属性周围添加引号。可选"consistent" - 如果对象中至少有一个属性需要引号,则引用所有属性。"preserve" - 尊重对象属性中引号的输入用法。
// quoteProps: 'as-needed',
// 在jsx中使用单引号。默认 false
jsxSingleQuote: true,
// 多行时尽可能打印尾随逗号。默认 none-没有尾随逗号。可选:es5:在ES5中有效的尾随逗号(对象、数组等)。例如本文件,设置成 es5,就算你最后一个属性-属性值没有加逗号,也会帮你自动加上逗号
trailingComma: 'es5',
// 在对象文字中打印括号之间的空格。默认 true
// bracketSpacing: true,
// 将>多行JSX元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭元素)。默认false
// jsxBracketSameLine: false,
// 在单个箭头函数参数周围加上括号。默认 avoid-尽可能的省略parens。例 x => x。可选 "always"-使用包括parens。例 (x) => x
arrowParens: 'avoid',
// 指定格式化文件的开始行。默认 0
// rangeStart: 0,
// 指定格式化文件的结束行。默认 Infinity
// rangeEnd: Infinity
// 指定要使用的解析器。prettier会自动从输入文件路径中推断出解析器。因此不必更改此设置。默认 babylon
// parser: 'babylon'
// 指定用于推断要使用的解析器的文件名
// filepath: ''
// 需要编译指示。默认 false
// requirePragma: false
// 插入Pragma。默认 false
// insertPragma: false
// 散文包裹。默认 preserve-按原样包装散文。可选,always-如果超过打印宽度就包装。never-不要包装
// proseWrap: 'preserve'
// HTML空白灵敏度 默认 css-尊重css display属性的默认值。可选:strict-空格被认为是敏感的,ignore-空格被认为是不敏感的
// htmlWhitespaceSensitivity: 'css',
// 行结尾:默认 auto-维护现有的行结尾,可选 lf-(\n),在Linux和macOS以及git repos 内部很常见 crlf-回车符+换行符(\r\n), 在Windows上很常见 cr-仅限回车符,很少使用
// endOfLine: 'auto',
};
集成 lint-staged
前面虽然是在自己的电脑自己的编辑器里添加了一些配置,当自己保存时就可以自动格式化自己写的代码。我但是我们并不能强求别人也用vscode来编码,可能别人用习惯了webstorm等。这时候为了继续维持项目统一的风格,最好是在react-cli脚手架工具中直接体现,而尽可能少的让别人需要去做别的编辑器配置。
这一小节做的就是让大家在git commit的时候自动触发prettier格式化代码的命令。
npm i -D husky lint-staged
接下来配置 husky 和 lint-staged。在package.json中加入下面内容。
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --single-quote --write",
"git add"
]
},
v1.0.0
- npm 设为淘宝源
- 在TypeScript中使用antd
- 国际化
实现细节:
npm 设为淘宝源
npm config set registry https://registry.npm.taobao.org
react-cli的更多相关文章
- ReactiveX 学习笔记(28)使用 RxJS + React.js 进行 GUI 编程
课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...
- ReactiveX 学习笔记(26)使用 RxJS + React.js 调用 REST API
JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...
- 使用 typescript 快速开发一个 cli
cli 的全称 command-line interface(命令行界面),也就是前端同学常用的脚手架,比如 yo.vue cli.react cli 等. cli 可以方便我们快速创建项目,下图是引 ...
- react实战系列 —— React 中的表单和路由的原理
其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...
- Angular2 从0到1 (一)
史上最简单Angular2教程,大叔都学会了 作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:An ...
- egg.js in action
egg.js in action fullstack https://github.com/eggjs/egg/ cli config router service midlewares HTTP C ...
- webpack基础知识介绍
1.开发模式 开发模式顾名思义就是我们开发代码时使用的模式 webpack默认只处理js文件,对样式是没办法处理的.因此要处理css资源需要引入CSS-loader 处理CSS资源 如果要使用 css ...
- Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具
Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具 A simple CLI for scaffolding React.js ...
- Ink——一款使用React风格开发命令行界面应用(CLI App)的nodejs工具
Github: https://github.com/vadimdemedes/ink Ink introduction: React for CLIs. Build and test your CL ...
- React & react-native & vue & cli & environment information & report bugs
React & react-native & vue & cli & environment information & report bugs cli che ...
随机推荐
- Django项目:CRM(客户关系管理系统)--36--28PerfectCRM实现King_admin编辑限制
#admin.py # ————————01PerfectCRM基本配置ADMIN———————— from django.contrib import admin # Register your m ...
- Django项目:CRM(客户关系管理系统)--27--19PerfectCRM实现King_admin数据修改
登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html {#table_data_list.html#} {## ————————08PerfectCR ...
- bzoj 4241 历史研究——分块(区间加权众数)
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4241 套路:可以大力预处理,如果求区间加权众数,可以预处理i~j块(或 j 位置)的最大值, ...
- 移动端适配(rem单位定义方法)
注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...
- php传入参数
项目中时常会使用php编写脚本,进行一些统计与批量更新的需求需要进行操作其中使用的方式主要是getopt函数,写法如下 <?php $opt = getopt('m:n:'); $value_m ...
- php用mysql方式连接数据库出现Deprecated报错
以上是用php5.5 连接mysql数据库时报的错. 于是我用php5.4 连接正常没有报错. 这与mysql版本无关系,php 5.x版本,如5.2.5.3.5.4.5.5,怕跟不上时代,新的服务器 ...
- Spring_boot_pom.xml和启动方式
spring-boot-starter-parent 整合第三方常用框架信息(各种依赖信息) spring-boot-starter-web 是Springboot整合SpringMvc Web ...
- 汉诺塔III HDU - 2064
汉诺塔III HDU - 2064 约19世纪末,在欧州的商店中出售一种智力玩具,在一块铜板上有三根杆,最左边的杆上自上而下.由小到大顺序串着由64个圆盘构成的塔.目的是将最左边杆上的盘全部移到右 ...
- JAVA邀请码生成器
code import java.util.Random; /** * 邀请码生成器,算法原理:<br/> * 1) 获取id: 1127738 <br/> * 2) 使用自定 ...
- (转载)http压缩 Content-Encoding: gzip
(内容转自http://liuviphui.blog.163.com/blog/static/20227308420141843933379/) HTTP内容编码和HTTP压缩的区别 HTTP压缩,在 ...