React中使用eslint（平面配置）和prettier格式化代码

安装依赖

# 安装 ESLint 和 Prettier
npm install --save-dev eslint prettier 
# 安装必要的 ESLint 插件和解析器 
npm install --save-dev eslint-config-prettier eslint-plugin-prettier 
# 安装 ts 解析器（含部分推荐配置）
npm install --save-dev typescript-eslint

新建一个eslint配置文件

这里使用的是平面配置 eslint.config.js

import globals from 'globals'
import tseslint from 'typescript-eslint'
import pluginPrettier from 'eslint-plugin-prettier'
import prettierConfig from 'eslint-config-prettier'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [
       ...tseslint.configs.recommended,
       // 避免和eslint的规则冲突
       prettierConfig
      ],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      prettier: pluginPrettier,
    },
    rules: {
        // 添加后才会在代码中报错提示
      'prettier/prettier': 'error',
      semi: ['error', 'never']
    },
  },
)

添加prettier配置

.prettier.json

{
	"trailingComma": "es5",
	"tabWidth": 2,
	"useTabs": true,
	"semi": false,
	"bracketSpacing": true,
	"jsxBracketSameLine": false,
	"singleQuote": true,
	"endOfLine": "auto",
	"eslintIntegration": true,
	"printWidth": 100
}

VS code保存时自动格式化

.vscode/settings.json

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