Skip to content

@LottieFiles LottieFiles

tsconfig 2.0.0

Install from the command line:
Learn more about npm packages
$ npm install @lottiefiles/tsconfig@2.0.0
Install via package.json:
"@lottiefiles/tsconfig": "2.0.0"

About this version

Typescript Config

Base tsconfig.json for using Typescript in the various projects at LottieFiles.

Table of contents

Installation

1. Install config and Typescript.

Install Typescript and the shared config by running:

# Normal repository? Install in the project root.
pnpm add -D typescript @lottiefiles/tsconfig

# Monorepo? Install Prettier in the project root workspace.
pnpm add -DW typescript @lottiefiles/tsconfig

2. Create configuration file

Create a tsconfig.json file in your project root with the contents below:

{
  "extends": "@lottiefiles/tsconfig",

  "compilerOptions": {
    // Compiled output JS and source maps output directory
    "outDir": "./dist",

    // Source root directory
    "rootDir": "./src",
  }
}

Usage

Monorepo Recommendation

tsconfig.build.json

Create a tsconfig.build.json in the project root that extends from @lottiefiles/tsconfig. This file will be used for build processes.

{
  // Extend from the org config
  "extends": "@lottiefiles/tsconfig",

  "compilerOptions": {
    // Use composite mode to enable building using projects and project references
    "composite": true,

    // Allow emit (required for composite mode)
    "noEmit": false
  },

  "exclude": [
    // Exclude tests and snapshots
    "**/test",
    "**/*.test.ts",
    "**/__mocks__",
    "**/__tests__",
    "**/__snapshots__",
    "**/coverage",

    // Exclude builds
    "**/dist",
    "**/dist-dev",
    "**/artifacts"
  ]
}
tsconfig.dev.json

Create a tsconfig.dev.json in the project root that extends from @lottiefiles/tsconfig. This file will be used for linting processes.

{
  // Extend from the org config
  "extends": "@lottiefiles/tsconfig",

  "compilerOptions": {
    // Allow non-module Typescript files (e.g. scripts)
    "isolatedModules": false
  },

  "exclude": [
    // Exclude non-code test resources
    "**/__snapshots__",
    "**/coverage",

    // Exclude builds
    "**/dist",
    "**/dist-dev",
    "**/artifacts"
  ],

  // Include all Javascript, Typescript, JSX, CommonJS and Module files
  "include": ["**/*.js", "**/*.jsx", "**/*.json", "**/*.ts", "**/*.tsx", "**/*.mjs", "**/*.cjs", "**/.*.cjs"]
}
tsconfig.json

Create a tsconfig.json in the root that extends from the tsconfig.build.json file and add any development/IDE relevant customization necessary for Typescript typechecking.

{
  // Must be set to empty [] array
  "files": [],

  "compilerOptions": {
    "disableSourceOfProjectReferenceRedirect": true
  },

  "references": [{ "path": "../path-to-package1" }, { "path": "../path-to-package2" }]
}
  1. For every package in the workspace, create a tsconfig.json file that extends from the root tsconfig.build.json file (and depending on use case, a tsconfig.dev.json that extends from the root tsconfig.dev.json file).
{
  // Extend from the build config
  "extends": "../../tsconfig.build.json",

  // Compiler options
  "compilerOptions": {
    // Compiled output JS and source maps output directory
    "outDir": "./dist",

    // Source root directory
    "rootDir": "./src"
  },

  "include": ["./src", "./types"],

  // Setup project references
  "references": [{ "path": "../path-to-package2" }]
}

Use references path list to allow Typescript to pickup other packages in the workspace and typing information to be extracted.

Changelog

See CHANGELOG.md for the latest changes.

Details

Assets

  • tsconfig-2.0.0-npm.tgz

Download activity

  • Total downloads 30,319
  • Last 30 days 1,251
  • Last week 243
  • Today 39

Recent versions

View all