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@^8.57.1" 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/.eslintrc.cjs

Fix Parsing errors for config files

You may get a Parsing error: <FILE> was not found by the project service. for config files like .eslintrc.cjs when not included in the tsconfig.

To fix, either add to tsconfig or add them to the eslint config:

  //...
  parserOptions: {
+    projectService: {
+      allowDefaultProject: ['.eslintrc.cjs'],
+    },
    //...
  },
  //...

Or manually

Copy the following to a .eslintrc.cjs:

const { resolve } = require('node:path');

const project = resolve(process.cwd(), 'tsconfig.json');

module.exports = {
  root: true,
  extends: [require.resolve('@timobechtel/style/eslint/core.cjs')],
  parserOptions: {
    tsconfigRootDir: process.cwd(),
  },
  settings: {
    'import/resolver': {
      typescript: {
        project,
      },
    },
  },
};

React

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

Or manually

Also add require.resolve('@timobechtel/style/eslint/react.cjs') to the extends array.

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

VSCode

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

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

{
  "editor.codeActionsOnSave": {
    // use eslint import/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