VsCode eslint与prettier配置冲突

src文件夹拿培嫌中新建文件.prettierrc

配消手置如下，可以中败根据其他冲突项自行配置

{

"singleQuote": true,

"semi": false,

"trailingComma": "none",

"prettier.eslintIntegration": true

}

原因是 prettier 设置了函数与括号之间有空格芦毁，而 eslint 校碧袭验时是不允许有；悔哗兄

设置 Vetur

Vetur › Format › Default Formatter: JS

选择：prettier-eslint

1、vite-plugin-vue-setup-extend

解决vue3下 script setup语法糖 下 ，手动设置组件name不方便的问题

npm i vite-plugin-vue-setup-extend -D

在文件vite.config.ts中

importsetupExtendfrom'vite-plugin-vue-setup-extend'exportdefaultdefineConfig({plugins:[...setupExtend()],})

2、unplugin-auto-import

实现vue函数的姿陵自动导入,这样如ref, computed，watch等就不用手动导入了

npm i unplugin-auto-import-D

在文件vite.config.ts中

importAutoImportfrom'unplugin-auto-import/vite'exportdefaultdefineConfig({plugins:[...AutoImport({imports:['vue','vue-router',{vuex:['useStore']}],resolvers:[],dts:false}),],})

当前无效与eslint冲突，如果直接使用依然会报错

这里采用了全局eslint还需安装 npm i eslint-plugin-auto-import  -D

顾最终配置如下

在vite.config.ts文件中

exportdefault({mode})=>{returndefineConfig({plugins:[AutoImport({include:[/\.[tj]sx?$/,// .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/,// .vue/\.md$/迹余戚// .md],imports:['vue','vue-router',{vuex:['useStore']}],resolvers:[ElementPlusResolver()],dts:'./auto-imports.d.ts',// eslint报错解决eslintrc:{// 此处为true运行后会生成.eslintrc-auto-import.json  auto-imports.d.ts文件enabled:true,// 此处第一次运行使用true,之后改为falsefilepath:'./.eslintrc-auto-import.json',// Default `./.eslintrc-auto-import.json`globalsPropValue:true// Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')}}),Components({resolvers:[ElementPlusResolver()]}),],})}

在.eslintrc.js文件中

extends:[...'./毁卜.eslintrc-auto-import.json'],

在tsconfig.json文件中

compilerOptions: [    ...    "types": ["element-plus/global"]  ],"include": [..., "auto-imports.d.ts"],

3、unplugin-vue-components

实现vue组件库的自动按需导入,这样就不用手动导入了

npm i unplugin-vue-components -D

在文件vite.config.ts中

importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusResolver}from'unplugin-vue-components/resolvers'exportdefaultdefineConfig({plugins:[vue(),AutoImport({imports:['vue','vue-router',{vuex:['useStore']}],resolvers:[ElementPlusResolver()],dts:false}),Components({resolvers:[ElementPlusResolver()]}),]})

4、vite-plugin-compression

静态资源压缩

npm i vite-plugin-compression -D

在文件vite.config.ts中

// 静态资源压缩importviteCompressionfrom'vite-plugin-compression'exportdefaultdefineConfig({plugins:[...viteCompression({verbose:true,disable:false,// 不禁用压缩deleteOriginFile:false,// 压缩后是否删除原文件threshold:10240,// 压缩前最小文件大小algorithm:'gzip',// 压缩算法ext:'.gz'// 文件类型})],})

5、rollup-plugin-visualizer

打包分析,可视化并分析构建包，查看哪些模块占用空间大小，以及模块的依赖关系

npm i rollup-plugin-visualizer -D

在文件vite.config.ts中

importvisualizerfrom'rollup-plugin-visualizer'exportdefaultdefineConfig({plugins:[...visualizer({// 打包后自动打开分析报告open:true})],})

链接：https://www.jianshu.com/p/d45ae4b5c11a

---