📝 update documents

Author: mysticatea

docs/.vuepress/components/eslint-playground.vue

@@ -4,6 +4,7 @@
         :config="config"
         :code="code"
         :class="`eslint-playground-${type}`"
+        :style="{ height }"
         class="eslint-playground"
         dark
         fix
@@ -84,11 +85,16 @@ export default {
 
             return config
         },
+
+        height() {
+            const numLines = this.code.split("\n").length
+            return `${numLines * 20 + 10}px`
+        }
     },
 
     async mounted() {
         // Load linter.
-        const { default: Linter } = await import("eslint4b/dist/linter")
+        const { default: Linter } = await import("eslint4b")
         const linter = (this.linter = new Linter())
 
         for (const ruleId of Object.keys(rules)) {
@@ -101,10 +107,10 @@ export default {
 <style>
 .eslint-playground {
     width: 100%;
-    min-height: 160px;
     margin-bottom: 8px;
     box-sizing: border-box;
-    border: 1.5px solid gray;
+    border: 2px solid gray;
+    border-radius: 3px;
 }
 .eslint-playground-good {
     border-color: #4caf50;

docs/.vuepress/config.js

@@ -1,7 +1,3 @@
-/**
- * @author Toru Nagashima <https://github.com/mysticatea>
- * See LICENSE file in root directory for full license.
- */
 "use strict"
 
 const { withCategories } = require("../../scripts/lib/rules")
@@ -11,9 +7,7 @@ require("../../scripts/update-docs-index")
 module.exports = {
     base: "/eslint-plugin-eslint-comments/",
     title: "eslint-plugin-eslint-comments",
-    description: "ESLint plugin about ECMAScript syntax.",
-    serviceWorker: true,
-    ga: "UA-12936571-6",
+    description: "Additional ESLint rules for ESLint directive comments.",
     evergreen: true,
 
     themeConfig: {
@@ -22,27 +16,33 @@ module.exports = {
         docsDir: "docs",
         docsBranch: "master",
         editLinks: true,
-        lastUpdated: true,
-        serviceWorker: {
-            updatePopup: true,
-        },
+        search: false,
 
-        nav: [{ text: "Guide", link: "/" }, { text: "Rules", link: "/rules/" }],
+        nav: [
+            {
+                text: "Changelog",
+                link:
+                    "https://github.com/mysticatea/eslint-plugin-eslint-comments/releases",
+            },
+        ],
 
         sidebarDepth: 0,
         sidebar: {
-            "/rules/": [
+            "/": [
+                "/",
                 "/rules/",
                 ...withCategories.map(({ category, rules }) => ({
-                    title: category,
+                    title: `Rules in ${category}`,
                     collapsable: false,
-                    children: rules.map(rule => [
-                        `/rules/${rule.name}`,
-                        rule.id,
-                    ]),
+                    children: rules.map(rule => `/rules/${rule.name}`),
                 })),
             ],
-            "/": ["/", "/getting-started", "/rules/"],
+        },
+
+        plugins: {
+            "@vuepress/google-analytics": { ga: "UA-12936571-6" },
+            "@vuepress/last-updated": {},
+            "@vuepress/pwa": { updatePopup: true },
         },
     },
 

docs/.vuepress/override.styl renamed to docs/.vuepress/styles/index.styl

@@ -1,4 +1,2 @@
-$accentColor = #463fd4
-
 table a
   white-space nowrap

docs/.vuepress/styles/palette.styl

@@ -0,0 +1 @@
+$accentColor = #463fd4

docs/README.md

@@ -1,4 +1,4 @@
-# Introduction
+# Getting Started
 
 [![npm version](https://img.shields.io/npm/v/eslint-plugin-eslint-comments.svg)](https://www.npmjs.com/package/eslint-plugin-eslint-comments)
 [![Downloads/month](https://img.shields.io/npm/dm/eslint-plugin-eslint-comments.svg)](http://www.npmtrends.com/eslint-plugin-eslint-comments)
@@ -10,10 +10,47 @@ Additional ESLint rules for ESLint directive comments (e.g. `//eslint-disable-li
 
 ## 🏁 Goal
 
-The purpose of this plugin is to apply best practices on directive comments like `/* eslint-disable */`.
+The purpose of this plugin is to apply best practices on directive comments such as `/* eslint-disable */`.
 
 For example,
 
 - to disallow unused disabling.
 - to disallow non-effect enabling.
 - to require rule IDs for disabling and enabling.
+
+## 💿 Installation
+
+Use [npm](https://www.npmjs.com/) or a compatible tool.
+
+```console
+npm install --save-dev eslint eslint-plugin-eslint-comments
+```
+
+::: tip Requirements
+- Node.js `6.5.0` or newer.
+- ESLint `4.19.1` or newer.
+:::
+
+## 📖 Usage
+
+Configure your `.eslintrc.*` file.
+
+For example:
+
+```jsonc
+{
+    "extends": [
+        "eslint:recommended",
+        "plugin:eslint-comments/recommended"
+    ],
+    "rules": {
+        // Optional.
+        "eslint-comments/no-unused-disable": "error"
+    }
+}
+```
+
+::: tip
+The [eslint-comments/no-unused-disable](./rules/no-unused-disable.html) rule has the same effect as [--report-unused-disable-directives](https://eslint.org/docs/user-guide/command-line-interface#--report-unused-disable-directives) option.
+However, the `eslint-comments/no-unused-disable` rule is relatively useful since it can be configured in shareable configs.
+:::

docs/getting-started.md

@@ -1,4 +1,4 @@
-# All Rules
+# Available Rules
 
 - 🌟 mark: the rule which is enabled by `eslint-comments/recommended` preset.
 - ✒️ mark: the rule which is fixable by `eslint --fix` command.
@@ -11,7 +11,7 @@
 | [eslint-comments/<wbr>no-aggregating-enable](./no-aggregating-enable.html) | disallow a `eslint-enable` comment for multiple `eslint-disable` comments | 🌟 |
 | [eslint-comments/<wbr>no-duplicate-disable](./no-duplicate-disable.html) | disallow duplicate `eslint-disable` comments | 🌟 |
 | [eslint-comments/<wbr>no-unlimited-disable](./no-unlimited-disable.html) | disallow `eslint-disable` comments without rule names | 🌟 |
-| [eslint-comments/<wbr>no-unused-disable](./no-unused-disable.html) | disallow unused `eslint-disable` comments |  |
+| [eslint-comments/<wbr>no-unused-disable](./no-unused-disable.html) | disallow unused `eslint-disable` comments | ✒️ |
 | [eslint-comments/<wbr>no-unused-enable](./no-unused-enable.html) | disallow unused `eslint-enable` comments | 🌟 |
 
 ## Stylistic Issues

docs/rules/README.md

@@ -1,4 +1,6 @@
-# require a `eslint-enable` comment for every `eslint-disable` comment (eslint-comments/disable-enable-pair)
+# eslint-comments/disable-enable-pair
+
+> require a `eslint-enable` comment for every `eslint-disable` comment
 
 - 🌟 The `"extends": "plugin:eslint-comments/recommended"` property in a configuration file enables this rule.
 

docs/rules/disable-enable-pair.md

@@ -1,11 +1,14 @@
-# disallow a `eslint-enable` comment for multiple `eslint-disable` comments (eslint-comments/no-aggregating-enable)
+# eslint-comments/no-aggregating-enable
+
+> disallow a `eslint-enable` comment for multiple `eslint-disable` comments
 
 - 🌟 The `"extends": "plugin:eslint-comments/recommended"` property in a configuration file enables this rule.
 
 `eslint-enable` directive-comments can enable rules which are disabled by different `eslint-disable` directive-comments.
 It can enable a rule unintentionally.
 
 ```js
+/*eslint-disable no-undef */
 f()
 /*eslint-disable no-var */
 var a

docs/rules/no-aggregating-enable.md

@@ -1,4 +1,6 @@
-# disallow duplicate `eslint-disable` comments (eslint-comments/no-duplicate-disable)
+# eslint-comments/no-duplicate-disable
+
+> disallow duplicate `eslint-disable` comments
 
 - 🌟 The `"extends": "plugin:eslint-comments/recommended"` property in a configuration file enables this rule.