@timobechtel/style 2.0.1 → 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@^9" 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,120 +130,150 @@ 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>
 
-#### Or with React
+### Prettier
+
+> 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:
+
+```js
+import config from '@timobechtel/style/prettier/index.mjs';
+
+/**
+ * @type {import("prettier").Config}
+ */
+export default {
+  ...config,
+  // your config
+};
+```
+
+</details>
+</details>
 
 ### Eslint
 
+> 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.
+
+<details>
+  <summary>Setup eslint anyways</summary>
+
+```bash
+npm i -D eslint
+```
+
 ```bash
-curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/core/eslint.config.js
+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 an `eslint.config.js`:
-
-  ```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(),
-        ],
+Copy the following to an `eslint.config.js`:
+
+```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(),
+      ],
+    },
+  },
+]);
+```
 
 </details>
 
 #### React
 
 ```bash
-curl -O https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/react/eslint.config.js
+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 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';
+```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
-  ]);
-  ```
+export default defineConfig([
+  ...styleCore,
+  ...styleReact,
+  // ... your config
+]);
+```
 
-  Example config:
-  <https://raw.githubusercontent.com/TimoBechtel/style/refs/heads/main/templates/eslint/react/eslint.config.js>
 </details>
 
 #### Migration from v1.x
@@ -209,6 +300,8 @@ Add the following to your VSCode config, e.g. `.vscode/settings.json`
 }
 ```
 
+</details>
+
 ### semantic-release
 
 This repo also contains a [semantic-release](https://github.com/semantic-release/semantic-release) configuration.
@@ -218,5 +311,13 @@ npm i -D semantic-release @semantic-release/changelog @semantic-release/git
 ```
 
 ```bash
-echo '{ "extends": "@timobechtel/style/semantic-release/index.cjs" }' > .releaserc.json
+gh get timobechtel/style templates/.releaserc.json
+```
+
+- [semantic-release template](https://github.com/TimoBechtel/style/blob/main/templates/.releaserc.json)
+
+### Agent Skills
+
+```bash
+npx skills add timobechtel/style@setup-style
 ```

package/oxfmt/index.json

@@ -0,0 +1,19 @@
+{
+  "endOfLine": "lf",
+  "tabWidth": 2,
+  "printWidth": 80,
+  "useTabs": false,
+  "singleQuote": true,
+  "sortImports": {
+    "groups": [
+      "builtin",
+      "external",
+      "internal",
+      "parent",
+      "sibling",
+      "index",
+      "unknown"
+    ],
+    "newlinesBetween": true
+  }
+}

package/oxlint/core.jsonc

@@ -0,0 +1,212 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": [
+    "unicorn",
+    "typescript",
+    "oxc",
+    "import"
+  ],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "error",
+    "pedantic": "error",
+    "nursery": "error"
+  },
+  "rules": {
+    // ---- style rules ----
+    "curly": [
+      "warn",
+      "multi-line"
+    ],
+    "default-case-last": "error",
+    "default-param-last": "error",
+    "import/first": "error",
+    "import/no-duplicates": "warn",
+    "new-cap": [
+      "error",
+      {
+        "capIsNew": false
+      }
+    ],
+    "no-label-var": "error",
+    "prefer-const": "warn",
+    "prefer-object-spread": "warn",
+    "prefer-rest-params": "error",
+    "prefer-spread": "error",
+    "prefer-template": "warn",
+    "typescript/adjacent-overload-signatures": "error",
+    "typescript/array-type": "error",
+    "typescript/ban-tslint-comment": "error",
+    "typescript/class-literal-property-style": "error",
+    "typescript/consistent-generic-constructors": "error",
+    "typescript/consistent-type-assertions": "error",
+    "typescript/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports",
+        "fixStyle": "inline-type-imports"
+      }
+    ],
+    "typescript/no-inferrable-types": "error",
+    "typescript/prefer-for-of": "error",
+    "typescript/prefer-function-type": "error",
+    "typescript/prefer-reduce-type-parameter": "error",
+    "typescript/prefer-return-this-type": "error",
+    "typescript/unified-signatures": "error",
+    "unicorn/error-message": "error",
+    "unicorn/no-zero-fractions": "warn",
+    "unicorn/numeric-separators-style": "error",
+    "unicorn/prefer-array-index-of": "error",
+    "unicorn/prefer-default-parameters": "warn",
+    "unicorn/prefer-includes": "error",
+    "unicorn/prefer-keyboard-event-key": "error",
+    "unicorn/prefer-logical-operator-over-ternary": "error",
+    "unicorn/prefer-modern-dom-apis": "error",
+    "unicorn/prefer-negative-index": "error",
+    "unicorn/prefer-object-from-entries": "error",
+    "unicorn/prefer-reflect-apply": "error",
+    "unicorn/prefer-spread": "error",
+    "unicorn/prefer-ternary": [
+      "warn",
+      "only-single-line"
+    ],
+    "unicorn/require-array-join-separator": "error",
+    "unicorn/switch-case-braces": "error",
+
+    // ---- correctness rules ----
+    "import/default": "off",
+    "import/namespace": "off",
+    "no-unused-vars": [
+      "error",
+      {
+        "args": "after-used",
+        "argsIgnorePattern": "^_",
+        "ignoreRestSiblings": false,
+        "vars": "all",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "no-useless-rename": "warn",
+    "typescript/require-array-sort-compare": [
+      "error",
+      {
+        "ignoreStringArrays": true
+      }
+    ],
+    "unicorn/no-useless-fallback-in-spread": "warn",
+    "unicorn/no-useless-length-check": "warn",
+
+    // ---- suspicious rules ----
+    "import/no-named-as-default": "warn",
+    "import/no-named-as-default-member": "warn",
+    "unicorn/consistent-function-scoping": [
+      "warn",
+      {
+        "checkArrowFunctions": false
+      }
+    ],
+
+    // ---- pedantic rules ----
+    "max-depth": [
+      "warn",
+      4
+    ],
+    "no-lonely-if": "warn",
+    "typescript/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": false
+      }
+    ],
+    "unicorn/escape-case": "warn",
+    "unicorn/no-unreadable-iife": "warn",
+    "unicorn/prefer-event-target": "warn",
+
+    // ---- restriction rules ----
+    "no-alert": "error",
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error",
+          "clear",
+          "info"
+        ]
+      }
+    ],
+    "no-restricted-globals": [
+      "error",
+      "event",
+      "name"
+    ],
+    "no-var": "error",
+    "typescript/no-dynamic-delete": "error",
+    "typescript/no-empty-object-type": "error",
+    "typescript/no-explicit-any": "error",
+    "typescript/no-import-type-side-effects": "error",
+    "typescript/no-invalid-void-type": "error",
+    "typescript/no-namespace": "error",
+    "typescript/no-non-null-asserted-nullish-coalescing": "error",
+    "typescript/no-non-null-assertion": "error",
+    "typescript/no-require-imports": "error",
+    "typescript/non-nullable-type-assertion-style": "error",
+    "typescript/prefer-literal-enum-member": "error",
+    "typescript/use-unknown-in-catch-callback-variable": "error",
+    "unicorn/prefer-modern-math-apis": "error",
+    "unicorn/prefer-node-protocol": "error",
+    "unicorn/prefer-number-properties": [
+      "error",
+      {
+        "checkInfinity": false
+      }
+    ],
+
+    // ---- perf rules ----
+    "unicorn/prefer-array-find": "error",
+    "unicorn/prefer-array-flat-map": "error",
+    "unicorn/prefer-set-has": "error",
+
+    // ---- nursery rules ----
+    "typescript/consistent-type-exports": [
+      "error",
+      {
+        "fixMixedExportsWithInlineTypeSpecifier": true
+      }
+    ],
+    "typescript/prefer-regexp-exec": "warn",
+
+    // these are mostly handled by typescript compiler
+    "getter-return": "off",
+    "no-undef": "off",
+    "no-unreachable": "off",
+    "import/named": "off",
+    "import/export": "off",
+
+    // new oxlint rules in nursery below that were not configured in eslint configs before
+
+    // report duplicate code in branches
+    "oxc/branches-sharing-code": "warn",
+    // prevent mixing value and non-value returns in functions
+    "typescript/consistent-return": "warn",
+    "typescript/no-unnecessary-qualifier": "warn",
+    "typescript/prefer-readonly": "warn",
+    // this is nice, but adds a lot of noise to existing codebases
+    "typescript/prefer-readonly-parameter-types": "off",
+    "typescript/strict-void-return": "off"
+
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/*.test.ts",
+        "**/*.test.tsx",
+        "**/*.spec.ts",
+        "**/*.spec.tsx"
+      ],
+      "rules": {
+        "typescript/ban-ts-comment": "off"
+      }
+    }
+  ]
+}

package/oxlint/react.jsonc

@@ -0,0 +1,46 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "extends": [
+    "./core.jsonc"
+  ],
+  "plugins": [
+    "unicorn",
+    "typescript",
+    "oxc",
+    "import",
+    "react"
+  ],
+  "rules": {
+    // ---- style rules ----
+    "react/jsx-boolean-value": "warn",
+    "react/jsx-curly-brace-presence": [
+      "warn",
+      {
+        "props": "never",
+        "children": "ignore",
+        "propElementValues": "always"
+      }
+    ],
+    "react/jsx-fragments": "warn",
+    "react/jsx-pascal-case": "warn",
+    "react/self-closing-comp": "warn",
+
+    // ---- pedantic rules ----
+    "react/jsx-no-target-blank": [
+      "error",
+      {
+        "allowReferrer": true
+      }
+    ],
+    "react/jsx-no-useless-fragment": [
+      "warn",
+      {
+        "allowExpressions": true
+      }
+    ],
+
+    // ---- restriction rules ----
+    "react/no-unknown-property": "error",
+    "react/button-has-type": "error"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timobechtel/style",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -11,20 +11,26 @@
     "eslint",
     "prettier",
     "semantic-release",
-    "tsconfig"
+    "tsconfig",
+    "oxlint",
+    "oxfmt"
   ],
   "devDependencies": {
     "@semantic-release/npm": "^13.1.4",
     "eslint": "^9.39.3",
     "prettier": "^3.8.1",
     "semantic-release": "^25.0.3",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "oxlint": "^1.55.0",
+    "oxfmt": "^0.40.0"
   },
   "peerDependencies": {
     "eslint": "^9.39.3",
     "prettier": "^3.8.1",
     "semantic-release": "^25.0.3",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "oxlint": "^1.55.0",
+    "oxfmt": "^0.40.0"
   },
   "dependencies": {
     "@eslint/js": "^9.39.3",
@@ -38,6 +44,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-unicorn": "^63.0.0",
     "globals": "^17.3.0",
+    "oxlint-tsgolint": "^0.16.0",
     "typescript-eslint": "^8.56.0"
   }
 }