一键下载

将搭好的框架上传至了Vite-React-ts脚手架

React+ts

如果使用ts开发，编译问题较为麻烦，因此配置脚手架会是比较好的选择。技术栈选择（全凭个人喜欢选的😁）：

webpack：上手比较困难
vite：实习公司也在使用，且在掘金上看到了一篇配置的技术笔记，便于学习，所以选择这个

vite + react + ts

vite无需下载，参考官方文档，一键搭建脚手架,搭建完成后运行yarn，配置包依赖。即可正常使用了，yarn run dev运行项目，对node版本有要求。以下所有操作，需重启vscode后生效。

由于vite使用了module，所以将所有相关文件改为cjs，这里可以在package.json中查看type类型

这点查了好久😭

yarn create vite  my-low-code --template react-ts

下面加了一些非必要的配置。

安装less和sass，看个人选择

yarn add less
yarn add sass

安装eslint，-d为dev环境，自行配置.eslintrc.cjs文件

yarn add eslint -D
// 然后终端运行
yarn eslint --init  // 初始化后按提示配置,21121122

vscode插件也可以单独配置格式，但是如果项目中有.eslintrc.js文件，那么eslint插件会优先执行.eslintrc.js文件的配置。

自定义忽略的文件.eslintignore文件中加入加入文件名即可

配置：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'no-undef': 2,
    '@typescript-eslint/no-unused-vars': [
      2,
      {
        vars: 'all',
        args: 'none'
      }
    ],
    'jsx-a11y/anchor-is-valid': 'off',
    'prettier/prettier': [
      'error',
      {},
      {
        usePrettierrc: true
      }
    ]
  },
  prettier: 'prettier --write .',
  overrides: [{
    files: ['**/*.ts?(x)'],
    rules: {
      // Place to specify ESLint rules.
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/no-var-requires': 'off',
      '@typescript-eslint/no-non-null-assertion': 'off',
      '@typescript-eslint/no-this-alias': 'off',
      '@typescript-eslint/ban-ts-comment': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/triple-slash-reference': 0,
      'no-use-before-define': 'off',
      '@typescript-eslint/no-use-before-define': 'off'
    }
  }]
}

安装prettier,在项目的根目录创建.prettierrc.cjs文件,完成自定义配置

yarn add prettier -D

配置 .prettierrc.cjs

module.exports = {
  semi: false,
  trailingComma: "none",
  singleQuote: true,
  jsxSingleQuote: true,
  printWidth: 120,
  tabWidth: 2
}

避免eslint和perttier冲突安装 eslint-config-prettier,这个包在3时应该已经按提示装过了，安装 eslint-plugin-prettier,

yarn add -D eslint-config-prettier eslint-plugin-prettier

修改 eslintrc 文件

{
  "extends": [
    "...",
    // 避免prettier规则与eslint冲突,冲突使用prettier规则, prettier需要放置在最后
    "plugin:prettier/recommended"  
  ]
}

可以测试一下，运行yarn run prettier 不过实测的时候，使用cjs暂时没遇到冲突

安装stylelint

stylelint-config-standard: 官网提供的 css 标准
stylelint-config-recess-order: 属性排列顺序
stylelint-prettier: 基于 prettier 代码风格的 stylelint 规则
stylelint-config-prettier：禁用所有与格式相关的 Stylelint 规则，解决 prettier 与 stylelint 规则冲突，确保将其放在 extends 队列最后，这样它将覆盖其他配置。

yarn add -D stylelint stylelint-config-standard stylelint-config-rational-order stylelint-prettier stylelint-config-prettier

配置 .stylelintrc.cjs 文件

  module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-config-prettier'],
  rules: {
    // 颜色值小写
    "color-hex-case": "lower",
    // 注释前无须空行
    "comment-empty-line-before": "never",
    // 使用数字或命名的 (可能的情况下) font-weight 值
    "font-weight-notation": null,
    // 在函数的逗号之后要求有一个换行符或禁止有空白
    "function-comma-newline-after": null,
    // 在函数的括号内要求有一个换行符或禁止有空白
    "function-parentheses-newline-inside": null,
    // url使用引号
    "function-url-quotes": "always",
    // 字符串使用单引号
    "string-quotes": "single",
    // 禁止低优先级的选择器出现在高优先级的选择器之后
    "no-descending-specificity": null,
    // 禁止空源
    "no-empty-source": null,
    // 禁止缺少文件末尾的换行符
    "no-missing-end-of-source-newline": null,
    },
   };

配置自动保存，新建.vscode文件夹，新增文件setting.json，增加以下语句：

{
    "editor.formatOnType": true,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    },
    "css.lint.unknownAtRules": "ignore",
    "scss.lint.unknownAtRules": "ignore"
}

SRC项目目录配置

components 公共组件
- 此目录下放的全部是纯净的组件不和业务挂钩的
hooks 自定义 hooks
pages 页面组件，所有页面写在这里
service 接口定义
utils 工具类

Vite搭建React+TS脚手架+自动格式化配置 | 青训营笔记

一键下载

React+ts

vite + react + ts

SRC项目目录配置