Typescript Standards

Main repository for VTEX's Typescript standards. Issues should be used to start discussions about standards and patterns. PRs are welcome after being rightfully discussed.

Content

docs/

• Style Guide - VTEX Javascript/Typescript style guide
• Getting Started - Getting starting guide to configure and automate our tooling process
• Browser Support - VTEX browser support documentation

packages/

• eslint-config-vtex - base eslint rule preset
• eslint-config-vtex-react - eslint rule preset for react projects
• eslint-plugin-vtex - eslint plugin with VTEX custom rules
• prettier-config - prettier preset of all front-end projects
• tsconfig - base tsconfig for all typescript projects

Add these packages to a new project

Bootstrap on a new node and typescript project

If you're not using Bash, change /bin/bash to your shell's executable path.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/vtex/typescript/master/scripts/bootstrap-typescript.sh)"

Warning: This will override the following configuration files: .prettierrc, .eslintrc and tsconfig.json.

Contributing

Nothing is written in stone, so if there's some kind of rule or pattern that you wish to discuss or implement, we encourage an open discussion via this repository issues. The project use labels to keep everything organized and easy-to-find:

• discussion - discussion thread;
• style - related to code style, something that there's no wrong or right;
• practices/patterns - related to good coding practices that should be standardized and documented;
• documentation - a generic documentation issue;
• todo - common TODO item, with no explicit SLA.

Feel free to use more than one label in an issue, but try keeping them semantic to help developers.

Working with the packages

This project uses lerna with yarn workspaces, so it's highly recommended to read at least the Lerna documentation.

Bootstrap the repository

Running yarn will automatically install all the dependencies for all packages and link them together when needed.

yarn

Executing commands

To run a package.json script on all packages, you can use:

lerna run {scriptName}
# will run the scriptName script on all package directories

If you want to only run on some packages, pass a --scope=package-name to the command above. For more instructions, see the lerna run documentation.

lerna run --scope="eslint-*" test
# run the test script on all packages that match the pattern above

The same can be done for regular shell programs with the lerna exec command:

lerna exec "pwd"
# will print the pwd of all package directories

Note: The quotes are not needed if your command doesn't have a string with spaces.

Releasing new versions

For every release, there should be at least one new changelog entry for every modified package. This repository follows the keep a changelog format. The chan CLI can be used to help adding changelog entries:

chan fixed "Fix that nasty potato bug"

It's also possible to run the command on multiple packages with the lerna exec command:

lerna exec "chan fixed 'Fix that nasty potato bug'"
# note the quotes

Every package has a version script that will automatically update their changelog with the new version and entries whenever lerna publish or lerna version is used.

Relevant commands:

• lerna version - Only update versions without publishing the packages.
• lerna publish - Update the version and publish the packages.