-
-
Notifications
You must be signed in to change notification settings - Fork 206
Merge with eslint-plugin-prettify #21
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
Changes from all commits
3e983f1
bb912f4
e313bdd
3d757e6
8d9b6e7
484da18
f58b054
a0c8a0e
7ba59f6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| !.eslintrc.js |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,118 @@ | ||
| # eslint-plugin-prettier [](https://travis-ci.org/prettier/eslint-plugin-prettier) | ||
|
|
||
| Runs [prettier](https://github.com/jlongster/prettier) as an eslint rule | ||
| Runs [Prettier](https://github.com/prettier/prettier) as an [ESLint](http://eslint.org) rule and reports differences as individual ESLint issues. | ||
|
|
||
| ## Installation | ||
| ## Sample | ||
|
|
||
| You'll first need to install [ESLint](http://eslint.org): | ||
| ```js | ||
| error: Insert `,` (prettier/prettier) at pkg/commons-atom/ActiveEditorRegistry.js:22:25: | ||
| 20 | import { | ||
| 21 | observeActiveEditorsDebounced, | ||
| > 22 | editorChangesDebounced | ||
| | ^ | ||
| 23 | } from './debounced';; | ||
| 24 | | ||
| 25 | import {observableFromSubscribeFunction} from '../commons-node/event'; | ||
|
|
||
| ``` | ||
| $ npm install eslint --save-dev | ||
| ``` | ||
|
|
||
| Next, install `prettier`: | ||
| error: Delete `;` (prettier/prettier) at pkg/commons-atom/ActiveEditorRegistry.js:23:21: | ||
| 21 | observeActiveEditorsDebounced, | ||
| 22 | editorChangesDebounced | ||
| > 23 | } from './debounced';; | ||
| | ^ | ||
| 24 | | ||
| 25 | import {observableFromSubscribeFunction} from '../commons-node/event'; | ||
| 26 | import {cacheWhileSubscribed} from '../commons-node/observable'; | ||
|
|
||
| ``` | ||
| $ npm install prettier --save-dev | ||
|
|
||
| 2 errors found. | ||
| ``` | ||
|
|
||
| Finally, install `eslint-plugin-prettier`: | ||
| > `./node_modules/.bin/eslint --format codeframe pkg/commons-atom/ActiveEditorRegistry.js` (code from [nuclide](https://github.com/facebook/nuclide)). | ||
| ``` | ||
| $ npm install eslint-plugin-prettier --save-dev | ||
| ``` | ||
| ## Installation | ||
|
|
||
| **Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-prettier` globally. | ||
| ```sh | ||
| npm install --save-dev prettier eslint-plugin-prettier | ||
| ``` | ||
|
|
||
| ## Usage | ||
| **_`eslint-plugin-prettier` does not install Prettier or ESLint for you._** _You must install these yourself._ | ||
|
|
||
| Add `prettier` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix: | ||
| Then, in your `.eslintrc`: | ||
|
|
||
| ```json | ||
| { | ||
| "plugins": [ | ||
| "prettier" | ||
| ] | ||
| "plugins": [ | ||
| "prettier" | ||
| ], | ||
| "rules": { | ||
| "prettier/prettier": "error" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Options | ||
|
|
||
| Then configure the `prettier` rule under the `rules` section: | ||
| * The first option: | ||
|
|
||
| ```json | ||
| { | ||
| "rules": { | ||
| "prettier/prettier": "error" | ||
| } | ||
| } | ||
| ``` | ||
| - Objects are passed directly to Prettier as [options](https://github.com/prettier/prettier#api). Example: | ||
|
|
||
| ```json | ||
| "prettier/prettier": ["error", {"singleQuote": true, "parser": "flow"}] | ||
| ``` | ||
|
|
||
| You can also pass [`prettier` configuration](https://github.com/prettier/prettier#api) as an option: | ||
| - Or the string `"fb"` may be used to set "Facebook style" defaults: | ||
|
|
||
| ```json | ||
| { | ||
| "rules": { | ||
| "prettier/prettier": ["error", {"trailingComma": "es5", "singleQuote": true}] | ||
| } | ||
| } | ||
| ``` | ||
| ```json | ||
| "prettier/prettier": ["error", "fb"] | ||
| ``` | ||
|
|
||
| The rule will report an error if your code does not match `prettier` style. The rule is autofixable -- if you run `eslint` with the `--fix` flag, your code will be formatted according to `prettier` style. | ||
| Equivalent to: | ||
|
|
||
| --- | ||
| ```json | ||
| "prettier/prettier": ["error", { | ||
| "singleQuote": true, | ||
| "trailingComma": "all", | ||
| "bracketSpacing": false, | ||
| "jsxBracketSameLine": true, | ||
| "parser": "flow" | ||
| }] | ||
| ``` | ||
|
|
||
| This plugin works best if you disable all other ESLint rules relating to code formatting, and only enable rules that detect patterns in the AST. (If another active ESLint rule disagrees with `prettier` about how code should be formatted, it will be impossible to avoid lint errors.) You can use [eslint-config-prettier](https://github.com/lydell/eslint-config-prettier) to disable all formatting-related ESLint rules. If your desired formatting does not match the `prettier` output, you should use a different tool such as [prettier-eslint](https://github.com/kentcdodds/prettier-eslint) instead. | ||
| * The second option: | ||
|
|
||
| ## Migrating to 2.0.0 | ||
| - A string with a pragma that triggers this rule. By default, this rule applies to all files. However, if you set a pragma (this option), only files with that pragma in the heading docblock will be checked. All pragmas must start with `@`. Example: | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. To me, it seems like it would be better to get this functionality by using normal /* eslint prettier: ["error", "fb"] */Is there a reason to have a special pragma for the rule?
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. tbh, this is a facebookism. We need a to tell our language-agnostic infra that these files conform to a formatter (we use |
||
|
|
||
| Starting in 2.0.0, `prettier` is a peerDependency of this module, rather than a dependency. This means that you can use any version of `prettier` with this plugin, but it also means that you need to install it separately and include it as a devDependency in your project. | ||
| ```json | ||
| "prettier/prettier": ["error", null, "@prettier"] | ||
| ``` | ||
|
|
||
| To install `prettier`, use: | ||
| Only files with `@prettier` in the heading docblock will be checked: | ||
|
|
||
| ```bash | ||
| npm install prettier --save-dev | ||
| ``` | ||
| ```js | ||
| /** @prettier */ | ||
|
|
||
| console.log(1 + 2 + 3); | ||
| ``` | ||
|
|
||
| Or: | ||
|
|
||
| ```js | ||
| /** | ||
| * @prettier | ||
| */ | ||
|
|
||
| console.log(4 + 5 + 6); | ||
| ``` | ||
|
|
||
| _This option is useful if you're migrating a large codebase and already use pragmas like `@flow`._ | ||
|
|
||
| * The rule is autofixable -- if you run `eslint` with the `--fix` flag, your code will be formatted according to `prettier` style. | ||
|
|
||
| --- | ||
|
|
||
| This plugin works best if you disable all other ESLint rules relating to code formatting, and only enable rules that detect patterns in the AST. (If another active ESLint rule disagrees with `prettier` about how code should be formatted, it will be impossible to avoid lint errors.) You can use [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) to disable all formatting-related ESLint rules. If your desired formatting does not match the `prettier` output, you should use a different tool such as [prettier-eslint](https://github.com/prettier/prettier-eslint) instead. | ||
|
|
||
| ## Contributing | ||
|
|
||
| See [CONTRIBUTING.md](https://github.com/not-an-aardvark/eslint-plugin-prettier/blob/master/CONTRIBUTING.md) | ||
| See [CONTRIBUTING.md](https://github.com/prettier/eslint-plugin-prettier/blob/master/CONTRIBUTING.md) | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this approach is going to break after eslint/eslint#8465 is merged, which is likely to happen in ESLint 4. (The change makes
Pluginsan ES6 class rather than a global mutable object, to prevent unrelated modules from conflicting with each other if they both happen to be using eslint in the same process.)Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh thanks for the heads up! Modifying the
node_modulesafter an install causes yarn issues :/QQ: We also use this approach at fb because you can't use a path as a plugin. I understand the module resolution complications of supporting relative paths, but would the ESLint team be open to accepting a PR for absolute paths to a plugin?
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's an accepted issue for it at eslint/eslint#6237, but when I looked into it a little while ago it seemed like it could introduce problems even when absolute paths are used. Basically, if I load
eslint-plugin-foowith a relative path, and I'm also using a shareable config that references something else calledeslint-plugin-fooinnode_modules(e.g. another version of the plugin), it wouldn't be possible to configure rules from both plugins independently.Feel free to comment on that thread if you have any ideas for how to handle that, though.
Hmm, I hadn't realized modifying
node_modulesbreaks yarn. Maybe we should keepPluginssomehow until we have a better way to refer to plugins by path.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It causes
yarn checkto fail. Also, it'll break a new yarn feature I'll be upstreaming soon: "watchman-based check". Basically, you get instant (sub ~100ms) fullnode_modulesverification, which lets use putyarnin front of every js script w/o having to worry about stale modules.