前端-配置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 此时基本已经可以看到效果了，如果没有效果可以重启VScode。