VScode中vue3 vite项目相关配置

.editorconfig

root = true

[*]
charset = utf-8
# end_of_line = lf
indent_size = 2 # 缩进
indent_style = space
insert_final_newline = true
ij_html_quote_style = double
max_line_length = 120
tab_width = 2
trim_trailing_whitespace = true

.prettierrc.json

{
    "printWidth": 100,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "vueIndentScriptAndStyle": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "bracketSpacing": true,
    "trailingComma": "es5",
    "jsxBracketSameLine": true,
    "jsxSingleQuote": false,
    "arrowParens": "always",
    "insertPragma": false,
    "requirePragma": false,
    "proseWrap": "never",
    "htmlWhitespaceSensitivity": "ignore",
    "endOfLine": "auto",
    "rangeStart": 0
}

.eslintrc.json

{
  "root": true,
  "env": {
    "es2021": true,
    "node": true,
    "browser": true
  },
  "globals": {
    "node": true
  },
  "extends": [
    //    "plugin:vue/essential",
    /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
    //    "plugin:@typescript-eslint/recommended",
    //    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    /**@see https://github.com/prettier/eslint-plugin-prettier#recommended-configuration */
    "plugin:prettier/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "ignorePatterns": ["types/env.d.ts", "node_modules/**", "**/dist/**"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/consistent-type-imports": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/no-v-html": "off",

    //    "space-before-blocks": "warn",
    //    "space-before-function-paren": "error",
    //    "space-in-parens": "warn",
    //    "no-whitespace-before-property": "off",
    /**
     * Having a semicolon helps the optimizer interpret your code correctly.
     * This avoids rare errors in optimized code.
     * @see https://twitter.com/alex_kozack/status/1364210394328408066
     */
    "semi": ["error", "always"]
    /**
     * This will make the history of changes in the hit a little cleaner
     */
    //    "comma-dangle": ["warn", "always-multiline"],
    /**
     * Just for beauty
     */
    //    "quotes": ["warn", "single"]
  }
}

配置别名@，以及IDE自动识别

• 安装依赖

# 最好与当前版本一致，这里是最新版本
pnpm add @types/node

// vite-config-ts
import * as path from 'path';
const resolve = (p: string) => {
  return path.resolve(__dirname, p);
};
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve('./src'),
    },
  },
  plugins: [
  vue()
  ],
});

• 自动识别

// tsconfig.json
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*":["./src/*"]
    }
  },