React + Vite 配置 Prettier

安装插件

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

修改eslint.config.ts配置

// ...
import prettierPlugin from 'eslint-plugin-prettier'
import prettierConfig from 'eslint-config-prettier'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    // ...
    extends: [
      // ...
      prettierConfig
    ],
    plugins: {
      prettier: prettierPlugin
    },
    rules: {
      'prettier/prettier': 'error'
    }
  }
])

创建.prettierrc.json文件，配置如下：

{
  // 句末使用分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 多行逗号分割的语法中，最后一行不加逗号
  trailingComma: 'none',
  // 换行符(lf,crlf,cr,auto)
  endOfLine: 'auto',
  // 单行代码换行长度
  printWidth: 120,
  // 代码缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 单个参数的箭头函数不加括号 x => x
  arrowParens: 'avoid',
  // 对象大括号内两边是否加空格 { a:0 }
  bracketSpacing: true,
 
  //仅在必需时为对象的key添加引号（as-needed,consistent,preserve）
  quoteProps: 'as-needed',
  // jsx中使用单引号
  jsxSingleQuote: true,
  //多属性html标签的‘>’折行放置
  jsxBracketSameLine: true,
  //无需顶部注释即可格式化
  requirePragma: false,
  //在已被preitter格式化的文件顶部加上标注
  insertPragma: false,
  //(always,snever,preserve)
  proseWrap: 'preserve',
  //对HTML全局空白不敏感(css,strict,ignore)
  htmlWhitespaceSensitivity: 'ignore',
  //不对vue中的script及style标签缩进
  vueIndentScriptAndStyle: false,
  //对引用代码进行格式化(auto,off)
  embeddedLanguageFormatting: 'auto'
}

配置代码检查器

• 安装插件

npm i vite-plugin-checker -D

• 修改vite.config.ts配置

// ...
import checker from 'vite-plugin-checker'

export default defineConfig({
  plugins: [
    // ...
    checker({
      typescript: true,
      eslint: {
        useFlatConfig: true,
        lintCommand: 'eslint "./src/**/*.{ts,tsx,js,jsx}"'
      },
      terminal: true
    })
  ]
})