Update documents (#12)

Author: ota-meshi

.eslintrc.js

@@ -34,12 +34,10 @@ module.exports = {
             files: ["lib/rules/**"],
             rules: {
                 "@mysticatea/eslint-plugin/report-message-format": ["error", "[^a-z].*\\.$"],
-                "@mysticatea/eslint-plugin/require-meta-docs-url": [
-                    "error",
-                    {
-                        pattern: `https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/{{name}}.html`,
-                    },
-                ],
+                "require-meta-docs-url": ["warn", {
+                    pattern: `https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/{{name}}.html`,
+                }],
+                "@mysticatea/eslint-plugin/require-meta-docs-url":  "off",
             }
         },
         {

.vscode/settings.json

@@ -5,6 +5,9 @@
     { "language": "vue", "autoFix": true },
     { "autoFix": true, "language": "typescript" },
   ],
+  "eslint.options": {
+    "rulePaths": ["eslint-internal-rules"]
+  },
   "typescript.validate.enable": true,
   "javascript.validate.enable": false,
   "eslint.autoFixOnSave": true,

README.md

@@ -17,10 +17,12 @@
 
 ## Features
 
-This ESLint plugin provides linting rules specific to [Scoped CSS in Vue.js].
+This ESLint plugin provides linting rules relate to better ways to help you avoid problems when using [Scoped CSS in Vue.js].
 
-- Enforce best practices for Scoped CSS.
-- Supports CSS and SCSS syntax.
+- Provides linting rules for Scoped CSS.
+- Supports CSS syntax including level 4 selectors.
+- Supports `<style lang="scss">`.
+- Parses `<style>`, `<template>` and `<script>` blocks.
 
 You can check on the [Online DEMO](https://future-architect.github.io/eslint-plugin-vue-scoped-css/playground/).
 
@@ -30,16 +32,23 @@ You can check on the [Online DEMO](https://future-architect.github.io/eslint-plu
 
 See [documents](https://future-architect.github.io/eslint-plugin-vue-scoped-css/).
 
-<!--DOCS_IGNORE_END-->
-
 ## Installation
 
 ```bash
-npm install --save-dev eslint-plugin-vue-scoped-css
+npm install --save-dev eslint eslint-plugin-vue-scoped-css
 ```
 
+> **Requirements**
+> 
+> - ESLint v5.0.0 and above
+> - Node.js v8.10.0 and above
+
+<!--DOCS_IGNORE_END-->
+
 ## Usage
 
+<!--USAGE_SECTION_START-->
+
 Create `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).
 
 Example **.eslintrc.js**:
@@ -66,6 +75,8 @@ This plugin provides 3 predefined configs:
 - `plugin:vue-scoped-css/recommended` - Above, plus rules for better ways to help you avoid problems
 - `plugin:vue-scoped-css/all` - All rules of this plugin are included
 
+<!--USAGE_SECTION_END-->
+
 ## Rules
 
 <!--RULES_SECTION_START-->
@@ -74,42 +85,47 @@ The `--fix` option on the [command line](https://eslint.org/docs/user-guide/comm
 
 <!--RULES_TABLE_START-->
 
-### Base Rules (Enabling Plugin)
+## Recommended
 
-Enable this plugin using with:
+Enforce all the rules in this category with:
 
 ```json
 {
-  "extends": "plugin:vue-scoped-css/base"
+  "extends": "plugin:vue-scoped-css/recommended"
 }
 ```
 
-### Recommended
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue-scoped-css/no-parsing-error](./no-parsing-error.md) | Disallow parsing errors in `<style>` |  |
+| [vue-scoped-css/no-unused-keyframes](./no-unused-keyframes.md) | Reports the `@keyframes` is not used in Scoped CSS. |  |
+| [vue-scoped-css/no-unused-selector](./no-unused-selector.md) | Reports selectors defined in Scoped CSS not used in `<template>`. |  |
+| [vue-scoped-css/require-scoped](./require-scoped.md) | Enforce the `<style>` tags to has the `scoped` attribute. |  |
 
-Enforce all the rules in this category with:
+## Uncategorized
+
+No preset enables the rules in this category.
+Please enable each rule if you want.
+
+For example:
 
 ```json
 {
-  "extends": "plugin:vue-scoped-css/recommended"
+  "rules": {
+    "vue-scoped-css/require-selector-used-inside": "error"
+  }
 }
 ```
 
-|    | Rule ID | Description |
-|:---|:--------|:------------|
-|  | [vue-scoped-css/no-parsing-error](./docs/rules/no-parsing-error.md) | Disallow parsing errors in `<style>` |
-|  | [vue-scoped-css/no-unused-keyframes](./docs/rules/no-unused-keyframes.md) | Reports the `@keyframes` is not used in Scoped CSS. |
-|  | [vue-scoped-css/no-unused-selector](./docs/rules/no-unused-selector.md) | Reports selectors defined in Scoped CSS not used in `<template>`. |
-|  | [vue-scoped-css/require-scoped](./docs/rules/require-scoped.md) | Enforce the `<style>` tags to has the `scoped` attribute. |
-
-### Uncategorized
-
-|    | Rule ID | Description |
-|:---|:--------|:------------|
-|  | [vue-scoped-css/require-selector-used-inside](./docs/rules/require-selector-used-inside.md) | Reports the defined selectors is not used inside `<template>`. |
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue-scoped-css/require-selector-used-inside](./require-selector-used-inside.md) | Reports the defined selectors is not used inside `<template>`. |  |
 
 <!--RULES_TABLE_END-->
 <!--RULES_SECTION_END-->
 
+<!--DOCS_IGNORE_START-->
+
 ## Contributing
 
 Welcome contributing!
@@ -121,6 +137,8 @@ Please use GitHub's Issues/PRs.
 - `npm test` runs tests and measures coverage.  
 - `npm run update` runs in order to update readme and recommended configuration.  
 
+<!--DOCS_IGNORE_END-->
+
 ## License
 
 See the [LICENSE](LICENSE) file for license rights and limitations (MIT).

docs/.vuepress/config.js

@@ -64,6 +64,8 @@ module.exports = {
         },
 
         nav: [
+            { text: "Introduction", link: "/" },
+            { text: "User Guide", link: "/user-guide/" },
             { text: "Rules", link: "/rules/" },
             { text: "Playground", link: "/playground/" },
         ],
@@ -90,7 +92,7 @@ module.exports = {
                 // Rules in no category.
                 ...extraCategories,
             ],
-            "/": ["/", "/rules/", "/playground/"],
+            "/": ["/", "/user-guide/", "/rules/", "/playground/"],
         },
     },
 }

docs/README.md

@@ -17,61 +17,22 @@
 
 ## Features
 
-This ESLint plugin provides linting rules specific to [Scoped CSS in Vue.js].
+This ESLint plugin provides linting rules relate to better ways to help you avoid problems when using [Scoped CSS in Vue.js].
 
-- Enforce best practices for Scoped CSS.
-- Supports CSS and SCSS syntax.
+- Provides linting rules for Scoped CSS.
+- Supports CSS syntax including level 4 selectors.
+- Supports `<style lang="scss">`.
+- Parses `<style>`, `<template>` and `<script>` blocks.
 
 You can check on the [Online DEMO](./playground/).
 
-## Installation
-
-```bash
-npm install --save-dev eslint-plugin-vue-scoped-css
-```
-
 ## Usage
 
-Create `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).
-
-Example **.eslintrc.js**:
-
-```js
-module.exports = {
-  extends: [
-    // add more generic rulesets here, such as:
-    // 'eslint:recommended',
-    'plugin:vue-scoped-css/recommended'
-  ],
-  rules: {
-    // override/add rules settings here, such as:
-    // 'vue-scoped-css/no-unused-selector': 'error'
-  }
-}
-```
-
-## Configs
-
-This plugin provides 3 predefined configs:
-
-- `plugin:vue-scoped-css/base` - Settings and rules to enable this plugin
-- `plugin:vue-scoped-css/recommended` - Above, plus rules for better ways to help you avoid problems
-- `plugin:vue-scoped-css/all` - All rules of this plugin are included
+See [User Guide](./user-guide/README.md).
 
 ## Rules
 
-[Available Rules](./rules/README.md).
-
-## Contributing
-
-Welcome contributing!
-
-Please use GitHub's Issues/PRs.
-
-### Development Tools
-
-- `npm test` runs tests and measures coverage.  
-- `npm run update` runs in order to update readme and recommended configuration.  
+See [Available Rules](./rules/README.md).
 
 ## License