@tokens-studio/configs

Configs

This repository contains the default Tokens Studio configs for developing in TypeScript, whether that's Node or Browser:

• ESLint config for v9 -> @tokens-studio/configs/eslint
• Prettier config for v3 -> @tokens-studio/configs/prettier
• TypeScript config for v5 -> @tokens-studio/configs/typescript

Important: ESLint v9 has quite a lot of breaking changes because it's using the "flat config", see migration guidelines.

You may get a warning for ESLint's React auto detect version setting, because React may not be installed. Since the React specific rules are only relevant when you are using this in a React project, don't worry about the warning if you're not.

ESLint extend

We use ESLint v9 Flat config, which is the modern way to use, extend and share ESLint.

We are currently stuck with CJS config because of react and react-hooks plugins being CJS-only.

const studioConfig = require('@tokens-studio/configs/eslint');

module.exports = [
	...studioConfig,
	{
		rules: {
			// overrides here
		},
	},
];

Prettier extend

There is almost no valid reason for extending our Prettier settings. Please discuss changing our settings with the rest of the team first.

If you absolutely must for some reason, make sure to provide a comment as to why:

import sharedConfig from '@tokens-studio/configs/prettier';

export default {
	...sharedConfig,
	// absolutely needed in this project because the JS parser does not support semicolons
	semi: false,
};

Read more about Prettier's philosophy, in a nutshell its goal is to avoid pointless discussions about subjective taste about code formatting, which is why it's best to "just pick something" and go auto-pilot from there.

The reason we override the useTabs and singleQuotes is because it has objective benefits with regards to working with HTML attributes (uses double quotes) inside JS files (templating) and tabs has major a11y benefits and allows developers to standardize the tabs yet have their editors change the tab display width to their preference.

TSConfig extend

{
	"$schema": "https://json.schemastore.org/tsconfig",
	"extends": "@tokens-studio/configs/typescript"
}

Peer Dependencies

These configs rely on various dependencies e.g. the ESLint config contains plugins / rules configurations that rely on dependencies. They have been configured as peerDependencies, latest NPM should install those by default if missing, but allow to easily use compatible local installations if you have those.

It is recommended to explicitly add eslint, prettier and typescript as devDependencies if you use their binaries in your package, this is less "magic" than relying on the fact that NPM happens to install peerDependencies when they are missing.

Changelog

0.2.4

Patch Changes

• 6f8731e: Add override for CSS print width, given the CSS variable names, it makes sense to allow more columns to keep things readable and not overdo the line wrapping.