Vite 从零搭建项目

// vue() 让 vite 支持解析 vue3 的语法
// vite.config.js
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [vue()],
})

{
  "compilerOptions": {
    "rootDir": "./",
    "baseUrl": "./",
    "target": "ES2020",
    "module": "esnext",
    /* 用于选择模块解析策略，有'node'和'classic'两种类型' */
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "allowJs": true,
    /* allowJs设置的值为true或false，用来指定是否允许编译js文件，默认是false，即不编译js文件 */
    "checkJs": true,
    /* checkJs的值为true或false，用来指定是否检查和报告js文件中的错误，默认是false */
    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom"
    ],
    "include": [
      "./",
      "src/**/*",
      "src/**/*.vue"
    ],
    "exclude": [
      "node_modules"
    ]
  }
}

.prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
.prettierrc.json、.prettierrc.yml、.prettierrc.yaml 或 .prettierrc.json5

    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/compiler-sfc": "^3.2.22",
    "@vue/eslint-config-typescript": "^9.1.0",
    "typescript-eslint": "0.0.1-alpha.0",
    "eslint": "^8.2.0",
    "eslint-plugin-vue": "^8.0.3",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",

// https://eslint.org/docs/latest/rules/array-bracket-spacing
module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    'eslint:recommended',
    'plugin:prettier/recommended',
    'prettier',
  ],
  plugins: [
    '@typescript-eslint',
  ],
  'env': {
    'node': true,
  },
  rules: {
    'vue/multi-word-component-names': 'off',
    'no-var': 'error',
    'vue/no-unused-vars': 'error',
    '@typescript-eslint/consistent-type-definitions': [
      'error',
      'interface',
    ],
    '@typescript-eslint/no-unused-vars': 'error', // 使用 ts 未使用变量的规则 比如枚举类型在es中会报错
    'no-extend-native': 0,
    'no-new': 0,
    'no-useless-escape': 0,
    'no-useless-constructor': 0,
    'no-trailing-spaces': ['error', { 'skipBlankLines': true }],
    'space-infix-ops': ['error', { 'int32Hint': false }],
    'space-before-function-paren': ['error', {
      'anonymous': 'always',
      'named': 'always',
      'asyncArrow': 'always',
    }],
    'semi': ['error', 'always'],
    'comma-dangle': 0,
    'no-console': 0,
    'no-debugger': 0,
    'id-length': 0,
    'eol-last': 0,
    'indent': 'off',
    'object-curly-spacing': ['error', 'always'],
    'array-bracket-spacing': ['error', 'never'],
    'arrow-spacing': 'error',
    'no-multiple-empty-lines': 'error',
    'no-unused-vars': 'error',
    'spaced-comment': 'error',
    // 'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
    'no-unreachable': 'error',
    'keyword-spacing': 'error',
    'space-before-blocks': 'error',
    'semi-spacing': 'error',
    'comma-spacing': 'error',
    'key-spacing': 'error',
    'prefer-const': ['error', {
      'destructuring': 'any',
      'ignoreReadBeforeAssign': false,
    }],
    'no-irregular-whitespace': 2, // 不规则的空白不允许
    'vue/require-default-prop': 'off',
  },
};

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/vue3-recommended',
    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

// eslint.config.js
export default [
    {
        rules: {
            semi: "error",
            "prefer-const": "error"
        }
    }
];

// vite.config.js
// https://cn.vitejs.dev/config/shared-options.html
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, './src'),
      },
    ],
  },
});

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