-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathNaming-Conventions.js
More file actions
207 lines (149 loc) · 5.1 KB
/
Naming-Conventions.js
File metadata and controls
207 lines (149 loc) · 5.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
//: 20.1 => /* Avoid single letter names. Be descriptive with your naming. eslint: "id-lenght" */
// bad
function q() {
//...
}
// good
function query() {
//...
}
//: 20.2 => /* Use camelCase when naming objects, functions, and instances. eslint: camelcase */
// bad
const OBJectssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}
//: 20.3 => Use PascalCase only when naming constructor or classes. eslint: "new-cap"
// bad
function user(options) {
this.name = options.name;
}
const bad = new user({
name: "nope",
});
// good
class User {
constructor(options) {
this.name = options.name;
}
}
const good = new User({
name: "yup",
});
//: 20.4 => Do not use trailing or leading underscores. eslint: "no-underscore-dangle"
/* Why? Javascript does not have the concept of privacy in terms of properties or methods. Although a leading underscore is a commmon convention to mean "private", in fact, these properties are fully public, and such as, are part of your public API contract. This convention might lead developers to wrongly think that a change won't count as breaking, or that tests aren't needed. If you want something to be "private", it must not be observably present. */
// bad
this.__firstName__ = "Panda";
this.firstName_ = "Panda";
this._firstName = "Panda";
// good
this.firstName = "Panda";
// good, in environments where WeakMaps are available
const firstNames = new WeakMap();
firstNames.set(this, "Panda");
//: 20.5 => Don't save references to "this". Use arrow function or Function#bind
// bad
function foo() {
const self = this;
return function () {
console.log(self);
};
}
// bad
function foo() {
const that = this;
return function () {
console.log(that);
};
}
// good
function foo() {
return () => {
console.log(this);
};
}
//: 20.6 => A base filename should exactly match the name of its default export.
// file 1 contents
class CheckBox {
// ...
}
export default CheckBox;
// file 2 contents
export default function fortyTwo() { return 42; }
// file 3 contents
export default function insideDirectory() {}
// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export
// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly
// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
// ^ supports both insideDirectory.js and insideDirectory/index.js
//: 20.7 => /* Use camelCase when you export-default a function. Your filename should be identical to your function's name */
function makeStyleGuide() {
// ...
}
export default makeStyleGuide;
//: 20.8 => /* Use PascalCase when you export a constructor / class / singleton / function library / bare object */
const AirbnbStyleGuide = {
es6: {
},
};
export default AirbnbStyleGuide;
//: 20.9 => Acronyms and initialisms should always be all uppercased, or all lowercased.
/* Why? Names are for readability, not to appease a computer algorithm */
// bad
import SmsContainer from './containers/SmsContainer';
// bad
const HttpRequests = [
// ...
];
// good
import SMSContainer from './containers/SMSContainer';
// good
const HTTPRequests = [
// ...
];
// also good
const httpRequests = [
// ...
];
// best
import TextMessageContainer from './containers/TextMessageContainer';
// best
const requests = [
// ...
];
//: 20.10 => /* You may optionally uppercase a constant only if it (1) is exported, (2) is a "const" (it can not be reassigned), and (3) the programmer can trust it (and its nested properties) to naver change. */
/* Why? This is an adiitional tool to assist in situations where the programmer would be unsure if a variable might ever change. UPPERCASE_VARIABLES are letting the programmer know that they can trust the variable (and it properties) not to change. */
// bad
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';
// bad
export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';
// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';
// ---
// allowed but does not supply semantic value
export const apiKey = 'SOMEKEY';
// better in most cases
export const API_KEY = 'SOMEKEY';
// ---
// bad - unnecessarily uppercases key while adding no semantic value
export const MAPPING = {
KEY: 'value'
};
// good
export const MAPPING = {
key: 'value',
};