【web-music】Vue3.x+Vite+TypeScript Eslint+Prettier代码格式化

前言

网上的配置五花八门，大部分是因为版本号不兼容导致不成功的。所以最近自己实践完成了一套可行的配置，并且附上版本号。

一、安装依赖

pnpm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier prettier-eslint vue-eslint-parser -D

结果如下

 "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.33.0",  // ESlint插件，包含了定义好的检测TypeScript 代码
    "@typescript-eslint/parser": "^5.33.0", // ESlint解析器，解析TypeScript 代码
    "eslint": "^8.21.0",  // ESlint核心代码
    "eslint-config-prettier": "^8.5.0", // 解决与 Prettier 规则冲突问题，关掉产生冲突的 ESlint 格式相关配置
    "eslint-plugin-prettier": "^4.2.1", // 使ESlint采用 Prettier  的风格校验
    "eslint-plugin-vue": "^9.3.0", // 允许 Vue 文件使用 ESlint 检查
    "prettier": "^2.7.1", // 修复代码格式
    "prettier-eslint": "^15.0.1", // Prettier 使用 ESlin 的规则来格式化
    "vue-eslint-parser": "^9.0.3", // ESlint用来解析 Vue 文件
  }

如果未使用 TypeScript 可以忽略相关的依赖

二、安装插件

三、配置编辑器

// .vscode\settings.json
{
  "editor.formatOnSave": true, // 在保存时格式化文件。
  "css.format.enable": true, // 启用默认的 CSS 格式化程序。
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 定义一个默认格式化程序
  "[vue]": { // vue 的默认格式化程序
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": { // typescript的默认格式化程序
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": { //typescript的默认格式化程序
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": { // 保存时使用 eslint 自动修复代码
    "source.fixAll.eslint": true
  }
}

结尾

如果格式化依然未生效
可以重启VS code，并且在VS code控制台的输出 查看是否有报错

Eslint+Prettier 一起使用总是有些不优雅，要是只使用Eslint就好了。
vue2 版本只使用了Eslint+vetur 就可以达到按照自己的风格来格式化，比较简洁。

如果大佬们有更简单的配置方式，欢迎分享一下给小弟，感激不尽。