安装eslint

通过pnpm create @eslint/config命令安装eslint，然后根据提示选则对应的选项：

等待依赖安装完成，此时目录下会自动生成eslint.config.js。内容如下：

安装Prettier

使用命令pnpm add -D prettier eslint-plugin-prettier安装prettier需要的依赖，

在项目目录下新建文件.prettierrc，并添加配置内容（可根据需要自行进行修改）：


{
    "printWidth": 100, 
    "tabWidth": 4, 
    "useTabs": false, 
    "semi": false,
    "singleQuote": true, 
    "jsxSingleQuote": true, 
    "trailingComma": "none",
    "arrowParens": "avoid", 
    "bracketSpacing": true,
    "bracketSameLine": false, 
    "htmlWhitespaceSensitivity": "ignore", 
    "vueIndentScriptAndStyle": false, 
    "endOfLine": "auto", 
    "singleAttributePerLine": false 
}

配置属性说明：

printWidth: 每行最多显示的字符数
tabWidth: tab的宽度 4个字符
useTabs: 使用tab代替空格
semi: 结尾使用分号
singleQuote: 使用单引号代替双引号
jsxSingleQuote: jsx中使用单引号
trailingComma: 结尾是否添加逗号
arrowParens: 剪头函数只有一个参数的时候可以忽略括号
bracketSpacing: 对象括号俩边是否用空格隔开
bracketSameLine: 组件最后的尖括号不另起一行
htmlWhitespaceSensitivity: html存在空格是不敏感的
vueIndentScriptAndStyle: vue 的script和style的内容是否缩进
endOfLine: 行结尾形式 mac和linux是\n windows是\r\n
singleAttributePerLine: 组件或者标签的属性是否控制一行只显示一个属性

更多配置规则参考官方文档：https://prettier.io/docs/en/options

然后修改eslint.config.js文件，添加prettier配置即可：