创建React + Ts项目

一、安装react+ts

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

  

 

  
1
 

二、安装eslint代码检测

yarn eslint
npx eslint --init

  

 

  
1
  
2
 

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

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


  

 

  
1
  
2
  
3
  
4
 

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

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


  

 

  
1
  
2
  
3
  
4
 

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

React
Vue.js
None of these


  

 

  
1
  
2
  
3
  
4
 

4、项目使用Ts？(Yes)

Does your project use TypeScript? › No / Yes


  

 

  
1
  
2
 

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

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


  

 

  
1
  
2
  
3
 

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

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


  

 

  
1
  
2
  
3
 

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


  

 

  
1
  
2
  
3
  
4
  
5
 

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

JavaScript
YAML
JSON


  

 

  
1
  
2
  
3
  
4
 

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

npm
yarn
pnpm


  

 

  
1
  
2
  
3
  
4
 

安装完成后会在项目根目录生成.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,
  },
};



  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
 

三、antd axios less…

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/126347236