ESLint plugin for Scoped CSS in Vue.js (#2)

Author: ota-meshi

.eslintignore

@@ -0,0 +1,6 @@
+/.nyc_output
+/coverage
+/node_modules
+/assets
+/dist
+/docs/.vuepress/dist

.eslintrc.js

@@ -0,0 +1,85 @@
+"use strict"
+
+const version = require("./package.json").version
+
+module.exports = {
+ parserOptions: {
+ sourceType: "script",
+ ecmaVersion: 2018,
+ },
+ extends: [
+ "plugin:@mysticatea/es2015",
+ "plugin:@mysticatea/+node",
+ "plugin:@mysticatea/+eslint-plugin",
+ ],
+ rules: {
+ 'require-jsdoc': 'error',
+ "no-warning-comments": "warn",
+ 'no-lonely-if': 'off'
+ },
+ overrides: [
+ {
+ files: ["*.ts"],
+ rules: {
+ "@mysticatea/ts/no-require-imports": "off",
+ "@mysticatea/ts/no-var-requires": "off",
+ "no-implicit-globals": "off",
+ },
+ parserOptions: {
+ sourceType: "module",
+ project: "./tsconfig.json",
+ },
+ },
+ {
+ files: ["lib/rules/**"],
+ rules: {
+ "@mysticatea/eslint-plugin/report-message-format": ["error", "[^a-z].*\\.$"],
+ "@mysticatea/eslint-plugin/require-meta-docs-url": [
+ "error",
+ {
+ pattern: `https://github.com/ota-meshi/eslint-plugin-vue-scoped-css/blob/v${version}/docs/rules/{{name}}.md`,
+ },
+ ],
+ }
+ },
+ {
+ files: ["scripts/*.js", "tests/**/*.js", "scripts/*.ts", "tests/**/*.ts"],
+ rules: {
+ "require-jsdoc": "off",
+ "no-console": "off"
+ },
+ },
+ {
+ files: ["*.vue"],
+ parserOptions: {
+ sourceType: "module",
+ },
+ extends: [
+ // "plugin:vue-scoped-css/recommended"
+ ],
+ globals:{
+ require: true
+ },
+ },
+ {
+ files: ["docs/.vuepress/**"],
+ parserOptions: {
+ sourceType: "module",
+ ecmaVersion: 2019,
+ parser: 'babel-eslint'
+ },
+ globals: {
+ window: true
+ },
+ rules: {
+ "require-jsdoc": "off",
+ "@mysticatea/vue/html-closing-bracket-newline": "off",
+ "@mysticatea/vue/max-attributes-per-line": "off",
+ "@mysticatea/vue/comma-dangle": "off",
+ "@mysticatea/vue/html-indent": "off",
+ "@mysticatea/vue/html-self-closing": "off",
+ "@mysticatea/node/no-unsupported-features/es-syntax": "off"
+ },
+ },
+ ],
+}

.gitignore

@@ -1 +1,12 @@
-node_modules
+/node_modules
+/docs/.vuepress/dist
+/dist
+/.nyc_output
+/coverage
+
+# gh-pages
+/assets
+/rules
+/playground
+/404.html
+/index.html

.travis.yml

@@ -0,0 +1,27 @@
+language: node_js
+cache:
+ npm: false
+matrix:
+ include:
+ - node_js: "node"
+ env: CI=coverage
+ - node_js: "8"
+ - node_js: "8"
+ env: DEPS=low
+ - node_js: "10"
+ - node_js: "12"
+before_install:
+ - if [ "$DEPS" = "low" ]; then npm i -S eslint@5.0.0 eslint-plugin-vue@5.0.0 vue-eslint-parser@5.0.0; fi
+before_deploy:
+ - npm run build
+deploy:
+ skip_cleanup: true
+ provider: npm
+ email: $EMAIL
+ api_key: $NPM_TOKEN
+ on:
+ tags: true
+notifications:
+ email: false
+after_success:
+ - if [ "$CI" = "coverage" ]; then npm install coveralls --no-save && cat ./coverage/lcov.info | ./node_modules/.bin/coveralls

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+ "eslint.validate": [
+ "javascript",
+ "javascriptreact",
+ { "language": "vue", "autoFix": true },
+ { "autoFix": true, "language": "typescript" },
+ ],
+ "typescript.validate.enable": true,
+ "javascript.validate.enable": false,
+ "eslint.autoFixOnSave": true,
+ "eslint.workingDirectories": [
+ {"directory": "./", "changeProcessCWD": true },
+ {"directory": "./docs/.vuepress", "changeProcessCWD": true }
+ ],
+ "vetur.validation.script": false,
+ "vetur.validation.style": false,
+ "css.validate": false,
+ "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -0,0 +1,123 @@
+# eslint-plugin-vue-scoped-css
+
+[eslint-plugin-vue-scoped-css](https://www.npmjs.com/package/eslint-plugin-vue-scoped-css) is ESLint plugin for [Scoped CSS in Vue.js].
+
+[![NPM license](https://img.shields.io/npm/l/eslint-plugin-vue-scoped-css.svg)](https://www.npmjs.com/package/eslint-plugin-vue-scoped-css)
+[![NPM version](https://img.shields.io/npm/v/eslint-plugin-vue-scoped-css.svg)](https://www.npmjs.com/package/eslint-plugin-vue-scoped-css)
+[![NPM downloads](https://img.shields.io/badge/dynamic/json.svg?label=downloads&colorB=green&suffix=/day&query=$.downloads&uri=https://api.npmjs.org//downloads/point/last-day/eslint-plugin-vue-scoped-css&maxAge=3600)](http://www.npmtrends.com/eslint-plugin-vue-scoped-css)
+[![NPM downloads](https://img.shields.io/npm/dw/eslint-plugin-vue-scoped-css.svg)](http://www.npmtrends.com/eslint-plugin-vue-scoped-css)
+[![NPM downloads](https://img.shields.io/npm/dm/eslint-plugin-vue-scoped-css.svg)](http://www.npmtrends.com/eslint-plugin-vue-scoped-css)
+[![NPM downloads](https://img.shields.io/npm/dy/eslint-plugin-vue-scoped-css.svg)](http://www.npmtrends.com/eslint-plugin-vue-scoped-css)
+[![NPM downloads](https://img.shields.io/npm/dt/eslint-plugin-vue-scoped-css.svg)](http://www.npmtrends.com/eslint-plugin-vue-scoped-css)
+<!--
+[![Build Status](https://travis-ci.org/ota-meshi/eslint-plugin-vue-scoped-css.svg?branch=master)](https://travis-ci.org/ota-meshi/eslint-plugin-vue-scoped-css)
+[![Coverage Status](https://coveralls.io/repos/github/ota-meshi/eslint-plugin-vue-scoped-css/badge.svg?branch=master)](https://coveralls.io/github/ota-meshi/eslint-plugin-vue-scoped-css?branch=master)
+[![Greenkeeper badge](https://badges.greenkeeper.io/ota-meshi/eslint-plugin-vue-scoped-css.svg)](https://greenkeeper.io/)
+-->
+
+## Features
+
+This ESLint plugin provides linting rules specific to [Scoped CSS in Vue.js].
+
+You can check on the [Online DEMO](https://ota-meshi.github.io/eslint-plugin-vue-scoped-css/playground/).
+
+<!--DOCS_IGNORE_START-->
+
+## Documentation
+
+See [documents](https://ota-meshi.github.io/eslint-plugin-vue-scoped-css/).
+
+<!--DOCS_IGNORE_END-->
+
+## 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-warning-html-comments': 'error'
+ }
+}
+```
+
+## Configs
+
+This plugin provides 3 predefined configs:
+
+- `plugin:vue-scoped-css/base` - Settings and rules to enable correct ESLint parsing
+- `plugin:vue-scoped-css/recommended` - Above, plus rules to improve code experience
+- `plugin:vue-scoped-css/all` - All rules of this plugin are included
+
+## Rules
+
+<!--RULES_SECTION_START-->
+
+The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) automatically fixes problems reported by rules which have a wrench :wrench: below.
+
+<!--RULES_TABLE_START-->
+
+### Base Rules (Enabling Correct ESLint Parsing)
+
+Enable this plugin using with:
+
+```json
+{
+ "extends": "plugin:vue-scoped-css/base"
+}
+```
+
+### Recommended (Improve Development Experience)
+
+Enforce all the rules in this category with:
+
+```json
+{
+ "extends": "plugin:vue-scoped-css/recommended"
+}
+```
+
+| | Rule ID | Description |
+|:---|:--------|:------------|
+| | [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>`. |
+
+<!--RULES_TABLE_END-->
+<!--RULES_SECTION_END-->
+
+## 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. 
+
+## License
+
+See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
+
+[Scoped CSS in Vue.js]: https://vue-loader.vuejs.org/guide/scoped-css.html

docs/.vuepress/categories.js

@@ -0,0 +1,38 @@
+const { rules } = require("../../dist/utils/rules")
+
+const categoryTitles = {
+ base: "Base Rules (Enabling Correct ESLint Parsing)",
+ recommended: "Recommended (Improve Development Experience)",
+}
+
+const categoryConfigDescriptions = {
+ base: "Enable this plugin using with:",
+ recommended: "Enforce all the rules in this category with:",
+}
+
+const categoryIds = Object.keys(categoryTitles)
+const categoryRules = rules.reduce((obj, rule) => {
+ const cat = rule.meta.docs.category || "uncategorized"
+ const categories = obj[cat] || (obj[cat] = [])
+ categories.push(rule)
+ return obj
+}, {})
+
+// Throw if no title is defined for a category
+for (const categoryId of Object.keys(categoryRules)) {
+ if (categoryId !== "uncategorized" && !categoryTitles[categoryId]) {
+ throw new Error(
+ `Category "${categoryId}" does not have a title defined.`
+ )
+ }
+}
+
+module.exports = categoryIds.map(categoryId => ({
+ categoryId,
+ title: categoryTitles[categoryId],
+ configDescription: categoryConfigDescriptions[categoryId],
+ rules: (categoryRules[categoryId] || []).filter(
+ rule => !rule.meta.deprecated
+ ),
+}))
+// .filter(category => category.rules.length >= 1)