Skip to content

Simplify configuration #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Jun 14, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
lib/recommended-rules.js
23 changes: 23 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
module.exports = {
root: true,
parserOptions: {
ecmaVersion: 6
},
env: {
node: true,
mocha: true
},
extends: [
'plugin:eslint-plugin/recommended',
'plugin:vue-libs/recommended'
],
plugins: [
'eslint-plugin'
],
rules: {
'complexity': 'off',
'eslint-plugin/report-message-format': ['error', '^[A-Z].*\\.$'],
'eslint-plugin/prefer-placeholders': 'error',
'eslint-plugin/consistent-output': 'error'
}
}
17 changes: 0 additions & 17 deletions .eslintrc.json

This file was deleted.

10 changes: 0 additions & 10 deletions .travis.yml

This file was deleted.

170 changes: 87 additions & 83 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,126 +1,130 @@
# eslint-plugin-vue

[![NPM version](https://img.shields.io/npm/v/eslint-plugin-vue.svg?style=flat)](https://npmjs.org/package/eslint-plugin-vue)
[![NPM downloads](https://img.shields.io/npm/dm/eslint-plugin-vue.svg?style=flat)](https://npmjs.org/package/eslint-plugin-vue)
[![CircleCI](https://circleci.com/gh/vuejs/eslint-plugin-vue.svg?style=svg)](https://circleci.com/gh/vuejs/eslint-plugin-vue)

> Official ESLint plugin for Vue.js

## 💿 Installation
## :exclamation: Requirements

- [ESLint](http://eslint.org/) `>=3.18.0`.
- Node.js `>=4.0.0`

Use [npm](https://www.npmjs.com/).
## :cd: Installation

```
> npm install --save-dev eslint eslint-plugin-vue
npm install --save-dev eslint eslint-plugin-vue
```

- Requires Node.js `^4.0.0 || >=6.0.0`
- Requires ESLint `>=3.18.0`

## 📖 Usage
## :rocket: Usage

Write `.eslintrc.*` file to configure rules. See also: http://eslint.org/docs/user-guide/configuring
Create `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).

**.eslintrc.json** (An example)
Example **.eslintrc.js**:

```json
{
"plugins": ["vue"],
"extends": ["eslint:recommended", "plugin:vue/recommended"],
"rules": {
"vue/html-quotes": ["error", "double"],
"vue/v-bind-style": ["error", "shorthand"],
"vue/v-on-style": ["error", "shorthand"]
}
```javascript
module.exports = {
extends: [
'eslint:recommended',
'plugin:vue/recommended' // or 'plugin:vue/base'
],
rules: {
// override/add rules' settings here
'vue/no-invalid-v-if': 'error'
}
}
```

## 💡 Rules
## ⚙ Configs

- ⭐️ the mark of a recommended rule.
- ✒️ the mark of a fixable rule.
This plugin provides two predefined configs:
- `plugin:vue/base` - contains necessary settings for this plugin to work properly
- `plugin:vue/recommended` - extends base config with recommended rules (the ones with check mark :white_check_mark: in the table below)

<!--RULES_TABLE_START-->
### Possible Errors
## :bulb: Rules

| | Rule ID | Description |
|:---|:--------|:------------|
| ⭐️ | [no-invalid-template-root](./docs/rules/no-invalid-template-root.md) | disallow invalid template root. |
| ⭐️ | [no-invalid-v-bind](./docs/rules/no-invalid-v-bind.md) | disallow invalid v-bind directives. |
| ⭐️ | [no-invalid-v-cloak](./docs/rules/no-invalid-v-cloak.md) | disallow invalid v-cloak directives. |
| ⭐️ | [no-invalid-v-else-if](./docs/rules/no-invalid-v-else-if.md) | disallow invalid v-else-if directives. |
| ⭐️ | [no-invalid-v-else](./docs/rules/no-invalid-v-else.md) | disallow invalid v-else directives. |
| ⭐️ | [no-invalid-v-for](./docs/rules/no-invalid-v-for.md) | disallow invalid v-for directives. |
| ⭐️ | [no-invalid-v-html](./docs/rules/no-invalid-v-html.md) | disallow invalid v-html directives. |
| ⭐️ | [no-invalid-v-if](./docs/rules/no-invalid-v-if.md) | disallow invalid v-if directives. |
| ⭐️ | [no-invalid-v-model](./docs/rules/no-invalid-v-model.md) | disallow invalid v-model directives. |
| ⭐️ | [no-invalid-v-on](./docs/rules/no-invalid-v-on.md) | disallow invalid v-on directives. |
| ⭐️ | [no-invalid-v-once](./docs/rules/no-invalid-v-once.md) | disallow invalid v-once directives. |
| ⭐️ | [no-invalid-v-pre](./docs/rules/no-invalid-v-pre.md) | disallow invalid v-pre directives. |
| ⭐️ | [no-invalid-v-show](./docs/rules/no-invalid-v-show.md) | disallow invalid v-show directives. |
| ⭐️ | [no-invalid-v-text](./docs/rules/no-invalid-v-text.md) | disallow invalid v-text directives. |
| ⭐️ | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>`. |
Rules are grouped by category to help you understand their purpose.

No rules are enabled by `plugin:vue/base` config. The `plugin:vue/recommended` config enables rules that report common problems, which have a check mark :white_check_mark: below.

The `--fix` option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.

<!--RULES_TABLE_START-->

### Best Practices

| | Rule ID | Description |
|:---|:--------|:------------|
| ⭐️✒️ | [html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style. |
| ⭐️✒️ | [html-no-self-closing](./docs/rules/html-no-self-closing.md) | disallow self-closing elements. |
| ⭐️ | [no-confusing-v-for-v-if](./docs/rules/no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element. |
| ⭐️ | [no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplicate arguments. |
| ⭐️ | [no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>`. |
| ⭐️ | [require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements. |
| ⭐️ | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives. |
| :wrench: | [html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style. |
| :white_check_mark::wrench: | [html-no-self-closing](./docs/rules/html-no-self-closing.md) | disallow self-closing elements. |
| :white_check_mark: | [no-confusing-v-for-v-if](./docs/rules/no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element. |
| | [no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplicate arguments. |
| :white_check_mark: | [no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>`. |
| :white_check_mark: | [require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements. |
| :white_check_mark: | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives. |


### Stylistic Issues

| | Rule ID | Description |
|:---|:--------|:------------|
| | [html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes. |
| ✒️ | [v-bind-style](./docs/rules/v-bind-style.md) | enforce v-bind directive style. |
| ✒️ | [v-on-style](./docs/rules/v-on-style.md) | enforce v-on directive style. |
| :wrench: | [v-bind-style](./docs/rules/v-bind-style.md) | enforce v-bind directive style. |
| :wrench: | [v-on-style](./docs/rules/v-on-style.md) | enforce v-on directive style. |

<!--RULES_TABLE_END-->

## ⚙ Configs
### Variables

This plugin provides `plugin:vue/recommended` preset config.
This preset config:
| | Rule ID | Description |
|:---|:--------|:------------|
| :white_check_mark: | [jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | Prevent variables used in JSX to be marked as unused |

- adds `parser: "vue-eslint-parser"`
- enables rules which are given ⭐️ in the above table.

## ⚓️ Semantic Versioning Policy
### Possible Errors

| | Rule ID | Description |
|:---|:--------|:------------|
| :white_check_mark: | [no-invalid-template-root](./docs/rules/no-invalid-template-root.md) | disallow invalid template root. |
| :white_check_mark: | [no-invalid-v-bind](./docs/rules/no-invalid-v-bind.md) | disallow invalid v-bind directives. |
| :white_check_mark: | [no-invalid-v-cloak](./docs/rules/no-invalid-v-cloak.md) | disallow invalid v-cloak directives. |
| :white_check_mark: | [no-invalid-v-else-if](./docs/rules/no-invalid-v-else-if.md) | disallow invalid v-else-if directives. |
| :white_check_mark: | [no-invalid-v-else](./docs/rules/no-invalid-v-else.md) | disallow invalid v-else directives. |
| :white_check_mark: | [no-invalid-v-for](./docs/rules/no-invalid-v-for.md) | disallow invalid v-for directives. |
| :white_check_mark: | [no-invalid-v-html](./docs/rules/no-invalid-v-html.md) | disallow invalid v-html directives. |
| :white_check_mark: | [no-invalid-v-if](./docs/rules/no-invalid-v-if.md) | disallow invalid v-if directives. |
| :white_check_mark: | [no-invalid-v-model](./docs/rules/no-invalid-v-model.md) | disallow invalid v-model directives. |
| :white_check_mark: | [no-invalid-v-on](./docs/rules/no-invalid-v-on.md) | disallow invalid v-on directives. |
| :white_check_mark: | [no-invalid-v-once](./docs/rules/no-invalid-v-once.md) | disallow invalid v-once directives. |
| :white_check_mark: | [no-invalid-v-pre](./docs/rules/no-invalid-v-pre.md) | disallow invalid v-pre directives. |
| :white_check_mark: | [no-invalid-v-show](./docs/rules/no-invalid-v-show.md) | disallow invalid v-show directives. |
| :white_check_mark: | [no-invalid-v-text](./docs/rules/no-invalid-v-text.md) | disallow invalid v-text directives. |
| :white_check_mark: | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>`. |

<!--RULES_TABLE_END-->

`eslint-plugin-vue` follows [semantic versioning](http://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
## :anchor: Semantic Versioning Policy

- Patch release (intended to not break your lint build)
- A bug fix in a rule that results in it reporting fewer errors.
- Improvements to documentation.
- Non-user-facing changes such as refactoring code, adding, deleting, or modifying tests, and increasing test coverage.
- Re-releasing after a failed release (i.e., publishing a release that doesn't work for anyone).
- Minor release (might break your lint build)
- A bug fix in a rule that results in it reporting more errors.
- A new rule is created.
- A new option to an existing rule is created.
- An existing rule is deprecated.
- Major release (likely to break your lint build)
- A support for old Node version is dropped.
- A support for old ESLint version is dropped.
- An existing rule is changed in it reporting more errors.
- An existing rule is removed.
- An existing option of a rule is removed.
- An existing config is updated.
This plugin follows [semantic versioning](http://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).

## 📰 Changelog
## :newspaper: Changelog

- [GitHub Releases](https://github.com/vuejs/eslint-plugin-vue/releases)
We're using [GitHub Releases](https://github.com/vuejs/eslint-plugin-vue/releases).

## 💎 Contributing
## :beers: Contribution guide

Welcome contributing!
In order to add a new rule, you should:
- Create issue on GH with description of proposed rule
- Generate a new rule using the [official yeoman generator](https://github.com/eslint/generator-eslint)
- Run `npm start`
- Write test scenarios & implement logic
- Describe the rule in the generated `docs` file
- Make sure all tests are passing
- Run `npm run update` in order to update readme and recommended configuration
- Create PR and link created issue in description

Please use GitHub's Issues/PRs.
We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new [issue](https://github.com/vuejs/eslint-plugin-vue/issues), but first please make sure your question does not repeat previous ones.

### Development Tools
## :lock: License

- `npm test` runs tests and measures coverage.
- `npm run coverage` shows the coverage result of `npm test` command.
- `npm run clean` removes the coverage result of `npm test` command.
See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
15 changes: 15 additions & 0 deletions circle.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
machine:
node:
version: 4

dependencies:
pre:
- nvm install 7
- nvm install 8

test:
override:
- npm test
- nvm use 6 && npm test
- nvm use 7 && npm test
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think good if we use 8 instead of 7.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can add 8 additionally. These tests run pretty fast and we'll be sure it's actually bulletproof.

- nvm use 8 && npm test
22 changes: 22 additions & 0 deletions config/base.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
module.exports = {
root: true,

parser: 'vue-eslint-parser',

parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},

env: {
browser: true,
es6: true
},

plugins: [
'vue'
]
}
4 changes: 4 additions & 0 deletions config/recommended.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
extends: require.resolve('./base.js'),
rules: require('../lib/recommended-rules.js')
}
28 changes: 28 additions & 0 deletions docs/rules/jsx-uses-vars.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# Prevent variables used in JSX to be marked as unused (jsx-uses-vars)

Since 0.17.0 the ESLint `no-unused-vars` rule does not detect variables used in JSX ([see details](http://eslint.org/blog/2015/03/eslint-0.17.0-released#changes-to-jsxreact-handling)).
This rule will find variables used in JSX and mark them as used.

This rule only has an effect when the `no-unused-vars` rule is enabled.

## Rule Details

Without this rule this code triggers warning:

```js
import Hello from './Hello';

export default {
render () {
return (
<Hello msg="world"></Hello>
)
},
};
```

After turning on, `Hello` is being marked as used and `no-unused-vars` rule doesn't report an issue.

## When Not To Use It

If you are not using JSX or if you do not use the `no-unused-vars` rule then you can disable this rule.
12 changes: 12 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
'use strict'

const resolve = require('path').resolve
const requireIndex = require('requireindex')

const rules = requireIndex(resolve(__dirname, 'lib/rules'))
const configs = requireIndex(resolve(__dirname, 'config'))

module.exports = {
rules,
configs
}
11 changes: 0 additions & 11 deletions lib/index.js

This file was deleted.

Loading