Skip to main content

complete-tsconfig

npm version

Introduction​

These are shared TypeScript configuration files that are intended to be used in TypeScript projects. They are based on the @tsconfig/strictest configs for maximum safety.

Configs Offered​

Install​

Using complete-lint​

This package is part of the complete-lint meta-linting package. If you also need to install ESLint-related dependencies, then it is recommended that instead of consuming complete-tsconfig directly, you instead list complete-lint as a dependency, as that will install the configs and other goodies.

For installation instructions, see the complete-lint page.

Manually​

If you do not want to use the complete-lint meta-package, then you can install this package manually:

npm install complete-tsconfig --save-dev

(It should be a development dependency because TypeScript is not usually deployed directly.)

Note that if you use the pnpm package manager, you must use the shamefully-hoist option, since pnpm does not handle transitive dependencies by default. (Alternatively, you could manually install the dependencies.)

Usage​

First, extend from the base config. Second, you can optionally extend from either the Node.js config or the browser config. For example:

// The configuration file for TypeScript.
{
  "$schema": "https://raw.githubusercontent.com/complete-ts/complete/main/packages/complete-tsconfig/schemas/tsconfig-strict-schema.json",

  "extends": [
    // https://github.com/complete-ts/complete/blob/main/packages/complete-tsconfig/tsconfig.base.json
    "complete-tsconfig/tsconfig.base.json",

    // https://github.com/complete-ts/complete/blob/main/packages/complete-tsconfig/tsconfig.node.json
    "complete-tsconfig/tsconfig.node.json",
  ],
}

Note that the base config handily specifies an include of ["./src/**/*.ts", "./src/**/*.tsx"] and an outDir of "./dist", so you can omit those options to keep your config file small and clean.

Strict Schema​

By default, Visual Studio Code will automatically recognize TypeScript config files and apply a schema. However, this schema allows for additional properties in order to prevent throwing errors for tools/frameworks like Angular that add custom fields.

However, the problem with this is that you might accidentally misspell a property (or e.g. accidentally add a compiler option to the root object). In these cases, you will not get a red squiggly line in your editor, making for a frustrating troubleshooting experience.

In order to fix this, you should use the strict schema in all of your TypeScript configuration files like this:

{
  "$schema": "https://raw.githubusercontent.com/complete-ts/complete/main/packages/complete-tsconfig/schemas/tsconfig-strict-schema.json",

  // Other configuration goes here.
}