vite中typescript+eslint+prettier一份官方预设配置

依赖

{
  "scripts": {
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.2",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.46.0",
    "eslint-plugin-vue": "^9.16.1",
    "npm-run-all": "^4.1.5",
    "typescript": "~5.1.6",
  }
}

其中npm-run-all主要用于同时运行多个命令的依赖。

一般情况下我们不需要安装依赖prettier，因为vscode有对应的插件，我们只需要配置.prettierrc.json文件即可。

如果你需要手动通过命令格式化整个项目文件，那么你需要单独安装prettier作为依赖项。

{
  "scripts": {
    "format": "prettier --write src/"
  },
  "devDependencies": {
    "prettier": "^3.0.0",
  }
}

运行format就可以实现格式化文件了。

eslint配置

.eslintrc.cjs

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

这个配置添加了@vue/eslint-config-prettier/skip-formatting，表示在eslint检查过程中跳过prettier的格式化规则，防止格式化冲突。

该规则会告诉 ESLint 忽略与 Prettier 格式化规则有冲突的部分。这样，ESLint 仍然会执行其他规则的检查，但不会引发与 Prettier 格式化规则冲突的问题。

使用 @vue/eslint-config-prettier/skip-formatting 规则可以提高 ESLint 和 Prettier 的兼容性，使它们更好地协同工作，同时减少不必要的冲突和干扰。

tsconfig

这里比较有意思的一点是官方将配置文件进行了拆分，它会分为node端配置文件，这个文件主要处理在构建环境的typescript配置，除了node还有app端的配置，主要负责编译Vue应用程序所需要的配置。

然后两个配置文件最终通过tsconfig.json的references选项引入。

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.node.json

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

路径别名配置

可以看到官方还预设了路径别名，这里把对应的路径别名配置也贴出来：

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})