如何优雅✨的创建一个React项目（React + Vite + TypeScript +Prettier + Eslint）

在2023年的那个秋天，夏天的遗憾与秋天落叶🍂一起飘落，我创建了一个新的React项目......

😀 使用Vite初始化项目

npm init vite

😋 安装Prettier

yarn add -D prettier

yarn add -D eslint-config-prettier

yarn add -D eslint-plugin-prettier

在根目录新建 .prettierrc.cjs 文件

module.exports = {  
    printWidth: 120,  
    tabWidth: 2,  
    useTabs: false,  
    semi: false,  
    singleQuote: true,  
    jsxSingleQuote: false,  
    jsxBracketSameLine: true,  
    trailingComma: 'none',  
    bracketSpacing: true  
}

🧐 安装Eslint

1、安装依赖

yarn add -D eslint

2、初始化Eslint配置

npx eslint --init

一波操作之后，你会发现在项目根目录会生成一个 .eslintrc.cjs 文件

module.exports = {  
    env: {  
        browser: true,  
        node: true,  
        es2021: true  
    },  
    extends: [  
        'eslint:recommended',  
        'plugin:react/recommended',  
        'plugin:@typescript-eslint/recommended',  
        'plugin:prettier/recommended',  
        'eslint-config-prettier'  
    ],  
    parser: '@typescript-eslint/parser',  
    parserOptions: {  
        ecmaVersion: 'latest',  
        sourceType: 'module',  
        ecmaFeatures: {  
        jsx: true  
        }  
    },  
    plugins: ['prettier', 'react', 'eslint-plugin-prettier'],  
    rules: {  
        'prettier/prettier': 'warn',  
        '@typescript-eslint/no-explicit-any': ['off']  
    }  
}

Over!