@phaicom/eslint-config 0.2.0 → 0.2.2

package/README.md

@@ -1,27 +1,116 @@
 # `@phaicom/eslint-config`
 
-phaicom's ESLint configuration.
+Personal ESLint configuration preset.
 
-- Based on [antfu/eslint-config](https://github.com/antfu/eslint-config).
-- Enable all unicorn config.
-- Forced to always use curly.
-- Modified rules including unicorn, stylistic, Vue, etc.
-- Integrated with [eslint-plugin-readable-tailwind](https://github.com/schoero/eslint-plugin-readable-tailwind).
+✨ Features:
+- Built on [antfu/eslint-config](https://github.com/antfu/eslint-config)
+- Enforces curly brackets for all blocks
+- Custom rule sets for unicorn, stylistic, and Vue
+- Tailwind support with [eslint-plugin-readable-tailwind](https://github.com/schoero/eslint-plugin-readable-tailwind)
 
-## Usage with tailwind
-Start by install **eslint-plugin-readable-tailwind**
+## Usage
 
+1. Install the package:
 ```bash
-pnpm install -D eslint-plugin-readable-tailwind@beta
+pnpm i -D @phaicom/eslint-config
 ```
 
-And set the **tailwind** flag to true.
+2. Create `eslint.config.mjs` in your project root:
+```js
+// eslint.config.mjs
+import configs from '@phaicom/eslint-config'
+
+export default configs()
+```
+
+3. Configure VS Code:
+  - Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+  - Add the following settings to `.vscode/settings.json`:
+
+```jsonc
+{
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
+}
+```
+
+## Disable base rules
+You can disable the base rules by setting `phaicom: false`:
 
 ```js
-import phaicom from '@phaicom/eslint-config'
+// eslint.config.mjs
+import configs from '@phaicom/eslint-config'
 
-export default phaicom({
+export default configs({
+  phaicom: false,
+})
+```
+
+## Tailwind Support
+To enable Tailwind support and enforce consistent class ordering:
+
+1. Install the required plugin:
+```bash
+pnpm i -D eslint-plugin-readable-tailwind@beta
+```
+
+2. Enable Tailwind support in your config:
+```js
+// eslint.config.mjs
+import configs from '@phaicom/eslint-config'
+
+export default configs({
   tailwind: true,
 })
 ```
-The rest of the config you can refer to https://github.com/antfu/eslint-config
+
+This will enforce consistent ordering of Tailwind classes for better readability.
+## Additional Configurations
+
+For other configuration options like TypeScript, Vue, React, Prettier, and more, please refer to [antfu/eslint-config](https://github.com/antfu/eslint-config).

package/dist/index.js

@@ -73,14 +73,19 @@ async function tailwind() {
 }
 
 // src/index.ts
-var eslintConfig = ({ phaicom: enablePhaicom = true, tailwind: enableTailwind = false, ...options }, ...configs) => {
+var eslintConfig = (options, ...configs) => {
+  const {
+    phaicom: enablePhaicom = true,
+    tailwind: enableTailwind = false,
+    vue: enableVue
+  } = options;
   if (enableTailwind) {
     configs.push(tailwind());
   }
   if (enablePhaicom) {
     options.unicorn = true;
     configs.push(base_default.base);
-    if (options.vue) {
+    if (enableVue) {
       configs.push(base_default.vue);
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phaicom/eslint-config",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Phaicom's config based on @antfu/eslint-config",
   "author": "Reawpai Chunsoi <reawpai.chunsoi@gmail.com> (https://github.com/phaicom)",
   "license": "MIT",
@@ -37,11 +37,11 @@
     "@commitlint/config-conventional": "^19.6.0",
     "bumpp": "^10.0.1",
     "eslint-plugin-format": "^1.0.1",
+    "eslint-plugin-readable-tailwind": "^2.0.0-beta.1",
     "lint-staged": "^15.4.3",
     "simple-git-hooks": "^2.11.1",
     "tsup": "^8.3.6",
-    "typescript": "^5.7.3",
-    "eslint-plugin-readable-tailwind": "2.0.0-beta.0"
+    "typescript": "^5.7.3"
   },
   "commitlint": {
     "extends": [