526互联

vue3 create-vue 开启vite自动验证eslint

发布时间 2023-04-23 11:11:26作者: 飞哥的海

0. vue3 cli推荐新的构建工具 vite,但没有yarn run dev后并不自动检测eslint规则,需要运行yarn run eslint

1. 添加组件即可 yarn add vite-plugin-eslint --dev 

2. 在vite.config.js加入

 1 import { fileURLToPath, URL } from 'node:url'
 2 
 3 import { defineConfig } from 'vite'
 4 import vue from '@vitejs/plugin-vue'
 5 import eslint from 'vite-plugin-eslint'
 6 
 7 // https://vitejs.dev/config/
 8 export default defineConfig({
 9   plugins: [vue(), eslint()],
10   resolve: {
11     alias: {
12       '@': fileURLToPath(new URL('./src', import.meta.url))
13     }
14   },
15   server: {
16     port: 8000
17   },
18   lintOnSave: true
19 })

3. 注意 第5行,和第9行内容变化

4. 如此操作后,同webpack构建的效果一致,可在vite运行时,同步运行eslint验证