@vheissulabs/prettier-config 1.2.0 → 1.5.0

package/README.md

@@ -1,6 +1,6 @@
 # @vheissulabs/prettier-config
 
-Shared Prettier configuration for VheissuLabs projects.
+Shared Prettier and ESLint configuration for VheissuLabs projects.
 
 ## Installation
 
@@ -8,7 +8,7 @@ Shared Prettier configuration for VheissuLabs projects.
 npm install --save-dev @vheissulabs/prettier-config
 ```
 
-## Usage
+## Prettier Usage
 
 Run the init script to automatically add the config to your package.json:
 
@@ -24,13 +24,7 @@ Or manually add to your `package.json`:
 }
 ```
 
-Or create a `.prettierrc.js`:
-
-```js
-module.exports = require('@vheissulabs/prettier-config')
-```
-
-### Extending the config
+### Extending Prettier config
 
 ```js
 module.exports = {
@@ -39,16 +33,52 @@ module.exports = {
 }
 ```
 
+## ESLint Usage (Vue)
+
+Install peer dependencies:
+
+```bash
+npm install --save-dev eslint eslint-plugin-vue
+```
+
+Create `eslint.config.js` in your project:
+
+```js
+const vheissuConfig = require('@vheissulabs/prettier-config/eslint')
+
+module.exports = [
+  ...vheissuConfig,
+  // Your overrides here
+]
+```
+
+### What ESLint enforces
+
+Forces Vue template content to new lines:
+
+```vue
+<!-- Before (Prettier output) -->
+<PrimaryButton @click="save">Save</PrimaryButton>
+
+<!-- After (ESLint fix) -->
+<PrimaryButton @click="save">
+    Save
+</PrimaryButton>
+```
+
 ## What's included
 
+### Prettier
 - 4 space indentation
 - No semicolons
 - Single quotes
 - Vue script/style indentation
 - Single attribute per line
-- Import sorting (no blank lines between groups):
-  1. `vue`
-  2. `@laravel/*`
-  3. `@/layouts/*`
-  4. `@/components/*`
-  5. Relative imports
+- HTML whitespace sensitivity: ignore
+- Import sorting (no blank lines between groups)
+
+### ESLint (Vue)
+- Single-line element content forced to new line
+- Closing bracket on new line for multiline elements
+- Max 1 attribute per line
+- 4 space HTML indentation

package/bin/init.js

@@ -4,6 +4,7 @@ const fs = require('fs')
 const path = require('path')
 
 const packageJsonPath = path.join(process.cwd(), 'package.json')
+const eslintConfigPath = path.join(process.cwd(), 'eslint.config.js')
 
 if (!fs.existsSync(packageJsonPath)) {
   console.error('❌ No package.json found in current directory')
@@ -12,22 +13,34 @@ if (!fs.existsSync(packageJsonPath)) {
 
 const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
 
+// Add Prettier config
 if (packageJson.prettier) {
   console.log('⚠️  Prettier config already exists in package.json')
-  console.log('   Current value:', JSON.stringify(packageJson.prettier))
-  process.exit(0)
-}
+} else {
+  packageJson.prettier = '@vheissulabs/prettier-config'
+
+  const originalContent = fs.readFileSync(packageJsonPath, 'utf8')
+  const indent = originalContent.match(/^(\s+)/m)?.[1] || '  '
 
-packageJson.prettier = '@vheissulabs/prettier-config'
+  fs.writeFileSync(
+    packageJsonPath,
+    JSON.stringify(packageJson, null, indent.length) + '\n'
+  )
+  console.log('✅ Added prettier config to package.json')
+}
 
-// Preserve formatting by detecting indent
-const originalContent = fs.readFileSync(packageJsonPath, 'utf8')
-const indent = originalContent.match(/^(\s+)/m)?.[1] || '  '
+// Add ESLint config
+if (fs.existsSync(eslintConfigPath)) {
+  console.log('⚠️  eslint.config.js already exists')
+} else {
+  const eslintConfig = `const vheissuConfig = require('@vheissulabs/prettier-config/eslint')
 
-fs.writeFileSync(
-  packageJsonPath,
-  JSON.stringify(packageJson, null, indent.length) + '\n'
-)
+module.exports = [...vheissuConfig]
+`
+  fs.writeFileSync(eslintConfigPath, eslintConfig)
+  console.log('✅ Created eslint.config.js')
+}
 
-console.log('✅ Added prettier config to package.json')
-console.log('   "prettier": "@vheissulabs/prettier-config"')
+console.log('')
+console.log('📦 Install peer dependencies:')
+console.log('   npm install --save-dev eslint eslint-plugin-vue')

package/eslint.config.js

@@ -0,0 +1,28 @@
+const vue = require('eslint-plugin-vue')
+
+module.exports = [
+  ...vue.configs['flat/recommended'],
+  {
+    rules: {
+      // Force element content to new line
+      'vue/singleline-html-element-content-newline': ['error', {
+        ignoreWhenNoAttributes: false,
+        ignoreWhenEmpty: true,
+      }],
+      // Force closing bracket to new line
+      'vue/html-closing-bracket-newline': ['error', {
+        singleline: 'never',
+        multiline: 'always',
+      }],
+      // Max attributes per line
+      'vue/max-attributes-per-line': ['error', {
+        singleline: 1,
+        multiline: 1,
+      }],
+      // Consistent indentation in templates
+      'vue/html-indent': ['error', 4],
+      // Disable rules that conflict with Prettier
+      'vue/html-self-closing': 'off',
+    },
+  },
+]

package/index.js

@@ -4,7 +4,7 @@ module.exports = {
   singleQuote: true,
   vueIndentScriptAndStyle: true,
   singleAttributePerLine: true,
-  htmlWhitespaceSensitivity: 'css',
+  htmlWhitespaceSensitivity: 'ignore',
   printWidth: 100,
   plugins: [
     '@trivago/prettier-plugin-sort-imports',

package/package.json

@@ -1,16 +1,22 @@
 {
   "name": "@vheissulabs/prettier-config",
-  "version": "1.2.0",
-  "description": "Shared Prettier configuration for VheissuLabs projects",
+  "version": "1.5.0",
+  "description": "Shared Prettier and ESLint configuration for VheissuLabs projects",
   "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./eslint": "./eslint.config.js"
+  },
   "bin": {
     "vheissu-prettier-init": "./bin/init.js"
   },
   "keywords": [
     "prettier",
+    "eslint",
     "config",
     "vheissulabs",
-    "tailwindcss"
+    "tailwindcss",
+    "vue"
   ],
   "author": "Karl Miller",
   "license": "MIT",
@@ -20,11 +26,19 @@
   },
   "peerDependencies": {
     "prettier": ">=3.0.0",
-    "prettier-plugin-tailwindcss": ">=0.5.0"
+    "prettier-plugin-tailwindcss": ">=0.5.0",
+    "eslint": ">=9.0.0",
+    "eslint-plugin-vue": ">=9.0.0"
   },
   "peerDependenciesMeta": {
     "prettier-plugin-tailwindcss": {
       "optional": true
+    },
+    "eslint": {
+      "optional": true
+    },
+    "eslint-plugin-vue": {
+      "optional": true
     }
   },
   "dependencies": {