配置React + Vite + EsLint + Prettier + Styled

Vite创建项目

yarn create vite

• 输入项目名称；
• 选择前端框架；
• 选择开发语言。

// 进入项目目录 cd 项目
// 安装依赖 yarn 
// 启动项目 yarn run dev

安装EsLint

yarn add -D eslint

初始化配置EsLint

npx eslint --init

根据自己需要选择

• How would you like to use ESLint?
• What type of modules does your project use?
• Which framework does your project use?
• Does your project use TypeScript?
• Where does your code run? (用空格选中 Browser+Node)
• What format do you want your config file to be in?
• Would you like to install them now?
• Which package manager do you want to use?

安装完成后  (在项目根目录会出现.eslintrc.cjs文件)

安装Prettier

yarn add -D prettier
yarn add -D eslint-config-prettier // eslint兼容的插件
yarn add -D eslint-plugin-prettier // eslint的prettier

根目录新建 .prettierrc

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "endOfLine": "auto",
  "eslintIntegration": true
}

配置 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'eslint-config-prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {} // 配置规则
};

vscode 配置

"editor.codeActionsOnSave": {
  "source.fixAll": true,
  "source.fixAll.eslint": true,
  "eslint.autoFixOnSave" : true,
},

安装Css样式库

yarn add @emotion/react
yarn add @emotion/styled