Package Exports

cra-template-typescript-extended

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cra-template-typescript-extended) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

cra-template-typescript-extended

This is a modified version of create-react-app's TypeScript template. Adds helpful development tools like Sass, ESLint, Prettier, and commitlint as well as some personal linting rule changes.

Creating a New Project

To use this template, add --template typescript-extended when creating a new app via create-react-app.

NPM

npx create-react-app my-app --template typescript-extended --use-npm

Yarn

yarn create-react-app my-app --template typescript-extended

Setting Up Git Hooks

You will need to manually add your husky hooks settings to package.json as seen below if you want to lint before each commit.

"husky": {
  "hooks": {
    "pre-commit": "lint-staged && tsc --noEmit && npm run test",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
},

Why am I doing this manually?

Because of the limiting nature of a non-ejected create-react-app project you are forced to have a Git repo initialized for you. This interacts poorly with pre-existing husky and lint-staged configs, and will hang the create-react-app process when creating a new project. There is unfortunately no great way I have found to automatically get around this issue without being hacky.

Tools Added to the TypeScript Template

Sass - A CSS preprocessor that acts as a superset of CSS.
Prettier - Automatically format project files (html, css, scss, sass, js, jsx, ts, tsx, json, md)
ESLint - Lint TypeScript and JavaScript code
stylelint - Lint CSS and its extension languages
commitlint - Lint commits to fit the Conventional Commit standard
standard-version - Provides the npm run release command for automatic release and changelog generation
husky - Provides easy Git Hooks configuration for automatic linting, testing, and formatting before each commit
lint-staged - Extends husky's functionality to run commands on a subset of staged files

Git Hooks

Note: You must set the Git Hooks up manually. See "Setting Up Git Hooks" above.

Pre-Commit: Uses Prettier for formatting, tsc --noEmit, ESLint, and stylelint for linting, and runs tests via npm run test.
Commit-Msg: Runs commitlint on the commit message.

Template Development

To test this template locally (assuming this command is being run from inside the directory that contains this template):

NPM

npx create-react-app my-app --template file:./cra-template-typescript-extended --use-npm

Yarn

yarn create-react-app my-app --template file:./cra-template-typescript-extended