js-style-kit 0.2.12 → 0.4.0

package/README.md

@@ -13,14 +13,36 @@ A zero-configuration style guide for ESLint and Prettier that provides sensible
 
 JS Style Kit is a comprehensive, batteries-included linting and formatting solution for modern JavaScript and TypeScript projects.
 
-- ✅ All dependencies included (ESLint, Prettier, plugins) - no need to install extras
+- ✅ All dependencies included (ESLint, Prettier, plugins) - no need to install peer deps
 - ✅ ESLint v9 flat config
-- ✅ TypeScript support out of the box
-- ✅ Optional React and React Compiler support
-- ✅ JSDoc validation with configurable requirements for libraries
-- ✅ Automatic import, prop, and object sorting with Perfectionist
-- ✅ Tailwind CSS support for Prettier
-- ✅ Modern ESM-only package
+- ✅ ESM-only package
+- ✅ All rules configured as warnings
+
+### Configs Included
+
+> **Note:** All configs are optional and can be disabled or configured.
+
+- ESlint
+  - Base config - Tweaked version of "recommended" config
+  - typescript-eslint - Falls somewhere between "recommended" and "strict"
+  - eslint-plugin-perfectionist - automatically sort all imports, objects, props, etc.
+  - eslint-plugin-import-x - faster version of eslint-plugin-import
+  - eslint-plugin-unicorn - enforce consistent file names (kebab-case will save you so many headaches)
+  - eslint-plugin-react - React rules
+  - eslint-plugin-react-hooks - React hooks rules
+  - eslint-plugin-react-refresh - React Fast Refresh validation for Vite
+  - eslint-plugin-nextjs - Next.js rules
+  - eslint-plugin-storybook - Storybook rules
+  - eslint-plugin-turbo - Turborepo rules
+  - eslint-plugin-jest - Jest rules
+  - eslint-plugin-vitest - Vitest rules
+- Prettier
+  - Default config
+  - prettier-plugin-css-order
+  - prettier-plugin-curly
+  - prettier-plugin-packagejson
+  - prettier-plugin-sort-json
+  - prettier-plugin-tailwindcss
 
 > **Note:** This is very much a work in progress. I want to know what configuration changes you make, so please open an issue!
 
@@ -43,7 +65,7 @@ bun add js-style-kit --dev
 
 ## ESLint Configuration
 
-### Basic Usage
+### ESLint Usage
 
 Create an `eslint.config.js` file in your project root:
 
@@ -79,11 +101,18 @@ export default eslintConfig({
   // All options shown with their default values
   functionStyle: "arrow", // Controls function style: "arrow", "declaration", "expression", or "off"
   ignores: [], // Additional paths to ignore (node_modules and dist already excluded)
+  importPlugin: true, // Whether to include import plugin rules
   jsdoc: { requireJsdoc: false }, // JSDoc configuration or false to disable
   react: false, // Whether to include React rules, see below for options
+  rules: {}, // Custom rules to override or configure specific ESLint rules
   sorting: true, // Whether to include sorting rules from Perfectionist
   storybook: false, // Whether to include Storybook rules
+  testing: {
+    /* see Testing Configuration section */
+  }, // Testing configuration or false to disable
+  turbo: false, // Whether to include Turborepo rules
   typescript: true, // Boolean or string path to tsconfig.json
+  unicorn: true, // Whether to include Unicorn rules
 });
 ```
 
@@ -120,6 +149,32 @@ typescript: false;
 typescript: "./tsconfig.json";
 ```
 
+#### Import Plugin Configuration
+
+The import plugin rules are enabled by default. These rules help maintain proper import/export syntax and detect issues with imports.
+
+```js
+// Enable import plugin (default)
+importPlugin: true;
+
+// Disable import plugin
+importPlugin: false;
+```
+
+#### Custom Rules Configuration
+
+You can override or configure specific ESLint rules using the `rules` option:
+
+```js
+// Add custom rule configurations
+rules: {
+  // Format is the same as standard ESLint rule configuration
+  "no-console": ["error", { allow: ["warn", "error"] }],
+  "@typescript-eslint/no-explicit-any": "off",
+  // Any valid ESLint rule can be configured here
+}
+```
+
 #### React Configuration
 
 React support is disabled by default.
@@ -128,13 +183,32 @@ React support is disabled by default.
 // `true` enables standard react rules, react hook rules, and react compiler
 react: true
 
-// you can also pass an object to control react compiler and next support
+// you can also pass an object to control react compiler, framework, and refresh support
 react: {
-  reactCompiler: false,
-  reactRefresh: false, // Controls React Fast Refresh validation (disabled by default)
-  next: true
+  reactRefresh: false, // Controls React Fast Refresh validation
+  framework: "next" // "next", "vite", or "none" to control related configurations
 }
-// next simply adds ".next" to the ignores array, but I plan add the next plugin in the future
+// Using the framework option configures related features:
+// - "next": Includes Next.js config, excludes React Refresh by default
+// - "vite" or "none": Includes React Refresh by default, excludes Next.js
+```
+
+#### Testing Configuration
+
+Testing rules are enabled by default with smart defaults. You can customize them or disable them entirely:
+
+```js
+// Disable testing rules
+testing: false;
+
+// Customize testing rules
+testing: {
+  filenamePattern: "test", // "test" or "spec" for filename patterns
+  files: ["**/*.{test,spec}.{ts,tsx,js,jsx}"], // File patterns to match
+  formattingRules: true, // Whether to include formatting rules
+  framework: "vitest", // "vitest" or "jest"
+  itOrTest: "it", // Whether to use "it" or "test" as the test function
+};
 ```
 
 #### JSDoc Configuration
@@ -151,7 +225,7 @@ jsdoc: {
 }
 ```
 
-#### Testing Configuration
+#### Additional Testing Options
 
 Testing support is enabled by default with Vitest configuration. You can customize it or disable it completely:
 
@@ -231,7 +305,7 @@ export default eslintConfig(
 
 ## Prettier Configuration
 
-### Basic Usage
+### Prettier Usage
 
 Create a `prettier.config.js` file in your project root:
 
@@ -254,7 +328,7 @@ Setup your `package.json` commands:
 }
 ```
 
-### Configuration Options
+### Prettier Configuration
 
 The `prettierConfig()` function accepts a configuration object with the following options:
 
@@ -294,7 +368,7 @@ tailwindPlugin: {
 }
 ```
 
-#### CSS Order Plugin
+#### CSS Properties Order
 
 The CSS order plugin is enabled by default. It sorts CSS properties in a consistent order. You can disable it:
 
@@ -374,11 +448,21 @@ export default eslintConfig(
     react: true,
     jsdoc: { requireJsdoc: true },
     functionStyle: "arrow",
+    // Use the built-in rules parameter for custom rules
+    rules: {
+      "no-console": ["error", { allow: ["warn", "error"] }],
+    },
+    // Configure testing
+    testing: {
+      framework: "jest",
+      itOrTest: "test",
+    },
   },
+  // You can still add additional config objects
   {
-    name: "project-specific-rules",
+    name: "additional-config",
     rules: {
-      "no-console": ["error", { allow: ["warn", "error"] }],
+      // More custom rules
     },
   },
 );

package/dist/bin/index.js

@@ -3433,17 +3433,16 @@ var setupConfigFiles = () => {
     const packageJson = JSON.parse(fs.readFileSync("package.json", "utf8"));
     const isEsm = packageJson.type === "module";
     extension = isEsm ? ".js" : ".mjs";
-    const styleConfigContent = `import { eslintConfig, prettierConfig } from "js-style-kit";
+    const prettierConfigContent = `
+      import { prettierConfig } from "js-style-kit";
 
-export const eslint = eslintConfig({});
+      export default prettierConfig({});
+    `;
+    const eslintConfigContent = `
+      import { eslintConfig } from "js-style-kit";
 
-export const prettier = prettierConfig({});
-`;
-    const prettierConfigContent = `export { prettier as default } from "./style-kit.config${extension}";
-`;
-    const eslintConfigContent = `export { eslint as default } from "./style-kit.config${extension}";
-`;
-    fs.writeFileSync(`style-kit.config${extension}`, styleConfigContent);
+      export default eslintConfig({});
+    `;
     fs.writeFileSync(`prettier.config${extension}`, prettierConfigContent);
     fs.writeFileSync(`eslint.config${extension}`, eslintConfigContent);
     console.info(`Created configuration files with ${extension} extension`);
@@ -3453,7 +3452,7 @@ export const prettier = prettierConfig({});
   }
   return extension;
 };
-var setupVSCodeSettings = (extension) => {
+var setupVSCodeSettings = () => {
   console.info("Setting up VS Code settings...");
   try {
     const vscodeDir = path.join(process.cwd(), ".vscode");
@@ -3473,11 +3472,8 @@ var setupVSCodeSettings = (extension) => {
       "editor.defaultFormatter": "esbenp.prettier-vscode",
       "editor.formatOnSave": true,
       "eslint.runtime": "node",
-      "explorer.fileNesting.enabled": true
+      "tailwindCSS.classFunctions": ["cn", "cva", "clsx"]
     };
-    settings["explorer.fileNesting.patterns"] ??= {};
-    const nestingPatterns = settings["explorer.fileNesting.patterns"];
-    nestingPatterns[`style-kit.config${extension}`] = `eslint.config${extension}, prettier.config${extension}`;
     fs.writeFileSync(
       settingsPath,
       JSON.stringify(settings, null, 2).concat("\n")
@@ -3500,8 +3496,8 @@ program2.command("init").description("Initialize project with js-style-kit confi
     }
     setupDependencies(packageManager);
     setupScripts();
-    const extension = setupConfigFiles();
-    setupVSCodeSettings(extension);
+    setupConfigFiles();
+    setupVSCodeSettings();
     const runCmd = {
       bun: "bun run",
       npm: "npm run",