eslint9+vite+vue3+prettier配置

eslint9+vite+vue3+prettier配置

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

安装插件

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

package.json截图

新建.prettierignore,内容如下

dist
*.md
*.html
yarn.lock

新建.prettierrc,内容如下

{
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "useTabs": true,
  "tabWidth": 2,
  "printWidth": 100,
  "bracketSpacing": true,
  "trailingComma": "none",
  "endOfLine": "auto"
}

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

import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import prettier from 'eslint-plugin-prettier'

export default [
    {
        files: ['**/*.{js,mjs,cjs,vue}'],
        languageOptions: { globals: globals.browser }
    },
    pluginJs.configs.recommended,
    ...pluginVue.configs['flat/essential'],
    {
        plugins: {
            prettier: prettier
        },
        rules: {
            'prettier/prettier': 'error',
            'no-console': 'off',
            'no-restricted-globals': 'off',
            'no-restricted-syntax': 'off',
            'vue/multi-word-component-names': 'off',
            'no-multiple-empty-lines': ['warn', { max: 1 }],
            'vue/valid-template-root': 'off'
        }
    }
]

vite.config.js中的配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        eslintPlugin({
            include: ['src/**/*.js', 'src/**/*.vue'],
            cache: true
        })
    ]
})

最后再配置package.json

...
"scripts": {
    "lint": "eslint --ignore-pattern .gitignore --fix src",
    "format": "prettier .  --write",
},
...

好了，开始你的eslint9之路吧