Vue3 vscode eslint+prettier 自动格式化

弄个基础Vue3仓库配置，方便日后开发

环境

node 16.15.0 npm 8.5.5

1. vscode 安装插件 Prettier Eslinit
2. vue packjson.json

    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "commitizen": "^4.2.2",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "husky": "^4.3.0",
    "prettier": "^1.19.1",
    "typescript": "~3.9.3",

3. packjson.json 同目录下 tsconfig.json

• 表明该目录是 TypeScript 项目的根目录。 tsconfig.json 指定了编目所需的根文件和编译器选项。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },  
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

4. 根目录创建prettier配置 .prettierrc

{
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "auto",
  "singleQuote": false,
  "semi": false,
  "trailingComma": "none",
  "bracketSpacing": true
}

5. 根目录创建eslintrc配置 .eslintrc.js

{
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint"
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  plugins: [
    // 用到的插件
    "@typescript-eslint",
    "prettier"
  ],
  globals: {
    PublicKeyCredential: true
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier": "error", // prettier标记的地方抛出错误信息
    "spaced-comment": [2, "always"], // 注释后面必须写两个空格
    "@typescript-eslint/no-explicit-any": ["off"] // 关闭any校验
  }
};

}

6. src目录下 创建shims-vue.d.ts 识别.vue文件

// 声明vue文件的导出类型
declare module "*.vue" {
  import { defineComponent } from "vue"
  const component: ReturnType<typeof defineComponent>
  export default component
}

// 声明全局属性类型
declare module "@vue/runtime-core" {
  interface ComponentCustomProperties<T> {
    $api: T
  }
}

仓库地址github.com/1959555480/…

• 参考链接 copyfuture.com/blogs-detai…

segmentfault.com/a/119000001…

github.com/likaia/chat…