Skip to content

Commit

Permalink
add recommended eslint config (#170)
Browse files Browse the repository at this point in the history
* add recommended eslint config

* fix exports bugs

* update CHANGELOG

* add demo to related links
  • Loading branch information
amilajack committed Mar 22, 2019
1 parent edb7b1e commit a8e75f8
Show file tree
Hide file tree
Showing 7 changed files with 827 additions and 589 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
@@ -1,3 +1,7 @@
## v4.1.0
### Added
- Recommended config 🎉

## v4.0.0
### Fixed
- Fix Flow `>= v0.71` on Windows
Expand Down
87 changes: 14 additions & 73 deletions README.md
Expand Up @@ -7,77 +7,36 @@ eslint-plugin-flowtype-errors
[![npm](https://img.shields.io/npm/dm/eslint-plugin-flowtype-errors.svg)](https://npm-stat.com/charts.html?package=eslint-plugin-flowtype-errors)

## Demo
![ESLint Flow Demo](https://github.com/amilajack/eslint-plugin-flowtype-errors/blob/master/flow-demo.gif?raw=true)

*NOTE:* This demo is using Atom and the packages `linter`, `linter-eslint`, `language-babel`
![ESLint Flow Demo](https://github.com/amilajack/eslint-plugin-flowtype-errors/blob/master/flow-demo.gif?raw=true)

## Why?

* **Lower barrier:** Any editor that has ESLint support now supports Flow 🎉
* **Less editor configuration:** No need to change your entire workflow to incorporate flow. No multiple-linters-per-file nonsense.
* **Simple:** Its literally just an ESLint rule! Just install the dependency, add a flowconfig, and you're good to go!

## Getting Started

This guide assumes that you have installed eslint, babel, babel-plugin-transform-flow-strip-types and configured flow. Check out the [from-scratch guide](https://github.com/amilajack/eslint-plugin-flowtype-errors/wiki/Getting-Started) for the full guide on getting started.

⚠️ Make sure the 64-bit version of your texteditor/IDE. For atom, [see this comment](https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/40#issuecomment-275983387)
⚠️ Make sure the 64-bit version of your text editor or IDE. For atom, [see this comment](https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/40#issuecomment-275983387)

**Step 1. Install**
### **1. Install**

```bash
npm install --save-dev eslint-plugin-flowtype-errors
```

**Step 2. Configure**

Add this line to the 'rules' section of your `.eslintrc` to report flow errors.
```js
"flowtype-errors/show-errors": "error"
```

Add this line to the 'rules' section of your `.eslintrc` to report flow warnings.
```js
"flowtype-errors/show-warnings": "warn"
```
Note that flow won't report warnings unless you add this setting to your `.flowconfig`:
```toml
[options]
include_warnings=true
```

Add this line to the 'rules' section of your `.eslintrc` to enforce a minimum percentage of flow coverage per file (optional). Here's an example of enforcing a converage of at least 50%:
```js
"flowtype-errors/enforce-min-coverage": ["error", 50]
```
### **2. Configure**

Add this line to the 'plugins' section of your `.eslintrc`
```js
"flowtype-errors"
Extend the recommended config:
```jsonc
{
"extends": ["plugin:flowtype-errors/recommended"]
}
```

Add the `@flow` pragma to files that you want to lint
Also make sure that your `.flowconfig` is in the root of your project directory
```js
/**
* @flow
*/
```

**Step 3. Settings (optional)**

Add this line to the 'settings' section of your `.eslintrc` to force the Flow server to stop after it finishes checking types.

```js
"settings": {
"flowtype-errors": {
"stopOnExit": true
}
},
```

**Step 4. Lint**

Run `eslint` and you're all set!

## Support

If this project is saving you (or your team) time, please consider supporting it on Patreon 👍 thank you!
Expand All @@ -89,29 +48,11 @@ If this project is saving you (or your team) time, please consider supporting it
</p>

## CI Configuration
**Flow is supported on all OS's except Windows 32bit. Add [this line](https://github.com/amilajack/eslint-plugin-flowtype-errors/blob/master/appveyor.yml#L12) to appveyor to make tests run properly.**

## Editor Configuration
### Atom
```bash
apm install linter linter-eslint language-babel
```

### Sublime
* https://github.com/SublimeLinter/SublimeLinter3
* https://github.com/roadhump/SublimeLinter-eslint
* https://github.com/babel/babel-sublime

### Others
http://eslint.org/docs/user-guide/integrations#editors
Flow is supported on all OS's except Windows 32bit. Add [this line](https://github.com/amilajack/eslint-plugin-flowtype-errors/blob/master/appveyor.yml#L12) to appveyor to make tests run properly.

## Planned Implementations
* Add more extensive tests
* Allow passing arguments to flow binary
* Run flow minimal amount of times for faster linting
* Custom formatting of flow error messages
* Enable rules to allow and disallow specific flow errors
## Related:

## Related flow tools:
* [flow-runtime](https://github.com/codemix/flow-runtime)
* [eslint-plugin-flowtype](https://github.com/gajus/eslint-plugin-flowtype)
* [eslint-plugin-flowtype-errors-demo](https://github.com/amilajack/eslint-plugin-flowtype-errors-demo)
20 changes: 10 additions & 10 deletions package.json
Expand Up @@ -30,24 +30,24 @@
"dist"
],
"dependencies": {
"@babel/runtime": "^7.3.4",
"@babel/runtime": "^7.4.2",
"find-up": "^3.0.0",
"slash": "^2.0.0"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.3.4",
"@babel/plugin-proposal-class-properties": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-flow": "^7.0.0",
"@babel/register": "^7.0.0",
"@babel/register": "^7.4.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.1.0",
"babel-jest": "^24.5.0",
"chai": "^4.2.0",
"cross-env": "^5.2.0",
"cross-spawn": "^6.0.5",
"eslint": "5.14.1",
"eslint": "5.15.3",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-formatter-pretty": "^2.1.1",
Expand All @@ -57,11 +57,11 @@
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-vue": "^5.2.2",
"execa": "^1.0.0",
"flow-bin": "0.93.0",
"flow-bin": "0.95.1",
"husky": "^1.3.1",
"jest-cli": "^24.1.0",
"jest-cli": "^24.5.0",
"prettier": "^1.16.4",
"regenerator-runtime": "^0.13.1"
"regenerator-runtime": "^0.13.2"
},
"peerDependencies": {
"eslint": ">=4.0.0",
Expand Down
6 changes: 6 additions & 0 deletions src/config/recommended.js
@@ -0,0 +1,6 @@
export default {
plugins: ['flowtype-errors'],
rules: {
'flowtype-errors/show-errors': 'error'
}
};
4 changes: 4 additions & 0 deletions src/index.js
Expand Up @@ -4,6 +4,7 @@ import path from 'path';
import fs from 'fs';
// $FlowIgnore
import findUp from 'find-up';
import recommended from './config/recommended';
import {
type CollectOutputElement,
FlowSeverity,
Expand Down Expand Up @@ -153,6 +154,9 @@ function createFilteredErrorRule(filter: CollectOutputElement => any) {
}

export default {
configs: {
recommended
},
rules: {
'enforce-min-coverage': function enforceMinCoverage(
context: EslintContext
Expand Down
4 changes: 2 additions & 2 deletions test/__snapshots__/format.spec.js.snap
Expand Up @@ -130,7 +130,7 @@ exports[`Check codebases project-1 - eslint should give expected output 1`] = `
./9.example.js
8:18 error Cannot create \`Hello\` element because property \`name\` is missing in props but exists in object type (see ./9.example.import.js:6) flowtype-errors/show-errors
8:28 error Cannot call \`ReactDOM.render\` with \`document.getElementById(...)\` bound to \`container\` because null (see https://github.com/facebook/flow/blob/v0.93.0/lib/dom.js#L783) is incompatible with \`Element\` (see https://github.com/facebook/flow/blob/v0.93.0/lib/react-dom.js#L18) flowtype-errors/show-errors
8:28 error Cannot call \`ReactDOM.render\` with \`document.getElementById(...)\` bound to \`container\` because null (see https://github.com/facebook/flow/blob/v0.95.1/lib/dom.js#L785) is incompatible with \`Element\` (see https://github.com/facebook/flow/blob/v0.95.1/lib/react-dom.js#L18) flowtype-errors/show-errors
✖ 21 problems (21 errors, 0 warnings)
Expand Down Expand Up @@ -600,7 +600,7 @@ Array [
"offset": 170,
},
},
"message": "Cannot call \`ReactDOM.render\` with \`document.getElementById(...)\` bound to \`container\` because null (see https://github.com/facebook/flow/blob/v0.93.0/lib/dom.js#L783) is incompatible with \`Element\` (see https://github.com/facebook/flow/blob/v0.93.0/lib/react-dom.js#L18).",
"message": "Cannot call \`ReactDOM.render\` with \`document.getElementById(...)\` bound to \`container\` because null (see https://github.com/facebook/flow/blob/v0.95.1/lib/dom.js#L785) is incompatible with \`Element\` (see https://github.com/facebook/flow/blob/v0.95.1/lib/react-dom.js#L18).",
"start": 9,
"type": "default",
},
Expand Down

0 comments on commit a8e75f8

Please sign in to comment.