Style 🛼

Roll in style.

Highly opinionated configuration files for typescript projects. Inspired by @vercel/style-guide

Warning

Make sure to first commit your code before running the following commands. To allow you to easily revert the changes.

Usage

npm i -D @timobechtel/style prettier "eslint@^9" typescript

Prettier

curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/.prettierrc

Extend / customize config

Need to extend the config, e.g. adding plugins?

curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/.prettierrc.mjs

Create a .prettierrc.mjs file and import the config, like this:

import config from '@timobechtel/style/prettier/index.mjs';

/**
 * @type {import("prettier").Config}
 */
export default {
  ...config,
  // your config
}

Typescript

Existing tsconfig

For existing projects or templates, I recomment leaving the config as-is and adding this preset to the extends array.

{
  "extends": ["@timobechtel/style/tsconfig/core"]
}

New tsconfig

curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/tsconfig/core/tsconfig.json

Expo

With expo make sure to add "moduleResolution": "bundler" to the compilerOptions, otherwise certain routing types might break.

Example

Copy to tsconfig.json:

{
  "extends": ["expo/tsconfig.base", "@timobechtel/style/tsconfig/core"],
  "compilerOptions": {
    "moduleResolution": "bundler", // <-- this is important
    "strict": true,
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts"
  ]
}

Or with React

curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/tsconfig/react/tsconfig.json

Or manually

Copy to tsconfig.json:

{ 
  "extends": "@timobechtel/style/tsconfig/react"
}

Eslint

curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/core/eslint.config.js

Note: If your project is not ESM (no "type": "module" in package.json), rename the file to eslint.config.mjs.

Or manually

Copy the following to an eslint.config.js:

import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } from 'eslint/config';
import styleCore from '@timobechtel/style/eslint/core.js';
import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript';
import { createNodeResolver } from 'eslint-plugin-import-x';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineConfig([
  ...styleCore,
  {
    languageOptions: {
      parserOptions: {
        tsconfigRootDir: __dirname,
      },
    },
    settings: {
      'import-x/resolver-next': [
        createTypeScriptImportResolver({
          project: path.resolve(__dirname, 'tsconfig.json'),
        }),
        createNodeResolver(),
      ],
    },
  },
]);

React

curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/react/eslint.config.js

Or manually

Also spread styleReact from @timobechtel/style/eslint/react.js:

import styleCore from '@timobechtel/style/eslint/core.js';
import styleReact from '@timobechtel/style/eslint/react.js';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  ...styleCore,
  ...styleReact,
  // ... your config
]);

Example config: https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/react/eslint.config.js

Migration from v1.x

If you're upgrading from v1.x, you'll need to:

1. Upgrade to ESLint v9+
2. Replace .eslintrc.cjs with eslint.config.js
3. Update imports to use .js extension (e.g., @timobechtel/style/eslint/core.js)
4. Note: Import plugin rules now use import-x/ prefix instead of import/

VSCode

Note: You should disable source.organizeImports in your VSCode config, as this collides with the import-x/order rule.

Add the following to your VSCode config, e.g. .vscode/settings.json

{
  "editor.codeActionsOnSave": {
    // use eslint import-x/order instead
    "source.sortImports": "never"
  }
}

semantic-release

This repo also contains a semantic-release configuration.

npm i -D semantic-release @semantic-release/changelog @semantic-release/git

echo '{ "extends": "@timobechtel/style/semantic-release/index.cjs" }' > .releaserc.json