Add TypeScript config files to repo tsconfig/bases

[artshade]

Dear Developers and Community,

Thank you very much for the project!

Just to clarify, knowing it being mentioned at the official TypeScript documentation, have you considered adding the TypeScript configuration files to the fairly official repository "Centralized Recommendations for TSConfig bases" - tsconfig/bases?

There is one for Nuxt and Vite (for React) it seems.

There are a few tsconfig bases already, and we’re hoping the community can add more for different environments.
Source

Best and kind regards ✨

[messenjer]

There is also a PR for vite-vue tsconfig/bases#246

There is 2 ways to create a vue SPA:

• with vite : npm create vite@latest my-vue-app -- --template vue
• with create-vue : npm create vue@latest

The 2 tsconfig are different, what is the recommendation ?

[artshade]

There is 2 ways to create a vue SPA:

• with vite : npm create vite@latest my-vue-app -- --template vue
• with create-vue : npm create vue@latest

The 2 tsconfig are different
Source

Cheers! Indeed, those differ, but it must be due to the options available, and the second options (create vue@latest or create-vue since npm appends create- automatically) is the recommended in the most cases I do believe, and create-vite package seems to be not mentioned at the Vue official documentation pages.

For new projects, it is now recommended to use create-vue to scaffold Vite-based projects.
Source

$ npm create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool.
Source

create-vue, the official project scaffolding tool, offers the options to scaffold a Vite-powered, TypeScript-ready Vue project.
Source

In contrast, Vite scaffolding solution seems to be more Vite-oriented rather than Vue specifically to also present the less-opinionated defaults between featured directions, universality, or agnostic trait:

Scaffolding Your First Vite Project

...
You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run:

npm create vite@latest my-vue-app -- --template vue

---

[1/2] create vite@latest

Just in case, if the first option mentioned (i.e. create vite@latest) is for TypeScript, it's probably vue-ts template, that is create-vite/template-vue-ts/tsconfig.json of package create-vite. It also has a TSConfig reference inside for additional config-file "./tsconfig.node.json".

This scaffolding options seems to be copying the required files without additional complex processing if compared to the second option.

[2/2] create vue@latest

- In the second scaffolding option (i.e. create vue@latest), the final tsconfig.json is created programmatically with more conditions and options, where the final tsconfig.json gets "rendered" selectively per feature:

if (needsTypeScript) {
  render('config/typescript')

  // Render tsconfigs
  render('tsconfig/base')

  // The content of the root `tsconfig.json` is a bit complicated,
  // So here we are programmatically generating it.
  const rootTsConfig = {
    // It doesn't target any specific files because they are all configured in the referenced ones.
    files: [],

    // All templates contain at least a `.node` and a `.app` tsconfig.
    references: [
      {
        path: './tsconfig.node.json'
      },
      {
        path: './tsconfig.app.json'
      }
    ]
  }
  if (needsCypress) {
    render('tsconfig/cypress') // ...
  if (needsCypressCT) {
    render('tsconfig/cypress-ct') // ...
  if (needsPlaywright) {
    render('tsconfig/playwright')  // ...
  if (needsVitest) {
    render('tsconfig/vitest') // ...

Source

[artshade]

Apologies for the issue "re-open" - by mistake I pressed "Close with comment" instead of "Comment"...

...for a reason I, for a moment, felt and concluded the latter is for "Close", and the left-most button to "Submit", as in different UX designs I've been working on relatively recently. Please don't forget to sleep..., too! 💫

[messenjer]

The two are different, but they face the same problem, how to type-check a DOM application and a NODE ones.

• feat(create-vite): use "solution" tsconfig so that vite.config.ts is type checked vitejs/vite#15913
• type-check reports errors twice create-vue#437