如何配置配置Prettier与ESLint9

安装 prettier eslint-plugin-prettier eslint-config-prettier

pnpm install prettier eslint-plugin-prettier eslint-config-prettier –save-dev

配置prettier

{
“singleQuote”: true,
“semi”: false,
“printWidth”: 80,
“trailingComma”: “none”,
“endOfLine”: “auto”
}

配置eslint

import js from ‘@eslint/js’
import globals from ‘globals’
import pluginVue from ‘eslint-plugin-vue’
import { defineConfig, globalIgnores } from ‘eslint/config’
import eslintPluginPrettier from ‘eslint-plugin-prettier’
import prettierConfig from ‘eslint-config-prettier’

export default defineConfig([
{
name: ‘app/files-to-lint’,
files: [‘**/*.{js,mjs,jsx,vue}’]
},

globalIgnores([‘**/dist/**’, ‘**/dist-ssr/**’, ‘**/coverage/**’]),

{
languageOptions: {
globals: {
…globals.browser
}
}
},

js.configs.recommended,
…pluginVue.configs[‘flat/essential’],

// 集成 Prettier 插件
{
plugins: {
prettier: eslintPluginPrettier
},
rules: {
‘prettier/prettier’: ‘warn’,
‘vue/multi-word-component-names’: [
‘warn’,
{
ignores: [‘index’] // vue组件名称多单词组成（忽略index.vue）
}
],
‘vue/no-setup-props-destructure’: [‘off’], // 关闭 props 解构的校验
// 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
‘no-undef’: ‘error’
}
},
// 集成 Prettier 配置，覆盖格式化相关规则
prettierConfig
])

在bash窗口中调用代码查看配置是否成功

npx eslint src/App.vue –fix