eslint-config-acme 1.0.2 → 1.3.0

package/README.md

@@ -27,14 +27,17 @@ This will install the shared config, as well as its peer dependencies:
 - eslint
 - eslint-config-airbnb
 - eslint-config-prettier
+- eslint-import-resolver-alias
 - eslint-plugin-import
 - eslint-plugin-jsx-a11y
 - eslint-plugin-prettier
 - eslint-plugin-react
 - eslint-plugin-react-hooks
+- eslint-plugin-simple-import-sort
 - prettier
+- prettier-plugin-tailwindcss
 
-**NOTE:** if you are on an older version of `npm` (`<7.0.0`), you will need to install these manually:
+**NOTE:** if you are on NPM <7, you will need to install these manually:
 
 ```shell
 $ npx install-peerdeps -D eslint-config-acme
@@ -62,6 +65,52 @@ or the `.eslintrc` file:
 }
 ```
 
+## Import Alias
+
+This config provides a default import alias resolver for `eslint-plugin-import` to support shorthand imports of local modules:
+
+```json
+{
+  "import/resolver": {
+    "alias": {
+      "map": [["@", "./src"]],
+      "extensions": [".js", ".jsx"]
+    }
+  }
+}
+```
+
+This will allow you to write imports like this anywhere in your code:
+
+```jsx
+import Foo from '@/components/foo';
+```
+
+instead of relative paths:
+
+```jsx
+import Foo from '../../components/foo';
+```
+
+when using [absolute imports and module path aliases](https://nextjs.org/docs/advanced-features/module-path-aliases) in **Next.js**.
+
+This can also be overriden in your local `.eslintrc` file, if needed:
+
+```jsx
+// .eslintrc
+{
+  "extends": ["acme"],
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [["@", "./lib"]],
+        "extensions": [".js"]
+      }
+    }
+  }
+}
+```
+
 ## Prettier
 
 This config supports Prettier integration out of the box. Rules that may conflict with ESLint are disabled via recommended configuration in [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier).
@@ -71,12 +120,12 @@ If you wish to override any [Prettier options](https://prettier.io/docs/en/optio
 ```jsx
 // .eslintrc
 {
-  "extends": "@acme",
+  "extends": ["@acme"],
   "rules": {
     "prettier/prettier": [
       "error",
       {
-        "printWidth": 110
+        "printWidth": 90
       }
     ]
   }
@@ -90,20 +139,22 @@ Make sure that these rules match the options specified in your `.prettierrc` fil
 Add the following to your `package.json` file to define a script that will lint all known files and output the results:
 
 ```jsx
-"scripts": {
-  // ..
-  "lint": "eslint --ignore-path .gitignore ."
-  // ..
+// package.json
+{
+  "scripts": {
+    "lint": "eslint --ignore-path .gitignore ."
+  }
 }
 ```
 
 To fix all automatically-fixable issues, you can add the following script to your `package.json` as well (in addition to above):
 
 ```jsx
-"scripts": {
-  // ..
-  "lint:fix": "eslint --ignore-path .gitignore --fix ."
-  // ..
+// package.json
+{
+  "scripts": {
+    "lint:fix": "eslint --ignore-path .gitignore --fix ."
+  }
 }
 ```
 
@@ -115,18 +166,16 @@ There is a [known issue](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/is
 
 Because of this, the [standard usage](https://nextjs.org/docs/api-reference/next/link) of Next.js `<Link>` component will result in an error for the `jsx-a11y/anchor-is-valid` rule. Until the Next.js API can be updated to a more standard pattern, `eslint-config-acme` overrides this rule as suggested in [this issue](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/402#issuecomment-368305051):
 
-```jsx
+```json
 {
-  // ...
-  'jsx-a11y/anchor-is-valid': [
-    'error',
+  "jsx-a11y/anchor-is-valid": [
+    "error",
     {
-      components: ['Link'],
-      specialLink: ['hrefLeft', 'hrefRight'],
-      aspects: ['invalidHref', 'preferButton'],
-    },
-  ],
-  // ...
+      "components": ["Link"],
+      "specialLink": ["hrefLeft", "hrefRight"],
+      "aspects": ["invalidHref", "preferButton"]
+    }
+  ]
 }
 ```
 

package/index.js

@@ -18,7 +18,7 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ['simple-import-sort', 'import'],
+  plugins: ['simple-import-sort', 'import', 'tailwindcss'],
   rules: {
     ...base,
     ...next,
@@ -29,5 +29,11 @@ module.exports = {
       // Tells eslint-plugin-react to automatically detect the version of React to use
       version: 'detect',
     },
+    'import/resolver': {
+      alias: {
+        map: [['@', './src']],
+        extensions: ['.js', '.jsx'],
+      },
+    },
   },
 };

package/lib/base.js

@@ -33,6 +33,12 @@ module.exports = {
     },
   ],
   'simple-import-sort/exports': 'error',
+  'tailwindcss/classnames-order': [
+    'warn',
+    {
+      officialSorting: 'true',
+    },
+  ],
   'no-console': 'warn',
   'no-nested-ternary': 0,
   'no-underscore-dangle': 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-acme",
-  "version": "1.0.2",
+  "version": "1.3.0",
   "description": "ESLint + Prettier config for React (Next.js)",
   "main": "index.js",
   "files": [
@@ -14,16 +14,19 @@
     "lint:fix": "eslint --fix"
   },
   "peerDependencies": {
-    "eslint": "^7.29.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint": "^8.13.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "prettier": "^2.3.1"
+    "eslint-plugin-tailwindcss": "^3.5.0",
+    "prettier": "^2.6.2",
+    "prettier-plugin-tailwindcss": "^0.1.8"
   },
   "keywords": [
     "config",