创建React + Ts项目

一、安装react+ts

npx create-react-app my-app --template typescript

二、安装eslint代码检测

yarn eslint
npx eslint --init

eslint初始化后会出现三个项目，根据项目而定
1、使用什么样的eslint？(这里我选择3)

To check syntax only // 只检测语法性错误
To check syntax and find problems // 检查语法错误并发现问题代码
To check syntax, find problems, and enforce code style // 检查语法错误，发现问题代码，校验代码风格

2、项目使用什么类型的模块？(这里我选择1)

JavaScript modules (import/export) // 允许import/export
CommonJS (require/exports) // 允许require/exports
None of these // 没有任何模块化

3、项目使用哪个框架？(选择1)

React
Vue.js
None of these

4、项目使用Ts？(Yes)

Does your project use TypeScript? › No / Yes

5、代码运行环境？(浏览器)

Browser // 浏览器
Node // node环境

6、如何定义项目定义样式？(使用流行的风格指南)

Use a popular style guide // 使用流行的风格指南
Answer questions about your style // 问答定义形成一个风格

7、遵循哪一种流行风格？(可以根据自己项目所需定义，我选Airbnb)

Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo

8、你希望你的配置文件是什么格式的？(JavaScript，其它的可以自行百度)

JavaScript
YAML
JSON

9、你现在就安装他们吗？(Yes，yarn)

npm
yarn
pnpm

安装完成后会在项目根目录生成.eslitrc.js文件，然后改一下规则(可以根据自己需求增减规则)

module.exports = {env: {browser: true,es2021: true,},extends: ['plugin:react/recommended','airbnb',],parser: '@typescript-eslint/parser',parserOptions: {ecmaFeatures: {tsx: true,},ecmaVersion: 'latest',sourceType: 'module',},plugins: ['react','@typescript-eslint',],rules: {'react/jsx-filename-extension': [2,{ 'extensions': ['ts', 'tsx'] }],'import/no-unresolved': 0,'import/extensions': 0,// 最后一个对象属性要有逗号'comma-dangle': 1,// 定义但从未使用的变量'no-unused-vars': 1,// 赋值但从未使用'react/jsx-no-bind': 1,// 空标签'react/self-closing-comp': 0,// 具有单击处理程序的可见非交互元素必须至少有一个键盘侦听器'jsx-a11y/click-events-have-key-events': 0,// 具有“按钮”交互作用的元素必须是可聚焦的'jsx-a11y/interactive-supports-focus': 0,// 带有事件处理程序的静态HTML元素需要一个角色'jsx-a11y/no-static-element-interactions': 0,// return ;'semi-spacing': 0,// <>只包含不能只包含一个标签'react/jsx-no-useless-fragment': 0,// 值对于布尔属性必须省略'react/jsx-boolean-value': 0,// 必须默认导出'import/prefer-default-export': 0,// 默认变量放到最后一个'default-param-last': 0,// 对参数进行赋值'no-param-reassign': 0,// 使用未声明的函数'no-use-before-define': 0,'no-new': 0,// 不能使用自增'no-plusplus': 0,// button必须是静态type'react/button-has-type': 0,},
};

三、antd axios less…

创建React + Ts项目相关推荐

使用vue-cli创建vue3+ts项目
使用vue-cli创建vue3+ts项目提示:该文章为vue3+ts的!该文章是博主看的B站尚硅谷视频课来进行整理的!尚硅谷的课真的很不错! 文章目录使用vue-cli创建vue3+ts项目前言 ...
使用Vite创建Vue3+TS项目并整合Element Plus框架等一条龙服务
记录一下使用Vite创建Vue3+TS项目以及整合Element Plus框架,还有Less.Pinia.Vue-router.monaco-editor等插件或组件. 一.使用Vite创建Vue3+ ...
React + Ts项目搭建
一.安装react+ts npx create-react-app my-app --template typescript 二.安装eslint代码检测一个好的项目必须有一个规范,所以得安装esl ...
用vite创建 vue3 ts项目
先看看vite官网这都2022年了,你肯定玩过vite + vue3 + ts项目吧原先都是其他同事创建好项目,我直接上手这次我自己来创建一下,在这里做一下记录可以直接跟着官方教程走 http ...
React + TS项目开发小技巧总结
一.react hook知识 1.基本使用最常用的Hook,有两个:useState.useEffect import React, { useState } from "react&qu ...
从零开始创建react+Django项目
环境准备 react项目的环境准备和配置参考(后面会需要修改react项目的一些配置,建议先了解): https://blog.csdn.net/sysukehan/article/details/1 ...
react+ts项目实战：如何使用withRouter？
1.我使用withRouter使解决什么问题? 我在项目中使用了antd的Menu组件,其中defaultOpenKeys和defaultSelectedKeys两个属性要是设为一个固定的值,每次刷新 ...
搭建react项目，react+ts，react+typescript
1.使用create-react-app my-react 目前使用create-react-app会遇到以下错误提示: 该错提示我们您正在运行 create-react-app 5.0.0,它落后 ...
React基础学习笔记（一）-react前端项目的两种搭建方式
1.运行环境准备需要先进行react项目的运行环境nodeJS的安装,具体安装流程可以参考: windows版本的安装配置帮助文档:https://www.cnblogs.com/liuqiyun/ ...

创建React + Ts项目

一、安装react+ts

二、安装eslint代码检测

三、antd axios less…

创建React + Ts项目相关推荐

最新文章

热门文章