创建 react 项目

npx create-react-app jira-new --template typescript

如果不想使用 TS,而要用 JS 的话,则删除 —template typescript 后缀

添加 prettier

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json

兼容 eslint 规则

npm install --save-dev eslint-config-prettier

在 package.json 中添加如下语句:

{
"extends": [
"some-other-config-you-use",
"prettier"
]
}

添加 Git hooks

npx mrm lint-staged

如果运行失败,则运行下面语句,其实上面那句命令等价于下面四条命令

npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

注意,windows 不能直接添加 pre-commit,需要分步执行

npx husky add .husky/pre-commit

然后在 .husky/pre-commit 文件中添加 npx lint-staged 命令

在 package.json 中添加 lint-staged 命令

"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
}

添加 commit-lint

commit-lint 的作用是规范化 git 提交,约束 git 提交时的语句

# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

还是注意,在windows下面,最后一句输出的语句会被双引号包裹,需要手动从 commitlint.config.js 文件内容中删除

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

windows分步执行,mac无此问题

创建react项目并集成eslint/prettier/commit-lint的更多相关文章

  1. 创建TypeScript代码模板(NVS+Yarn+ESLint+Prettier+Husky)

    创建TypeScript代码模板(NVS+Yarn+ESLint+Prettier+Husky) Cui, Richard Chikun 本文笔者将带你在Github代码仓库创建TypeScript代 ...

  2. 创建react项目的几种方法

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

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

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

  4. React(一)使用脚手架创建React项目

    1.安装脚手架 现在使用较多的就是这三种脚手架工具: react-boilerplate react-redux-starter-kit create-react-app 我使用的是第三种,faceb ...

  5. 使用creata-react-app脚手架创建react项目时非常慢的问题

    创建react项目必须要有下面两个步骤 cnpm install -g create-react-app  //创建react全局变量 create-react-app my-app //创建一个re ...

  6. 用vue ui创建的项目怎么关闭eslint校验

    在Vue Cli的控制面板找到配置-ESLint configuration,然后关闭保存时检查就可以了

  7. 创建react项目

    npm搭建React项目 React官网提供最简便的方法是使用create-react-app npx create-react-app my-app cd my-app npm start 也可以自 ...

  8. 用rekit创建react项目

    第一步  先进入github.com 然后搜索rekit 往下滑 1 . 先全局安装 npm install -g rekit 2 . 进入自己想要创建项目文件的目录输入 rekit create / ...

  9. create-react-app创建react项目失败!

    create-react-app my-app 用管理员运行cmd,问题依然. 打开日志,看到错误详细信息如下 32189 verbose unlock done using C:\Users\fen ...

随机推荐

  1. MySQL5.7升级到8.0过程详解

    前言: 不知不觉,MySQL8.0已经发布好多个GA小版本了.目前互联网上也有很多关于MySQL8.0的内容了,MySQL8.0版本基本已到稳定期,相信很多小伙伴已经在接触8.0了.本篇文章主要介绍从 ...

  2. Visual Lab Online —— Alpha版本发布声明

    Visual Lab Online -- Alpha版本发布声明 项目 内容 班级:北航2020春软件工程 博客园班级博客 作业:Alpha阶段发布声明 发布声明 目录 Visual Lab Onli ...

  3. ElasticSearch实战系列十一: ElasticSearch错误问题解决方案

    前言 本文主要介绍ElasticSearch在使用过程中出现的各种问题解决思路和办法. ElasticSearch环境安装问题 1,max virtual memory areas vm.max_ma ...

  4. 【BIGDATA】ElasticSearch HEAD插件的GET请求的坑

    今使用HEAD插件,发现复杂查询功能下,使用GET请求有坑. 查询语句如下: GET kk/_search { "query": { "match": { &q ...

  5. CentOS、RHEL、Asianux、Neokylin、湖南麒麟、BC Linux、普华、EulerOS请参考“1.1 CentOS本地源配置”;

      本文档适用于CentOS.RHEL.Asianux.Neokylin.湖南麒麟.BC Linux.普华.EulerOS.SLES.Ubuntu.Deepin.银河麒麟. CentOS.RHEL.A ...

  6. linux操作系统优化系列-RAID不同阵列模式的选择

    背景 笔者所在的某通信运营商某大数据项目由于应用面临瓶颈需要扩充服务器设备,当初上这个项目的时候,服务器上线前的工作(配置raid,安装操作系统,Infiniband网络调试,系统漏洞安全加固)都是我 ...

  7. Jira/Confluence配置Apache SSL 证书

    1. 申请证书 生成私钥 openssl genrsa -out server.key 2048 生成request文件 openssl req -new -key server.key -out s ...

  8. 基于多IP地址Web服务

    [Centos7.4版本] !!!测试环境我们首关闭防火墙和selinux [root@localhost ~]# systemctl stop firewalld [root@localhost ~ ...

  9. C语言程序设计#成绩查询系统

    学生成绩管理系统 [注释]:请点赞,好人一生平[yi]安[wo]. #codeblocks程序下编写 #include<stdio.h>#include<stdlib.h>// ...

  10. Linux Access.conf安全配置

    access.conf is the configuration file used to logins to the Linux or Unix systems. This file is loca ...