feat: recommended preset (#28)

* ADD `recommended` configuration
* docs: more infos about the `recommended` preset

Author: francoismassart

README.md

@@ -10,8 +10,19 @@ Rules enforcing best practices and consistency using [Tailwind CSS](https://tail
 >
 > 👍 Most of [the new JIT mode features](https://tailwindcss.com/docs/just-in-time-mode#new-features) are also supported.
 
+## Supported Rules
+
+Learn more about each supported rules by reading their documentation:
+
+- [`classnames-order`](docs/rules/classnames-order.md): order classnames by target properties then by variants (`[size:][theme:][state:]`)
+- [`no-custom-classname`](docs/rules/no-custom-classname.md): only allow classnames from Tailwind CSS and the values from the `whitelist` option
+- [`no-contradicting-classname`](docs/rules/no-contradicting-classname.md): e.g. avoid `p-2 p-3`, different Tailwind CSS classnames (`pt-2` & `pt-3`) but targeting the same property several times for the same variant.
+
+Using ESLint extension for Visual Studio Code, you will get these messages
 ![detected-errors](https://user-images.githubusercontent.com/704026/120854472-83567f80-c57d-11eb-9eaa-18d33b98c60c.png)
 
+You can can the same information on your favorite command line software as well.
+
 ## Installation
 
 You'll first need to install [ESLint](http://eslint.org):
@@ -26,10 +37,6 @@ Next, install `eslint-plugin-tailwindcss`:
 $ npm i eslint-plugin-tailwindcss --save-dev
 ```
 
-[eslint-plugin-tailwindcss on npm](https://www.npmjs.com/package/eslint-plugin-tailwindcss)
-
-## Usage
-
 Add `tailwindcss` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
 
 ```json
@@ -38,8 +45,22 @@ Add `tailwindcss` to the plugins section of your `.eslintrc` configuration file.
 }
 ```
 
+## Configuration
+
+Use our preset to get reasonable defaults:
+
+```
+  "extends": [
+    "plugin:tailwindcss/recommended"
+  ]
+```
+
+If you do not use a preset you will need to specify individual rules and add extra configuration:
+
 Configure the rules you want to use under the rules section.
 
+> The following lines are matching the configuration saved `recommended` preset...
+
 ```json
 {
   "rules": {
@@ -83,14 +104,6 @@ The plugin will look for each setting value in this order and stop looking as so
 2. In the shared settings (plugin level)
 3. Default value of the requested setting (plugin level)...
 
-## Supported Rules
-
-Learn more about each supported rules by reading their documentation:
-
-- [`classnames-order`](docs/rules/classnames-order.md): order classnames by target properties then by variants (`[size:][theme:][state:]`)
-- [`no-custom-classname`](docs/rules/no-custom-classname.md): only allow classnames from Tailwind CSS and the values from the `whitelist` option
-- [`no-contradicting-classname`](docs/rules/no-contradicting-classname.md): e.g. avoid `p-2 p-3`, different Tailwind CSS classnames (`pt-2` & `pt-3`) but targeting the same property several times for the same variant.
-
 ## Upcoming Rules
 
 - `no-redundant-variant`: e.g. avoid `mx-5 sm:mx-5`, no need to redefine `mx` in `sm:` variant as it uses the same value (`5`)

lib/index.js

@@ -10,8 +10,24 @@
 
 // import all rules in lib/rules
 var base = __dirname + '/rules/';
-module.exports.rules = {
-  'classnames-order': require(base + 'classnames-order'),
-  'no-contradicting-classname': require(base + 'no-contradicting-classname'),
-  'no-custom-classname': require(base + 'no-custom-classname'),
+module.exports = {
+  rules: {
+    'classnames-order': require(base + 'classnames-order'),
+    'no-contradicting-classname': require(base + 'no-contradicting-classname'),
+    'no-custom-classname': require(base + 'no-custom-classname'),
+  },
+  configs: {
+    recommended: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      rules: {
+        'tailwindcss/classnames-order': 'warn',
+        'tailwindcss/no-custom-classname': 'warn',
+        'tailwindcss/no-contradicting-classname': 'error',
+      },
+    },
+  },
 };

tests/lib/index.js

@@ -0,0 +1,29 @@
+/**
+ * @fileoverview Use a consistent orders for the Tailwind CSS classnames, based on property then on variants
+ * @author François Massart
+ */
+"use strict";
+
+var plugin = require("../../lib/index");
+
+var assert = require("assert");
+var fs = require("fs");
+var path = require("path");
+
+var rules = fs.readdirSync(path.resolve(__dirname, "../../lib/rules/")).map(function (f) {
+  return path.basename(f, ".js");
+});
+
+describe("all rule files should be exported by the plugin", function () {
+  rules.forEach(function (ruleName) {
+    it(`should export ${ruleName}`, function () {
+      assert.equal(plugin.rules[ruleName], require(path.join("../../lib/rules", ruleName)));
+    });
+  });
+});
+
+describe("configurations", function () {
+  it(`should export a "recommended" configuration`, function () {
+    assert(plugin.configs.recommended);
+  });
+});