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
]

完成配置和使用