|
| 1 | +# @cybozu/eslint-config |
| 2 | + |
| 3 | +A ESLint rule set for Cybozu. |
| 4 | + |
| 5 | +**This package is intended to use in Cybozu. Currently, this is still in development so the rules might be changed.** |
| 6 | + |
| 7 | +## What is this? |
| 8 | + |
| 9 | +This is a ESLint rule set for Cybozu. |
| 10 | +The purpose of `@cybozu/eslint-config` are following |
| 11 | + |
| 12 | +- Share best practices for JavaScript |
| 13 | +- Standardize JavaScript coding guideline in Cybozu |
| 14 | +- Installation support for ESLint and continuous support for the rule set |
| 15 | + |
| 16 | +## The benefits to adapt this rule |
| 17 | + |
| 18 | +You don't need to care about updates for ESLint and ESLint plugins. |
| 19 | +We'll manage the updates and provide CHANGELOG that you need to know so that you can update it easily. |
| 20 | +In addition, we'll add some useful plugins into `@cybozu/eslint-config` so you can learn about best practices for JavaScript through `@cybozu/eslint-config`. |
| 21 | + |
| 22 | +## Rule set policies |
| 23 | + |
| 24 | +We provide rules that are Error or Warning. |
| 25 | + |
| 26 | +### Error |
| 27 | + |
| 28 | +This is a rule you must fix because the code might not follow our practices in JavaScript |
| 29 | + |
| 30 | +### Warning |
| 31 | + |
| 32 | +This is a rule you should fix because the code style might not be preferable. |
| 33 | + |
| 34 | +## Version policy |
| 35 | + |
| 36 | +1. We update major version if the changes might cause new errors. |
| 37 | +1. We update minor version if the changes might cause new warnings. |
| 38 | +1. We update patch version if the changes don't cause any new errors and warings. |
| 39 | + |
| 40 | +## How to use |
| 41 | + |
| 42 | +Install `eslint` and `@cybozu/eslint-config` and put it into your `.eslintrc.js` |
| 43 | + |
| 44 | +``` |
| 45 | +% npm install eslint @cybozu/eslint-config |
| 46 | +``` |
| 47 | + |
| 48 | +- `.eslintrc.js` |
| 49 | + |
| 50 | +```js |
| 51 | +module.exports = { |
| 52 | + extends: "@cybozu" |
| 53 | +}; |
| 54 | +``` |
| 55 | + |
| 56 | +**Currently, we adopt that `indent` rule is 2 spaces and having indentation in `switch case`. |
| 57 | +You can override the rule if your project adopts 4 spaces or others. |
| 58 | +We think it's important to have consistency in your entire codebase.** |
| 59 | + |
| 60 | +```js |
| 61 | +module.exports = { |
| 62 | + extends: "@cybozu", |
| 63 | + rules: { |
| 64 | + // default |
| 65 | + // 'indent': ['warn', 2, { "SwitchCase": 1 }], |
| 66 | + indent: ["warn", 4, { SwitchCase: 0 }] |
| 67 | + } |
| 68 | +}; |
| 69 | +``` |
| 70 | + |
| 71 | +## Support rule set |
| 72 | + |
| 73 | +### `@cybozu` |
| 74 | + |
| 75 | +This rule set is a basic rules for Cybozu, which supports ES2017 and parse your sources as Modules. |
| 76 | + |
| 77 | +```js |
| 78 | +module.exports = { |
| 79 | + extends: "@cybozu" |
| 80 | +}; |
| 81 | +``` |
| 82 | + |
| 83 | +### [Experimental] `@cybozu/eslint-config/react` |
| 84 | + |
| 85 | +This rule set is for projects using React, which has JSX support and rules related React provided by `eslint-plugin-react` and `eslint-plugin-jsx-ally`. |
| 86 | +This rule set includes `@cybozu`. |
| 87 | + |
| 88 | +```js |
| 89 | +module.exports = { |
| 90 | + extends: "@cybozu/eslint-config/presets/react" |
| 91 | +}; |
| 92 | +``` |
| 93 | + |
| 94 | +If you use React and Flow we recommend to use `@cybozu/eslint-config/react-flowtype` instead. |
| 95 | + |
| 96 | +### [Experimental] `@cybozu/eslint-config/flowtype` |
| 97 | + |
| 98 | +This rule set is for projects using Flow, which has Flow support, which is using `eslint-plugin-flowtype`. |
| 99 | + |
| 100 | +```js |
| 101 | +module.exports = { |
| 102 | + extends: "@cybozu/eslint-config/presets/flowtype" |
| 103 | +}; |
| 104 | +``` |
| 105 | + |
| 106 | +If you use React and Flow we recommend to use `@cybozu/eslint-config/react-flowtype` instead. |
| 107 | + |
| 108 | +### [Experimental] `@cybozu/eslint-config/react-flowtype` |
| 109 | + |
| 110 | +This rule set is for projects using React and Flow, which has Flow support in addition to `@cybozu/eslint-config/react`. |
| 111 | + |
| 112 | +```js |
| 113 | +module.exports = { |
| 114 | + extends: "@cybozu/eslint-config/presets/react-flowtype" |
| 115 | +}; |
| 116 | +``` |
| 117 | + |
| 118 | +## [Experimental] Prettier Support |
| 119 | + |
| 120 | +Prettier is a code formatter, which supports not only JavaScript but also other languages. |
| 121 | +Prettier is used widely for a code formatter for JavaScript. |
| 122 | + |
| 123 | +It's an opinionated tool but with Prettier, we don't have to discuss code styles in code review. |
| 124 | +(No more bikeshed) |
| 125 | + |
| 126 | +`@cybozu/eslint-config` has presets to support Prettier as an experimental. |
| 127 | +The presets disable all rules conflicting with Prettier and treat the difference as errors. |
| 128 | +You can fix the errors by `--fix` option so you don't have to fix the errors manually. |
| 129 | + |
| 130 | +In order to this, you have to install `prettier` and choose a preset from the followings. |
| 131 | + |
| 132 | +``` |
| 133 | +% npm install --save-dev prettier |
| 134 | +``` |
| 135 | + |
| 136 | +- `@cybozu/eslint-config/presets/prettier` |
| 137 | +- `@cybozu/eslint-config/presets/react-prettier` |
| 138 | +- `@cybouz/eslint-config/presets/react-flowtype-prettier` |
| 139 | + |
| 140 | +**Currently, we don't support customized Prettier config** |
0 commit comments