|
1259 | 1259 | ```
|
1260 | 1260 |
|
1261 | 1261 | <a name="modules--prefer-default-export"></a>
|
1262 |
| - - [10.6](#modules--prefer-default-export) In modules with a single export, prefer default export over named export. |
1263 |
| - eslint: [`import/prefer-default-export`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md) |
| 1262 | + - [10.6](#modules--prefer-default-export) In modules with a single export, don't prefer default export over named export. |
1264 | 1263 |
|
1265 | 1264 | ```javascript
|
1266 | 1265 | // bad
|
1267 |
| - export function foo() {} |
| 1266 | + export default function foo() {} |
1268 | 1267 |
|
1269 | 1268 | // good
|
1270 |
| - export default function foo() {} |
| 1269 | + export function foo() {} |
1271 | 1270 | ```
|
1272 | 1271 |
|
1273 | 1272 | <a name="modules--imports-first"></a>
|
|
2769 | 2768 | }
|
2770 | 2769 | ```
|
2771 | 2770 |
|
2772 |
| - <a name="naming--filename-matches-export"></a><a name="22.6"></a> |
2773 |
| - - [22.6](#naming--filename-matches-export) A base filename should exactly match the name of its default export. |
2774 |
| -
|
2775 |
| - ```javascript |
2776 |
| - // file 1 contents |
2777 |
| - class CheckBox { |
2778 |
| - // ... |
2779 |
| - } |
2780 |
| - export default CheckBox; |
2781 |
| - |
2782 |
| - // file 2 contents |
2783 |
| - export default function fortyTwo() { return 42; } |
2784 |
| - |
2785 |
| - // file 3 contents |
2786 |
| - export default function insideDirectory() {} |
2787 |
| - |
2788 |
| - // in some other file |
2789 |
| - // bad |
2790 |
| - import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename |
2791 |
| - import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export |
2792 |
| - import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export |
2793 |
| - |
2794 |
| - // bad |
2795 |
| - import CheckBox from './check_box'; // PascalCase import/export, snake_case filename |
2796 |
| - import forty_two from './forty_two'; // snake_case import/filename, camelCase export |
2797 |
| - import inside_directory from './inside_directory'; // snake_case import, camelCase export |
2798 |
| - import index from './inside_directory/index'; // requiring the index file explicitly |
2799 |
| - import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly |
2800 |
| - |
2801 |
| - // good |
2802 |
| - import CheckBox from './CheckBox'; // PascalCase export/import/filename |
2803 |
| - import fortyTwo from './fortyTwo'; // camelCase export/import/filename |
2804 |
| - import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index" |
2805 |
| - // ^ supports both insideDirectory.js and insideDirectory/index.js |
2806 |
| - ``` |
2807 |
| -
|
2808 |
| - <a name="naming--camelCase-default-export"></a><a name="22.7"></a> |
2809 |
| - - [22.7](#naming--camelCase-default-export) Use camelCase when you export-default a function. Your filename should be identical to your function's name. |
2810 |
| -
|
2811 |
| - ```javascript |
2812 |
| - function makeStyleGuide() { |
2813 |
| - // ... |
2814 |
| - } |
2815 |
| - |
2816 |
| - export default makeStyleGuide; |
2817 |
| - ``` |
2818 |
| -
|
2819 |
| - <a name="naming--PascalCase-singleton"></a><a name="22.8"></a> |
2820 |
| - - [22.8](#naming--PascalCase-singleton) Use PascalCase when you export a constructor / class / singleton / function library / bare object. |
2821 |
| -
|
2822 |
| - ```javascript |
2823 |
| - const AirbnbStyleGuide = { |
2824 |
| - es6: { |
2825 |
| - }, |
2826 |
| - }; |
2827 |
| - |
2828 |
| - export default AirbnbStyleGuide; |
2829 |
| - ``` |
2830 |
| -
|
2831 | 2771 | <a name="naming--Acronyms-and-Initialisms"></a>
|
2832 |
| - - [22.9](#naming--Acronyms-and-Initialisms) Acronyms and initialisms should always be all capitalized, or all lowercased. |
| 2772 | + - [22.6](#naming--Acronyms-and-Initialisms) Acronyms and initialisms should always be all capitalized, or all lowercased. |
2833 | 2773 |
|
2834 | 2774 | > Why? Names are for readability, not to appease a computer algorithm.
|
2835 | 2775 |
|
2836 | 2776 | ```javascript
|
2837 | 2777 | // bad
|
2838 |
| - import SmsContainer from './containers/SmsContainer'; |
| 2778 | + import { SmsContainer } from './containers/SmsContainer'; |
2839 | 2779 |
|
2840 | 2780 | // bad
|
2841 | 2781 | const HttpRequests = [
|
2842 | 2782 | // ...
|
2843 | 2783 | ];
|
2844 | 2784 |
|
2845 | 2785 | // good
|
2846 |
| - import SMSContainer from './containers/SMSContainer'; |
| 2786 | + import { SMSContainer } from './containers/SMSContainer'; |
2847 | 2787 |
|
2848 | 2788 | // good
|
2849 | 2789 | const HTTPRequests = [
|
2850 | 2790 | // ...
|
2851 | 2791 | ];
|
2852 | 2792 |
|
2853 | 2793 | // best
|
2854 |
| - import TextMessageContainer from './containers/TextMessageContainer'; |
| 2794 | + import { TextMessageContainer } from './containers/TextMessageContainer'; |
2855 | 2795 |
|
2856 | 2796 | // best
|
2857 | 2797 | const Requests = [
|
|
0 commit comments