eslint9+vite+vue3+prettier配置

今年更新eslint9之后，新建项目不再像之前那样的配置方式了，被整吐血的作者在尝试3小时之后，终于整合了eslint9+vite+vue3+prettier，完美运行，有问题可以评论，一起进步

安装插件

复制 1yarn add @eslint/js eslint eslint-plugin-prettier eslint-plugin-vue globals prettier vite-plugin-eslint -D

package.json截图

新建.prettierignore,内容如下

复制 1dist
 2*.md
 3*.html
 4yarn.lock

新建.prettierrc,内容如下

复制 1{
 2  "semi": false,
 3  "singleQuote": true,
 4  "arrowParens": "avoid",
 5  "useTabs": true,
 6  "tabWidth": 2,
 7  "printWidth": 100,
 8  "bracketSpacing": true,
 9  "trailingComma": "none",
10  "endOfLine": "auto"
11}

新建eslint.config.js,内容如下

复制 1import globals from 'globals'
 2import pluginJs from '@eslint/js'
 3import pluginVue from 'eslint-plugin-vue'
 4import prettier from 'eslint-plugin-prettier'
 5
 6export default [
 7    {
 8        files: ['**/*.{js,mjs,cjs,vue}'],
 9        languageOptions: { globals: globals.browser }
10    },
11    pluginJs.configs.recommended,
12    ...pluginVue.configs['flat/essential'],
13    {
14        plugins: {
15            prettier: prettier
16        },
17        rules: {
18            'prettier/prettier': 'error',
19            'no-console': 'off',
20            'no-restricted-globals': 'off',
21            'no-restricted-syntax': 'off',
22            'vue/multi-word-component-names': 'off',
23            'no-multiple-empty-lines': ['warn', { max: 1 }],
24            'vue/valid-template-root': 'off'
25        }
26    }
27]

vite.config.js中的配置

复制 1import { defineConfig } from 'vite'
 2import vue from '@vitejs/plugin-vue'
 3import eslintPlugin from 'vite-plugin-eslint'
 4
 5
 6export default defineConfig({
 7    plugins: [
 8        vue(),
 9        eslintPlugin({
10            include: ['src/**/*.js', 'src/**/*.vue'],
11            cache: true
12        })
13    ]
14})

最后再配置package.json

复制 1...
 2"scripts": {
 3    "lint": "eslint --ignore-pattern .gitignore --fix src",
 4    "format": "prettier .  --write",
 5},
 6...

好了，开始你的eslint9之路吧