Export createEnv as the default export

.changeset/vast-bananas-win.md

@@ -0,0 +1,35 @@
+---
+"arkenv": minor
+---
+
+#### Export `createEnv` as the default export
+
+You can now import `createEnv` as the default export:
+
+```ts
+import arkenv from "arkenv";
+```
+
+This enables syntax highlighting along with the [ArkType VS Code extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark):
+
+![ArkType syntax highlighting in VS Code](/assets/dx.png)
+
+Note that named imports still work:
+
+```ts
+import { createEnv } from "arkenv";
+```
+
+**BREAKING CHANGE:** The default export now directly exports `createEnv` instead of an object containing all exports. If you previously used:
+
+```ts
+import arkenv from "arkenv";
+const env = arkenv.createEnv({ ... });
+```
+
+Update to:
+
+```ts
+import arkenv from "arkenv";
+const env = arkenv({ ... });
+```

.github/copilot-instructions.md

@@ -54,13 +54,13 @@ The project uses modern tooling:
 
 The core library provides:
 
-1. **`createEnv(schema)`** - Main function to create validated environment objects
+1. **`createEnv(schema)`** - Main function to create validated environment objects. Also available as the default export, typically imported as `arkenv`.
 2. **Built-in validators** - Common validators like `host`, `port`, `url`, etc.
 3. **ArkType integration** - Uses ArkType for schema definition and validation
 4. **Type inference** - Full TypeScript type inference from schemas
 
 ### Key Files
-- `src/define-env.ts` - Core `createEnv` implementation
+- `src/create-env.ts` - Core `createEnv` implementation
 - `src/types.ts` - Built-in type validators (host, port, url, etc.)
 - `src/errors.ts` - Error handling and formatting
 - `src/utils.ts` - Utility functions
@@ -69,9 +69,9 @@ The core library provides:
 
 ### Environment Schema Definition
 ```typescript
-import { createEnv } from 'arkenv';
+import arkenv from 'arkenv';
 
-const env = createEnv({
+const env = arkenv({
   HOST: "string.host",                                    // Built-in validator
   PORT: "number.port",                                    // Built-in validator  
   NODE_ENV: "'development' | 'production' | 'test'", // ArkType string literal
@@ -97,7 +97,7 @@ Environment validation errors are thrown early with descriptive messages showing
 
 ### Test Structure
 Tests are located alongside source files with `.test.ts` suffix:
-- `define-env.test.ts` - Tests for main `createEnv` functionality
+- `create-env.test.ts` - Tests for main `createEnv` functionality
 - `types.test.ts` - Tests for built-in validators
 - `errors.test.ts` - Tests for error handling
 - `utils.test.ts` - Tests for utility functions
@@ -124,7 +124,7 @@ afterEach(() => {
 
 it('should validate environment variables', () => {
   process.env.PORT = '3000';
-  const env = createEnv({ PORT: "number.port" });
+  const env = arkenv({ PORT: "number.port" });
   expect(env.PORT).toBe(3000);
 });
 ```

apps/playground/index.ts

@@ -1,6 +1,6 @@
-import { createEnv } from "arkenv";
+import arkenv from "arkenv";
 
-const env = createEnv({
+const env = arkenv({
 	HOST: "string.host",
 	PORT: "number.port",
 	NODE_ENV: "'development' | 'production' | 'test' = 'development'",

apps/www/content/docs/guides/environment-configuration.mdx

@@ -177,9 +177,9 @@ spec:
 ArkEnv helps ensure your environment variables are valid:
 
 ```typescript title="src/config/env.ts"
-import { createEnv } from 'arkenv';
+import arkenv from 'arkenv';
 
-export const env = createEnv({
+export const env = arkenv({
   // Required variables with validation
   DATABASE_HOST: "string.host",
   DATABASE_PORT: "number.port",
@@ -209,10 +209,10 @@ export const env = createEnv({
 Create a configuration factory to handle different environments:
 
 ```typescript title="src/config/index.ts"
-import { createEnv } from 'arkenv';
+import arkenv from 'arkenv';
 
 const createConfig = () => {
-  const env = createEnv({
+  const env = arkenv({
     NODE_ENV: "'development' | 'test' | 'production'",
     DATABASE_HOST: "string.host",
     DATABASE_PORT: "number.port",
@@ -235,9 +235,9 @@ export const config = createConfig();
 Use environment variables for feature flags:
 
 ```typescript title="src/config/features.ts"
-import { createEnv } from 'arkenv';
+import arkenv from 'arkenv';
 
-export const env = createEnv({
+export const env = arkenv({
   "ENABLE_BETA_FEATURES?": 'boolean = false',
   "MAINTENANCE_MODE?": 'boolean = false',
   "ALLOWED_ORIGINS?": 'string[] = []'

apps/www/content/docs/guides/import-options.mdx

@@ -0,0 +1,98 @@
+---
+title: Integrating with VS Code
+icon: New
+description: Get syntax highlighting and enhanced developer experience with the ArkType VS Code extension
+---
+
+## ArkType VS Code Extension
+
+The [ArkType VS Code extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for ArkType definitions, making your development experience with ArkEnv much more pleasant.
+
+<Card
+  title="Install ArkType VS Code Extension"
+  href="https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark"
+  description="Get syntax highlighting and inline error summaries for ArkType functions"
+/>
+
+### Installation
+
+1. Open VS Code
+2. Go to Extensions (Ctrl+Shift+X)
+3. Search for "ArkType"
+4. Install the extension by arktypeio
+
+## Getting Syntax Highlighting
+
+To get syntax highlighting for your ArkEnv schemas, use the **default import** and name it `arkenv`:
+
+```typescript
+import arkenv from 'arkenv';
+
+const env = arkenv({
+  PORT: "number.port", 
+  NODE_ENV: "'development' | 'production' | 'test'",
+});
+```
+
+### Example with Syntax Highlighting
+
+import Image from "next/image";
+
+<Image
+  src="/dx.png"
+  alt="ArkType syntax highlighting in VS Code"
+  width={600}
+  height={338}
+/>
+
+### Benefits
+
+When you use the default import (`import arkenv from 'arkenv'`) and have the ArkType extension installed, you get:
+
+- **Syntax highlighting** for ArkType definitions in your schema
+- **Inline error summaries** via ErrorLens integration
+- **Better developer experience** with visual feedback
+
+## Alternative Import Styles
+
+You can also use named imports, though you won't get syntax highlighting:
+
+```typescript
+import { createEnv } from 'arkenv';
+
+const env = createEnv({
+  PORT: "number.port",
+  NODE_ENV: "'development' | 'production' | 'test'",
+});
+```
+
+## Migration Guide
+
+If you're currently using named imports and want to switch to default imports for better VS Code support:
+
+### Before
+```typescript
+import { createEnv } from 'arkenv';
+
+const env = createEnv({
+  PORT: "number.port",
+});
+```
+
+### After
+```typescript
+import arkenv from 'arkenv';
+
+const env = arkenv({
+  PORT: "number.port", 
+});
+```
+
+The functionality is identical - only the import style changes!
+
+## Best Practices
+
+- **Use default import** if you're using VS Code and want enhanced syntax highlighting
+- **Use named import** if you prefer explicit imports or are using other editors
+- **Be consistent** within your project - choose one style and stick with it
+- **Install the ArkType extension** for the best development experience

apps/www/content/docs/index.mdx

@@ -30,9 +30,9 @@ ArkEnv solves these problems by providing a typesafe, validated way to define an
 Here's the kind of code you can expect when using ArkEnv:
 
 ```ts title="example.ts"
-import { createEnv } from 'arkenv';
+import arkenv from 'arkenv';
 
-const env = createEnv({
+const env = arkenv({
   HOST: "string.host",           // Validates IP address or localhost
   PORT: "number.port",           // Ensures valid port number (0-65535)
   NODE_ENV: "'development' | 'production' | 'test'",

apps/www/content/docs/meta.json

@@ -5,6 +5,7 @@
 		"quickstart",
 		"examples",
 		"---Guides---",
+		"guides/import-options",
 		"guides/environment-configuration"
 	]
 }

apps/www/content/docs/quickstart.mdx

@@ -35,9 +35,9 @@ description: Let's get you started with a few simple steps
     Add a schema to make your environment variables **validated** and **typesafe**:
 
     ```typescript title="config/env.ts"
-    import { createEnv } from 'arkenv';
+    import arkenv from 'arkenv';
 
-    export const env = createEnv({
+    export const env = arkenv({
       // Built-in validators
       DATABASE_HOST: "string.host",
       DATABASE_PORT: "number.port",
@@ -52,6 +52,9 @@ description: Let's get you started with a few simple steps
       "API_KEY?": 'string'
     });
     ```
+
+    > [!TIP]
+    > **VS Code Users:** Want syntax highlighting for your ArkType schemas? Check out our [VS Code Integration guide](/docs/guides/import-options) to learn about the ArkType extension and enhanced developer experience!
   </Step>
 
   <Step>
@@ -110,6 +113,11 @@ description: Let's get you started with a few simple steps
 ## Next steps
 
 <Cards>
+  <Card 
+    title="VS Code Integration" 
+    href="/docs/guides/import-options" 
+    description="Get syntax highlighting and enhanced developer experience with the ArkType VS Code extension"
+  />
   <Card 
     title="Loading environment variables" 
     href="/docs/guides/environment-configuration" 

apps/www/lib/source.ts

@@ -3,6 +3,18 @@ import { icons } from "lucide-react";
 import { createElement } from "react";
 import { docs } from "~/.source";
 
+function createNewElement() {
+	return createElement(
+		"span",
+		{
+			className:
+				"bg-gradient-to-r from-yellow-400 to-yellow-100 text-amber-800 px-1.5 py-0.5 rounded text-xs font-medium",
+			"data-new": "true",
+		},
+		"New!",
+	);
+}
+
 export const source = loader({
 	baseUrl: "/docs",
 	source: docs.toFumadocsSource(),
@@ -12,6 +24,8 @@ export const source = loader({
 			return;
 		}
 
+		if (icon === "New") return createNewElement();
+
 		if (icon in icons) return createElement(icons[icon as keyof typeof icons]);
 	},
 });

arkenv.code-workspace

@@ -48,5 +48,20 @@
 			"path": "apps/www/content/docs",
 			"name": "docs"
 		}
-	]
+	],
+	"settings": {
+		"files.exclude": {
+			"**/.git": true,
+			"**/.svn": true,
+			"**/.hg": true,
+			"**/.DS_Store": true,
+			"**/Thumbs.db": false,
+			"**/.trunk/*actions/": true,
+			"**/.trunk/*logs/": true,
+			"**/.trunk/*notifications/": true,
+			"**/.trunk/*out/": true,
+			"**/.trunk/*plugins/": true
+		},
+		"explorerExclude.backup": {}
+	}
 }

packages/arkenv/README.md

@@ -56,25 +56,29 @@ bun add arkenv arktype
 
 ## Quickstart
 
-> [!TIP]
-> Find more examples in the [examples](https://github.com/yamcodes/arkenv/tree/main/examples) directory.
-
 ```ts
-import { createEnv } from 'arkenv';
+import arkenv from 'arkenv';
 
-const env = createEnv({
+const env = arkenv({
   HOST: "string.host", // valid IP address or localhost
   PORT: "number.port", // valid port number (0-65535)
   NODE_ENV: "'development' | 'production' | 'test'",
 });
 
+
 // Automatically validate and parse process.env
 // TypeScript knows the ✨exact✨ types!
 console.log(env.HOST);     // (property) HOST: string
 console.log(env.PORT);     // (property) PORT: number
 console.log(env.NODE_ENV); // (property) NODE_ENV: "development" | "production" | "test"
 ```
 
+You can find more examples in the [examples](https://github.com/yamcodes/arkenv/tree/main/examples) directory.
+
+> [!TIP]
+> **VS Code Users:** Get syntax highlighting and inline error summaries for the ArkType ecosystem with the [ArkType VS Code extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark). For even better TypeScript highlighting, try [ArkThemes](https://marketplace.cursorapi.com/items/?itemName=arktypeio.arkthemes).
+> ![ArkType syntax highlighting in VS Code](https://raw.githubusercontent.com/yamcodes/arkenv/main/assets/dx.png)
+
 ## Features
 
 - 🔒 **Typesafe**: Full TypeScript support with inferred types