Vite+Eslint9.0+Prettier

1. 创建vite项目

// 安装vite
pnpm create vite
// 创建名为my-vue-app的项目,模板为vue-ts版本
pnpm create vite@latest my-vue-app -- --template vue-ts

2. 安装eslint,以下步骤完成后会有eslint.config.js文件

pnpm create @eslint/config@latest


√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · javascript
√ Where does your code run? · browser, node
The config that you've selected requires the following dependencies:

eslint@9.x, globals, @eslint/js, eslint-plugin-vue
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
☕️Installing...

3. 安装prettier

pnpm i prettier eslint-config-prettier -D

4. 配置prettier到配置文件中,在eslint.config.js文件中引入eslintConfigPrettier

import globals from 'globals'
import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import eslintConfigPrettier from 'eslint-config-prettier'

export default [
  { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
  { files: ['**/*.js'], languageOptions: { sourceType: 'commonjs' } },
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },
  eslintConfigPrettier
]

完成配置和使用