Vscode配置ESlint + Prettier, 实现自动化格式Typescript项目

Vue3项目中，prettier是很好的格式化插件，但是经常有空格换行的报错，让人非常头疼，如果可以自动补全这些符号和空格就好了，照网上的文章和视频操作，但是遇到一些问题，做了些改动，所以记录下。

参考视频（感谢作者）：https://www.bilibili.com/video/BV1354y1q7gH?share_source=copy_web

1. VScode搜索并安装两个插件: ESlint 和 Prettier
安装完成之后，按下ctrl+shit+p，输入setting.json，选择首选项：打开设置（json）回车 在设置中插入如下配置

// eslint配置项，保存时自动修复
  "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
   },
   "eslint.validate": [
       "vue",
       "html"
   ],
   // 默认使用prettier格式化支持的文件
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   // 自动设定eslint工作区
   "eslint.workingDirectories": [
       { "mode": "auto" }
   ],

2、为你的项目安装以下插件
安装时需要注意eslint的版本号，不然会出现一些诡异的报错

npm install eslint@7.28.0 @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --save-dev

3、新建eslint配置文件
在项目根目录下新建.eslintrc.js文件 写入如下内容

module.exports = {
  parser: "vue-eslint-parser", // 指定ESLint解析器
  parserOptions: {
    sourceType: "module", // 允许使用导入
    parser: "@typescript-eslint/parser",
  },
  extends: [
    "plugin:@typescript-eslint/recommended", // 使用@ typescript-eslint / eslint-plugin中的推荐规则
    // "prettier/@typescript-eslint", // 使用eslint-config-prettier禁用一些与Prettier冲突的ESLint规则
    "prettier", // 使用eslint-config-prettier禁用一些与Prettier冲突的ESLint规则
    "plugin:prettier/recommended", // 启用eslint-plugin-prettier和eslint-config-prettier，使编辑器显示错误提示，确保这项是扩展数组中的最后一个配置
  ],
  rules: {
    // 放置ESLint规则的位置。可用于覆盖从扩展配置中指定的规则
    // 例如 "@typescript-eslint/explicit-function-return-type": "off",
  },
};

注意extends中 “prettier/@typescript-eslint” 要换成 “prettier”
4、配置Prettier
这步是可选的，在项目根目录下新建.prettierrc修改它的配置，下面列举一些常用设置，全部为默认选项，请按需修改

{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": false,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "arrowParens": "always",
    "htmlWhitespaceSensitivity": "css",
    "endOfLine": "auto"
}

最后启动项目。