Style 🛼

Roll in style.

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

Usage

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

Prettier

echo '"@timobechtel/style/prettier/index.mjs"' > .prettierrc

Extend / customize config

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

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

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

export default {
  ...config,
  // your config
}

Typescript

echo '{ "extends": "@timobechtel/style/tsconfig/core" }' > tsconfig.json

Or with React

echo '{ "extends": "@timobechtel/style/tsconfig/react" }' > tsconfig.json

Eslint

echo '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:{project},settings:{"import/resolver":{typescript:{project}}}};' > .eslintrc.cjs

Or copy the following to a .eslintrc.cjs manually:

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: {
    project,
  },
  settings: {
    'import/resolver': {
      typescript: {
        project,
      },
    },
  },
};

React

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

Example config:

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

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

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

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