如何使用 ESlint + prettier 建立规范的vue3.0项目

如何使用 ESlint + prettier 建立规范的vue3.0项目

前言 一个完整的项目必然是多人合作的开发项目，为了提升代码的质量，统一代码风格成了每个优秀的项目的必然选择，本期用现在最流行的ESlint + prettier在VUE3.0的环境下建立一个自动格式化符合eslint标准规范的项目。

1 如何配置文件
1 新建VUE3.0的项目 使用配置如下图 不一定要完全依照下面配置
但是请选择 eslint+prettier 和 In dedicated config fils (进行外部文件配置eslint 不写在json 里面)






请安装 prettier 和eslint插件
如果为idea系列 请使用 应用商店安装


修改文件 配置文件


复制或者修改文件


Vscode的settting.json文件配置


可以自行配置 但在保存的时候自动格式化代码的功能
配置完毕 保证其文件eslint+prettier+setting.json与我提供的压缩包一致

2 eslint代码备注

检测代码中 删除了2套规则
1 在每句话后面添加分号
2 检测单双引号

在vue中一旦使用外部框架库 如 cube-ul 或者Mint UI 库类似的开源框架库
其中的引号有单引号也有双引号 会照成eslint 检测错误 每句话后面的框架自动引入也是不带分号的
删除eslint 默认带的这2个规则是为了能够更好的使用引入的插件库。

3 使用效果

Ctrl+ s保存后

每次代码完成保存后
prettier会按照eslint的规则去自动格式化代码 保证格式正确 自动修改常见的问题

文件附在压缩包内仅供参考

可能出现的问题

1 无法保存后格式化
解决办法 查看vscode 格式化代码快捷键是否生效 若不生效 则是因为其它的插件和设置引起的冲突 建议重装vscode 或者自行解决
2 无法自动适配eslint规则
解决办法 介意全部关闭vscode后重启