@timobechtel/style v1.13.0

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

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

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

Or manually copy to tsconfig.json:

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

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

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.organizeImports": "never"
  }
}

semantic-release

This repo also contains a semantic-release configuration.

npm i -D semantic-release

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