@timobechtel/style 1.14.0 → 2.1.0

package/README.md

@@ -2,66 +2,127 @@
 
 > Roll in style.
 
-Highly opinionated configuration files for typescript projects. Inspired by [@vercel/style-guide](https://github.com/vercel/style-guide)
+Highly opinionated configuration files for typescript projects.
 
-> [!WARNING]  
-> Make sure to first commit your code before running the following commands. To allow you to easily revert the changes.
+> [!TIP]
+> Let your agent set this up for you:
+>
+> ```
+> Read https://raw.githubusercontent.com/TimoBechtel/style/main/skills/setup-style/SKILL.md and configure.
+> ```
 
 ## Usage
 
+> Make sure to first commit your code before running the following commands. This allows you to revert changes easily.
+
 ```bash
-npm i -D @timobechtel/style prettier "eslint@^8.57.1" typescript
+npm i -D @timobechtel/style typescript
 ```
 
-### Prettier
+Install gh-get to make it easier to download the template files:
+
+```bash
+gh extension install timobechtel/gh-get
+```
+
+### [Oxfmt](https://oxc.rs/docs/guide/usage/formatter.html)
+
+> Code formatter, replaces Prettier.
 
 ```bash
-curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/.prettierrc
+npm i -D oxfmt
 ```
 
+```bash
+gh get timobechtel/style templates/.oxfmtrc.json
+```
+
+- [oxfmt template](https://github.com/TimoBechtel/style/blob/main/templates/.oxfmtrc.json)
+
+### [Oxlint](https://oxc.rs/docs/guide/usage/linter.html)
+
+> Faster ESLint alternative. 5x faster in personal testing.
+
+```bash
+npm i -D oxlint
+```
+
+Core:
+
+```bash
+gh get timobechtel/style templates/.oxlintrc.jsonc
+```
+
+- [oxlint core template](https://github.com/TimoBechtel/style/blob/main/templates/.oxlintrc.jsonc)
+
+React:
+
+```bash
+gh get timobechtel/style templates/react/.oxlintrc.jsonc
+```
+
+- [oxlint react template](https://github.com/TimoBechtel/style/blob/main/templates/react/.oxlintrc.jsonc)
+
 <details>
-  <summary>Extend / customize config</summary>
+  <summary>Migrating to Oxlint? - `File '@timobechtel/style/tsconfig/core' not found.`</summary>
 
-  Need to extend the config, e.g. adding plugins?
+  When migrating from ESLint to Oxlint, you might need to update the `tsconfig.json` file:
 
-  ```bash
-  curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/.prettierrc.mjs
+  ```diff
+  - "extends": ["@timobechtel/style/tsconfig/core"]
+  + "extends": ["@timobechtel/style/tsconfig/core.json"]
   ```
 
-  Create a .prettierrc.mjs file and import the config, like this:
-  
-  ```js
-  import config from '@timobechtel/style/prettier/index.mjs';
-
-  /**
-   * @type {import("prettier").Config}
-   */
-  export default {
-    ...config,
-    // your config
-  }
+  ```diff
+  - "extends": ["@timobechtel/style/tsconfig/react"]
+  + "extends": ["@timobechtel/style/tsconfig/react.json"]
   ```
-  
+
+  > tsgolint requires a file extension to resolve the config file.
+
 </details>
 
 ### Typescript
 
+> Pre-configured tsconfig files.
+
 #### Existing tsconfig
 
 For existing projects or templates, I recomment leaving the config as-is and adding this preset to the extends array.
 
 ```json
 {
-  "extends": ["@timobechtel/style/tsconfig/core"]
+  "extends": ["@timobechtel/style/tsconfig/core.json"]
 }
 ```
 
 #### New tsconfig
 
 ```bash
-curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/tsconfig/core/tsconfig.json
+gh get timobechtel/style templates/tsconfig.json
+```
+
+- [tsconfig core template](https://github.com/TimoBechtel/style/blob/main/templates/tsconfig.json)
+
+#### Or with React
+
+```bash
+gh get timobechtel/style templates/react/tsconfig.json
+```
+
+<details>
+  <summary>Or manually</summary>
+
+Copy to `tsconfig.json`:
+
+```json
+{
+  "extends": "@timobechtel/style/tsconfig/react.json"
+}
 ```
 
+  </details>
+
 #### Expo
 
 With expo make sure to add `"moduleResolution": "bundler"` to the `compilerOptions`, otherwise certain routing types might break.
@@ -69,141 +130,194 @@ With expo make sure to add `"moduleResolution": "bundler"` to the `compilerOptio
 <details>
   <summary>Example</summary>
 
-  Copy to `tsconfig.json`:
+Copy to `tsconfig.json`:
 
-  ```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"
-    ]
-  }
-  ```
+```json
+{
+  "extends": ["expo/tsconfig.base", "@timobechtel/style/tsconfig/core.json"],
+  "compilerOptions": {
+    "moduleResolution": "bundler", // <-- this is important
+    "strict": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}
+```
 
   </details>
 
+### Prettier
 
-#### Or with React
+> Prettier config will not be updated anymore. I recommend using [Oxfmt](#oxfmt) instead.
+> oxfmt has been configured to match prettier rules, however this might drift in future versions.
+
+<details>
+  <summary>Setup prettier anyways</summary>
+
+```bash
+npm i -D prettier
+```
 
 ```bash
-curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/tsconfig/react/tsconfig.json
+gh get timobechtel/style templates/.prettierrc
 ```
 
+- [prettier template](https://github.com/TimoBechtel/style/blob/main/templates/.prettierrc)
+
 <details>
-  <summary>Or manually</summary>
+  <summary>Extend / customize config</summary>
 
-  Copy to `tsconfig.json`:
+Need to extend the config, e.g. adding plugins?
 
-  ```json
-  { 
-    "extends": "@timobechtel/style/tsconfig/react"
-  }
-  ```
+```bash
+gh get timobechtel/style templates/.prettierrc.mjs
+```
 
-  </details>
+Create a .prettierrc.mjs file and import the config, like this:
 
-### Eslint
+```js
+import config from '@timobechtel/style/prettier/index.mjs';
 
-```bash
-curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/core/.eslintrc.cjs
+/**
+ * @type {import("prettier").Config}
+ */
+export default {
+  ...config,
+  // your config
+};
 ```
 
-#### Fix Parsing errors for config files
+</details>
+</details>
+
+### Eslint
 
-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.
+> Eslint config will be removed in a future version. Use [Oxlint](#oxlint) instead.
+> oxlint has been configured to match existing eslint rules, however this might drift in future versions.
 
-To fix, either add to tsconfig or add them to the eslint config:
+<details>
+  <summary>Setup eslint anyways</summary>
 
-```diff
-  //...
-  parserOptions: {
-+    projectService: {
-+      allowDefaultProject: ['.eslintrc.cjs'],
-+    },
-    //...
-  },
-  //...
+```bash
+npm i -D eslint
+```
+
+```bash
+gh get timobechtel/style templates/eslint.config.js
 ```
 
+- [eslint core template](https://github.com/TimoBechtel/style/blob/main/templates/eslint.config.js)
+
+Note: If your project is not ESM (no `"type": "module"` in `package.json`), rename the file to `eslint.config.mjs`.
 
 <details>
   <summary>Or manually</summary>
 
-  Copy the following to a `.eslintrc.cjs`:
+Copy the following to an `eslint.config.js`:
 
-  ```js
-  const { resolve } = require('node:path');
+```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 project = resolve(process.cwd(), 'tsconfig.json');
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-  module.exports = {
-    root: true,
-    extends: [require.resolve('@timobechtel/style/eslint/core.cjs')],
-    parserOptions: {
-      tsconfigRootDir: process.cwd(),
+export default defineConfig([
+  ...styleCore,
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+      },
     },
     settings: {
-      'import/resolver': {
-        typescript: {
-          project,
-        },
-      },
+      'import-x/resolver-next': [
+        createTypeScriptImportResolver({
+          project: path.resolve(__dirname, 'tsconfig.json'),
+        }),
+        createNodeResolver(),
+      ],
     },
-  };
-  ```
+  },
+]);
+```
 
 </details>
 
 #### React
 
 ```bash
-curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/react/.eslintrc.cjs
+gh get timobechtel/style templates/react/eslint.config.js
 ```
 
+- [eslint react template](https://github.com/TimoBechtel/style/blob/main/templates/react/eslint.config.js)
+
 <details>
   <summary>Or manually</summary>
   
-  Also add `require.resolve('@timobechtel/style/eslint/react.cjs')` to the `extends` array.
+  Also spread `styleReact` from `@timobechtel/style/eslint/react.js`:
+
+```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/.eslintrc.cjs>
 </details>
 
+#### 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/order` rule.
+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`
 
 ```json
 {
   "editor.codeActionsOnSave": {
-    // use eslint import/order instead
+    // use eslint import-x/order instead
     "source.sortImports": "never"
   }
 }
 ```
 
+</details>
+
 ### semantic-release
 
 This repo also contains a [semantic-release](https://github.com/semantic-release/semantic-release) configuration.
 
 ```bash
-npm i -D semantic-release
+npm i -D semantic-release @semantic-release/changelog @semantic-release/git
+```
+
+```bash
+gh get timobechtel/style templates/.releaserc.json
 ```
 
+- [semantic-release template](https://github.com/TimoBechtel/style/blob/main/templates/.releaserc.json)
+
+### Agent Skills
+
 ```bash
-echo '{ "extends": "@timobechtel/style/semantic-release/index.cjs" }' > .releaserc.json
+npx skills add timobechtel/style@setup-style
 ```

package/eslint/core.js

@@ -0,0 +1,86 @@
+import js from '@eslint/js';
+import timobechtelRulesPlugin from '@timobechtel/eslint-plugin-rules';
+import prettierConfig from 'eslint-config-prettier/flat';
+import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript';
+import { createNodeResolver, importX } from 'eslint-plugin-import-x';
+import unicornPlugin from 'eslint-plugin-unicorn';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+import baseRules from './rules/base.js';
+import importRules from './rules/import.js';
+import typescriptRules from './rules/typescript.js';
+import unicornRules from './rules/unicorn.js';
+
+const mergeRules = (configs) =>
+  Object.assign({}, ...configs.map((config) => config?.rules ?? {}));
+
+export default defineConfig([
+  js.configs.recommended,
+  importX.flatConfigs.recommended,
+  importX.flatConfigs.typescript,
+  timobechtelRulesPlugin.configs['flat/all'],
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2021,
+      },
+      ecmaVersion: 2021,
+      sourceType: 'module',
+    },
+    plugins: {
+      unicorn: unicornPlugin,
+    },
+    rules: {
+      ...mergeRules(baseRules),
+      ...mergeRules(importRules),
+      ...mergeRules(unicornRules),
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    settings: {
+      'import-x/resolver-next': [
+        createTypeScriptImportResolver(),
+        createNodeResolver(),
+      ],
+    },
+  },
+
+  ...tseslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  ...tseslint.configs.strict,
+  ...tseslint.configs.strictTypeChecked,
+  ...tseslint.configs.stylistic,
+  ...tseslint.configs.stylisticTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+      },
+    },
+  },
+  {
+    files: ['**/*.js'],
+    extends: [tseslint.configs.disableTypeChecked],
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    rules: {
+      ...mergeRules(typescriptRules),
+    },
+  },
+
+  {
+    files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'],
+    rules: {
+      '@typescript-eslint/ban-ts-comment': 'off',
+    },
+  },
+
+  prettierConfig,
+]);

package/eslint/react.js

@@ -0,0 +1,32 @@
+import prettierConfig from 'eslint-config-prettier/flat';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import { defineConfig } from 'eslint/config';
+import reactRules from './rules/react.js';
+
+const mergeRules = (configs) =>
+  Object.assign({}, ...configs.map((config) => config?.rules ?? {}));
+
+export default defineConfig([
+  reactPlugin.configs.flat.recommended,
+  reactPlugin.configs.flat['jsx-runtime'],
+
+  {
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+      linkComponents: ['Link'],
+    },
+    rules: {
+      ...reactHooksPlugin.configs.flat.recommended.rules,
+      ...mergeRules(reactRules),
+    },
+  },
+
+  prettierConfig,
+]);

package/eslint/rules/base.js

@@ -0,0 +1,52 @@
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig({
+  rules: {
+    'prefer-arrow-callback': [
+      'warn',
+      {
+        allowNamedFunctions: true,
+        allowUnboundThis: true,
+      },
+    ],
+    'no-console': [
+      'error',
+      {
+        allow: ['warn', 'error', 'clear', 'info'],
+      },
+    ],
+    'max-depth': ['warn', 4],
+    'no-restricted-globals': ['error', 'event', 'name'],
+    curly: ['warn', 'multi-line'],
+    'default-case-last': 'error',
+    eqeqeq: 'error',
+    'no-alert': 'error',
+    'no-useless-rename': 'warn',
+    'no-var': 'error',
+    'object-shorthand': 'warn',
+    'prefer-const': 'warn',
+    'prefer-rest-params': 'error',
+    'prefer-spread': 'error',
+    'prefer-template': 'warn',
+    'no-promise-executor-return': 'error',
+    'no-unreachable-loop': 'error',
+    'new-cap': ['error', { capIsNew: false }],
+    'new-parens': 'warn',
+    'no-lonely-if': 'warn',
+    'no-unneeded-ternary': 'error',
+    'prefer-object-spread': 'warn',
+    'no-label-var': 'error',
+    'no-undef-init': 'warn',
+    'no-unused-vars': [
+      'error',
+      {
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+        ignoreRestSiblings: false,
+        vars: 'all',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'no-constant-binary-expression': 'error',
+  },
+});

package/eslint/rules/{css-in-js.cjs → css-in-js.js}

@@ -1,12 +1,10 @@
-// @ts-check
-const { defineConfig } = require('eslint-define-config');
+import { defineConfig } from 'eslint/config';
 
-module.exports = defineConfig({
+export default defineConfig({
   rules: {
     'no-restricted-syntax': [
       'error',
       {
-        // catches common mistakes when writing comments in CSS
         selector:
           'TemplateElement[value.cooked=/\\s+\\u002F\\u002F\\s*/], Literal[value=/\\s+\\u002F\\u002F\\s*/]',
         message: 'Invalid comment syntax. Use `/* */` instead of `//`.',

package/eslint/rules/import.js

@@ -0,0 +1,28 @@
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig({
+  rules: {
+    'import-x/first': 'error',
+    'import-x/newline-after-import': 'warn',
+    'import-x/no-self-import': 'error',
+    'import-x/no-useless-path-segments': ['error'],
+    'import-x/order': [
+      'warn',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+        ],
+      },
+    ],
+    'import-x/no-default-export': 'off',
+    'import-x/default': 'off',
+    'import-x/export': 'off',
+    'import-x/namespace': 'off',
+    'import-x/no-unresolved': 'off',
+  },
+});

package/eslint/rules/react.js

@@ -0,0 +1,40 @@
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig({
+  rules: {
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/button-has-type': 'error',
+    'react/function-component-definition': 'warn',
+    'react/hook-use-state': 'warn',
+    'react/jsx-boolean-value': 'warn',
+    'react/jsx-curly-brace-presence': [
+      'warn',
+      {
+        props: 'never',
+        children: 'ignore',
+        propElementValues: 'always',
+      },
+    ],
+    'react/jsx-fragments': 'warn',
+    'react/jsx-no-leaked-render': 'error',
+    'react/jsx-no-target-blank': [
+      'error',
+      {
+        allowReferrer: true,
+      },
+    ],
+    'react/jsx-no-useless-fragment': ['warn', { allowExpressions: true }],
+    'react/jsx-pascal-case': 'warn',
+    'react/jsx-sort-props': [
+      'warn',
+      {
+        callbacksLast: true,
+      },
+    ],
+    'react/no-unstable-nested-components': 'error',
+    'react/self-closing-comp': 'warn',
+    'react-hooks/exhaustive-deps': 'error',
+    'react/destructuring-assignment': ['warn', 'always'],
+  },
+});