React脚手架+typescript+antd+less+eslint+prettier

React脚手架+typescript+antd+less+eslint+prettier

脚手架创建react项目

npx create-react-app test-react --template typescript
yarn create react-app test-react --template typescript

创建好后的目录结构如下

.
│  .gitignore
│  package.json
│  README.md
│  tree.md
│  tsconfig.json
│  yarn.lock
│  
├─public
│      favicon.ico              除这两个其余均可删除，但index.html中的对其他的引用部分也应删除
│      index.html               其余均可删除
│      logo192.png
│      logo512.png
│      manifest.json
│      robots.txt
│      
└─src
        App.css
        App.test.tsx
        App.tsx
        index.css
        index.tsx
        logo.svg
        react-app-env.d.ts
        reportWebVitals.ts
        setupTests.ts

安装依赖

# 个人习惯用yarn，可自行使用其他工具
yarn add react-router-dom @types/react-router-dom
yarn add antd axios less

# 修改react的配置
yarn add -D customize-cra react-app-rewired

# 使用less
yarn add -D less-loader@6.0.0

# 使用eslint & StandardJS代码规范
yarn add -D eslint@7.11.0 babel-plugin-import eslint-config-standard eslint-loader eslint-plugin-babel eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-react

# 使用prettier
yarn add -D prettier

config-overrides.js配置

代理 + 路径别名+ less + antd按需加载

// package.json
...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },

// config-overrides.js
const path = require('path')
const {
  override,
  addLessLoader,
  addWebpackAlias,
  overrideDevServer,
  fixBabelImports
} = require('customize-cra')

// 配置代理
const proxy = {
  '/api': {
    target: 'http://xxx:3000',
    changeOrigin: true
  }
}
const devServerConfig = () => config => {
  return {
    ...config,
    proxy
  }
}

// 修改端口号
process.env.PORT = 3031

module.exports = {
  webpack: override(
    addWebpackAlias({
      // 路径别名，还需要配置tsconfig.json、tsconfig-base.json，在后面，可配置多个路径别名
        '@': path.resolve(__dirname, 'src/')
    }),
    // antd按需加载
    fixBabelImports('import', { 
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true // 支持less
    }),
    // 配置less
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true // 启用支持内联javascript
        //  localIdentName: '[local]--[hash:base64:5]'
      }
    })
  ),
  devServer: overrideDevServer(devServerConfig()) 
}

路径别名

// tsconfig-base.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

// tsconfig.json
{
    // 加入下面这一行就行
    "extends": "./tsconfig-base.json", 
    ...
}

eslint

# 创建eslint规范文件
npx eslint --init
# 下面是eslint配置选项的选择，安装完成后会出现.eslintrc.json文件
--To check syntax only
--Javascript moduless (import/export)
--React
--... use Typescript? Yes
--按一下a键，全选
--JSON
--Yes

// .eslintrc.json
// 写入以下内容，使用的是standardjs标准
{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "globals": {
        "JSX": "readonly",
        "React": "readonly",
        "NodeJS": "readonly"
    },
    "extends": [
        "plugin:react/recommended",
        "standard"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "prettier",
        "react-hooks"
    ],
    "rules": {
        
    }
}

prettier

创建文件 .prettierrc

// .prettierrc
{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  // 尾后逗号
  "trailingComma": "none",
  // 取消要求箭头函数的参数必须使用括号
  "arrowParens": "avoid"
}

# 对所有文件进行格式化
npx prettier --write .

# prettier配合VS Code插件使用更方便
# VS Code 格式化快捷键 Shift + Alt + F

启动项目

yarn start

# 根据eslint提示进行修改文件