Skip to content

Commit 087eb95

Browse files
committed
Fix broken link
Also includes some basic fixes to Markdown to make it adhere to styleguide.
1 parent f9bedcf commit 087eb95

File tree

1 file changed

+57
-52
lines changed

1 file changed

+57
-52
lines changed

doc/development/fe_guide/style_guide_js.md

Lines changed: 57 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
# Style guides and linting
2+
23
See the relevant style guides for our guidelines and for information on linting:
34

45
## JavaScript
6+
57
We defer to [Airbnb][airbnb-js-style-guide] on most style-related
68
conventions and enforce them with eslint.
79

8-
See [our current .eslintrc][eslintrc] for specific rules and patterns.
10+
See [our current .eslintrc](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/.eslintrc.yml) for specific rules and patterns.
911

1012
### Common
1113

@@ -21,10 +23,10 @@ refactor an existing one, you should abide by the eslint rules.
2123
```javascript
2224
// bad
2325
/* eslint-disable */
24-
26+
2527
// better
2628
/* eslint-disable some-rule, some-other-rule */
27-
29+
2830
// best
2931
// nothing :)
3032
```
@@ -34,14 +36,14 @@ refactor an existing one, you should abide by the eslint rules.
3436
```javascript
3537
// bad
3638
/* eslint-disable no-new */
37-
39+
3840
import Foo from 'foo';
39-
41+
4042
new Foo();
41-
43+
4244
// better
4345
import Foo from 'foo';
44-
46+
4547
// eslint-disable-next-line no-new
4648
new Foo();
4749
```
@@ -58,11 +60,11 @@ followed by any global declarations, then a blank newline prior to any imports o
5860
/* global Foo */
5961
/* eslint-disable no-new */
6062
import Bar from './bar';
61-
63+
6264
// good
6365
/* eslint-disable no-new */
6466
/* global Foo */
65-
67+
6668
import Bar from './bar';
6769
```
6870

@@ -73,7 +75,7 @@ followed by any global declarations, then a blank newline prior to any imports o
7375
```javascript
7476
// bad
7577
/* globals Flash, Cookies, jQuery */
76-
78+
7779
// good
7880
/* global Flash */
7981
/* global Cookies */
@@ -85,7 +87,7 @@ followed by any global declarations, then a blank newline prior to any imports o
8587
```javascript
8688
// bad
8789
fn(p1, p2, p3, p4) {}
88-
90+
8991
// good
9092
fn(options) {}
9193
```
@@ -191,28 +193,28 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
191193
```javascript
192194
// bad
193195
const values = {foo: 1};
194-
196+
195197
function impureFunction(items) {
196198
const bar = 1;
197-
199+
198200
items.foo = items.a * bar + 2;
199-
201+
200202
return items.a;
201203
}
202-
204+
203205
const c = impureFunction(values);
204-
206+
205207
// good
206208
var values = {foo: 1};
207-
209+
208210
function pureFunction (foo) {
209211
var bar = 1;
210-
212+
211213
foo = foo * bar + 2;
212-
214+
213215
return foo;
214216
}
215-
217+
216218
var c = pureFunction(values.foo);
217219
```
218220
@@ -231,10 +233,10 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
231233
document.addEventListener('click', this.handleCallback)
232234
},
233235
handleCallback() {
234-
236+
235237
}
236238
}
237-
239+
238240
// Good
239241
export class Foo {
240242
constructor() {
@@ -253,12 +255,12 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
253255
254256
```javascript
255257
const users = [ { name: 'Foo' }, { name: 'Bar' } ];
256-
258+
257259
// bad
258260
users.forEach((user, index) => {
259261
user.id = index;
260262
});
261-
263+
262264
// good
263265
const usersWithId = users.map((user, index) => {
264266
return Object.assign({}, user, { id: index });
@@ -272,10 +274,10 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
272274
```javascript
273275
// bad
274276
+'10' // 10
275-
277+
276278
// good
277279
Number('10') // 10
278-
280+
279281
// better
280282
parseInt('10', 10);
281283
```
@@ -289,7 +291,7 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
289291
<button class="add-user">
290292
Add User
291293
</button>
292-
294+
293295
// good
294296
<button class="js-add-user">
295297
Add User
@@ -299,10 +301,12 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
299301
### Vue.js
300302
301303
#### `eslint-vue-plugin`
304+
302305
We default to [eslint-vue-plugin][eslint-plugin-vue], with the `plugin:vue/recommended`.
303306
Please check this [rules][eslint-plugin-vue-rules] for more documentation.
304307
305308
#### Basic Rules
309+
306310
1. The service has it's own file
307311
1. The store has it's own file
308312
1. Use a function in the bundle file to instantiate the Vue component:
@@ -314,7 +318,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
314318
new Component({})
315319
}
316320
}
317-
321+
318322
// good
319323
document.addEventListener('DOMContentLoaded', () => new Vue({
320324
el: '#element',
@@ -336,7 +340,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
336340
}
337341
}
338342
}
339-
343+
340344
// good
341345
class Store {
342346
constructor() {
@@ -354,14 +358,14 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
354358
```javascript
355359
// bad
356360
import cardBoard from 'cardBoard.vue'
357-
361+
358362
components: {
359363
cardBoard,
360364
};
361-
365+
362366
// good
363367
import CardBoard from 'cardBoard.vue'
364-
368+
365369
components: {
366370
CardBoard,
367371
};
@@ -373,20 +377,21 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
373377
```javascript
374378
// bad
375379
<component class="btn">
376-
380+
377381
// good
378382
<component css-class="btn">
379-
383+
380384
// bad
381385
<component myProp="prop" />
382-
386+
383387
// good
384388
<component my-prop="prop" />
385389
```
386390
387391
[#34371]: https://gitlab.com/gitlab-org/gitlab-ce/issues/34371
388392
389393
#### Alignment
394+
390395
1. Follow these alignment styles for the template method:
391396
392397
1. With more than one attribute, all attributes should be on a new line:
@@ -395,31 +400,31 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
395400
// bad
396401
<component v-if="bar"
397402
param="baz" />
398-
403+
399404
<button class="btn">Click me</button>
400-
405+
401406
// good
402407
<component
403408
v-if="bar"
404409
param="baz"
405410
/>
406-
411+
407412
<button class="btn">
408413
Click me
409414
</button>
410415
```
411-
416+
412417
1. The tag can be inline if there is only one attribute:
413418
414419
```javascript
415420
// good
416421
<component bar="bar" />
417-
422+
418423
// good
419424
<component
420425
bar="bar"
421426
/>
422-
427+
423428
// bad
424429
<component
425430
bar="bar" />
@@ -434,7 +439,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
434439
template: `
435440
<button :class='style'>Button</button>
436441
`
437-
442+
438443
// good
439444
template: `
440445
<button :class="style">Button</button>
@@ -447,7 +452,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
447452
```javascript
448453
// bad
449454
props: ['foo']
450-
455+
451456
// good
452457
props: {
453458
foo: {
@@ -467,7 +472,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
467472
type: String,
468473
}
469474
}
470-
475+
471476
// good
472477
props: {
473478
foo: {
@@ -490,7 +495,7 @@ On those a default key should not be provided.
490495
required: false,
491496
}
492497
}
493-
498+
494499
// good
495500
props: {
496501
foo: {
@@ -499,7 +504,7 @@ On those a default key should not be provided.
499504
default: 'bar'
500505
}
501506
}
502-
507+
503508
// good
504509
props: {
505510
foo: {
@@ -534,7 +539,7 @@ On those a default key should not be provided.
534539
```javascript
535540
// bad
536541
<component v-on:click="eventHandler"/>
537-
542+
538543
// good
539544
<component @click="eventHandler"/>
540545
```
@@ -544,7 +549,7 @@ On those a default key should not be provided.
544549
```javascript
545550
// bad
546551
<component v-bind:class="btn"/>
547-
552+
548553
// good
549554
<component :class="btsn"/>
550555
```
@@ -556,7 +561,7 @@ On those a default key should not be provided.
556561
```javascript
557562
// bad
558563
<component></component>
559-
564+
560565
// good
561566
<component />
562567
```
@@ -650,7 +655,7 @@ Useful links:
650655
title="Some tooltip text">
651656
Text
652657
</span>
653-
658+
654659
// good
655660
<span
656661
v-tooltip
@@ -666,10 +671,10 @@ Useful links:
666671
```javascript
667672
// bad
668673
<span data-original-title="tooltip text">Foo</span>
669-
674+
670675
// good
671676
<span title="tooltip text">Foo</span>
672-
677+
673678
$('span').tooltip('_fixTitle');
674679
```
675680

0 commit comments

Comments
 (0)