Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Boxiang Sun
gitlab-ce
Commits
087eb951
Commit
087eb951
authored
Oct 10, 2018
by
Evan Read
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Fix broken link
Also includes some basic fixes to Markdown to make it adhere to styleguide.
parent
f9bedcfc
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
57 additions
and
52 deletions
+57
-52
doc/development/fe_guide/style_guide_js.md
doc/development/fe_guide/style_guide_js.md
+57
-52
No files found.
doc/development/fe_guide/style_guide_js.md
View file @
087eb951
# Style guides and linting
# Style guides and linting
See the relevant style guides for our guidelines and for information on linting:
See the relevant style guides for our guidelines and for information on linting:
## JavaScript
## JavaScript
We defer to
[
Airbnb
][
airbnb-js-style-guide
]
on most style-related
We defer to
[
Airbnb
][
airbnb-js-style-guide
]
on most style-related
conventions and enforce them with eslint.
conventions and enforce them with eslint.
See
[
our current .eslintrc
]
[
eslintrc
]
for specific rules and patterns.
See
[
our current .eslintrc
]
(
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/.eslintrc.yml
)
for specific rules and patterns.
### Common
### Common
...
@@ -21,10 +23,10 @@ refactor an existing one, you should abide by the eslint rules.
...
@@ -21,10 +23,10 @@ refactor an existing one, you should abide by the eslint rules.
```javascript
```javascript
// bad
// bad
/* eslint-disable */
/* eslint-disable */
// better
// better
/* eslint-disable some-rule, some-other-rule */
/* eslint-disable some-rule, some-other-rule */
// best
// best
// nothing :)
// nothing :)
```
```
...
@@ -34,14 +36,14 @@ refactor an existing one, you should abide by the eslint rules.
...
@@ -34,14 +36,14 @@ refactor an existing one, you should abide by the eslint rules.
```javascript
```javascript
// bad
// bad
/* eslint-disable no-new */
/* eslint-disable no-new */
import Foo from 'foo';
import Foo from 'foo';
new Foo();
new Foo();
// better
// better
import Foo from 'foo';
import Foo from 'foo';
// eslint-disable-next-line no-new
// eslint-disable-next-line no-new
new Foo();
new Foo();
```
```
...
@@ -58,11 +60,11 @@ followed by any global declarations, then a blank newline prior to any imports o
...
@@ -58,11 +60,11 @@ followed by any global declarations, then a blank newline prior to any imports o
/* global Foo */
/* global Foo */
/* eslint-disable no-new */
/* eslint-disable no-new */
import Bar from './bar';
import Bar from './bar';
// good
// good
/* eslint-disable no-new */
/* eslint-disable no-new */
/* global Foo */
/* global Foo */
import Bar from './bar';
import Bar from './bar';
```
```
...
@@ -73,7 +75,7 @@ followed by any global declarations, then a blank newline prior to any imports o
...
@@ -73,7 +75,7 @@ followed by any global declarations, then a blank newline prior to any imports o
```javascript
```javascript
// bad
// bad
/* globals Flash, Cookies, jQuery */
/* globals Flash, Cookies, jQuery */
// good
// good
/* global Flash */
/* global Flash */
/* global Cookies */
/* global Cookies */
...
@@ -85,7 +87,7 @@ followed by any global declarations, then a blank newline prior to any imports o
...
@@ -85,7 +87,7 @@ followed by any global declarations, then a blank newline prior to any imports o
```javascript
```javascript
// bad
// bad
fn(p1, p2, p3, p4) {}
fn(p1, p2, p3, p4) {}
// good
// good
fn(options) {}
fn(options) {}
```
```
...
@@ -191,28 +193,28 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
...
@@ -191,28 +193,28 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
```javascript
```javascript
// bad
// bad
const values = {foo: 1};
const values = {foo: 1};
function impureFunction(items) {
function impureFunction(items) {
const bar = 1;
const bar = 1;
items.foo = items.a * bar + 2;
items.foo = items.a * bar + 2;
return items.a;
return items.a;
}
}
const c = impureFunction(values);
const c = impureFunction(values);
// good
// good
var values = {foo: 1};
var values = {foo: 1};
function pureFunction (foo) {
function pureFunction (foo) {
var bar = 1;
var bar = 1;
foo = foo * bar + 2;
foo = foo * bar + 2;
return foo;
return foo;
}
}
var c = pureFunction(values.foo);
var c = pureFunction(values.foo);
```
```
...
@@ -231,10 +233,10 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
...
@@ -231,10 +233,10 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
document.addEventListener('click', this.handleCallback)
document.addEventListener('click', this.handleCallback)
},
},
handleCallback() {
handleCallback() {
}
}
}
}
// Good
// Good
export class Foo {
export class Foo {
constructor() {
constructor() {
...
@@ -253,12 +255,12 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
...
@@ -253,12 +255,12 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
```javascript
```javascript
const users = [ { name: 'Foo' }, { name: 'Bar' } ];
const users = [ { name: 'Foo' }, { name: 'Bar' } ];
// bad
// bad
users.forEach((user, index) => {
users.forEach((user, index) => {
user.id = index;
user.id = index;
});
});
// good
// good
const usersWithId = users.map((user, index) => {
const usersWithId = users.map((user, index) => {
return Object.assign({}, user, { id: index });
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
...
@@ -272,10 +274,10 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
```javascript
```javascript
// bad
// bad
+'10' // 10
+'10' // 10
// good
// good
Number('10') // 10
Number('10') // 10
// better
// better
parseInt('10', 10);
parseInt('10', 10);
```
```
...
@@ -289,7 +291,7 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
...
@@ -289,7 +291,7 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
<button class="add-user">
<button class="add-user">
Add User
Add User
</button>
</button>
// good
// good
<button class="js-add-user">
<button class="js-add-user">
Add User
Add User
...
@@ -299,10 +301,12 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
...
@@ -299,10 +301,12 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
### Vue.js
### Vue.js
#### `eslint-vue-plugin`
#### `eslint-vue-plugin`
We default to
[
eslint-vue-plugin
][
eslint-plugin-vue
]
, with the
`plugin:vue/recommended`
.
We default to
[
eslint-vue-plugin
][
eslint-plugin-vue
]
, with the
`plugin:vue/recommended`
.
Please check this
[
rules
][
eslint-plugin-vue-rules
]
for more documentation.
Please check this
[
rules
][
eslint-plugin-vue-rules
]
for more documentation.
#### Basic Rules
#### Basic Rules
1.
The service has it's own file
1.
The service has it's own file
1.
The store has it's own file
1.
The store has it's own file
1.
Use a function in the bundle file to instantiate the Vue component:
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.
...
@@ -314,7 +318,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
new Component({})
new Component({})
}
}
}
}
// good
// good
document.addEventListener('DOMContentLoaded', () => new Vue({
document.addEventListener('DOMContentLoaded', () => new Vue({
el: '#element',
el: '#element',
...
@@ -336,7 +340,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
...
@@ -336,7 +340,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
}
}
}
}
}
}
// good
// good
class Store {
class Store {
constructor() {
constructor() {
...
@@ -354,14 +358,14 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
...
@@ -354,14 +358,14 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
```javascript
```javascript
// bad
// bad
import cardBoard from 'cardBoard.vue'
import cardBoard from 'cardBoard.vue'
components: {
components: {
cardBoard,
cardBoard,
};
};
// good
// good
import CardBoard from 'cardBoard.vue'
import CardBoard from 'cardBoard.vue'
components: {
components: {
CardBoard,
CardBoard,
};
};
...
@@ -373,13 +377,13 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
...
@@ -373,13 +377,13 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
```javascript
```javascript
// bad
// bad
<component class="btn">
<component class="btn">
// good
// good
<component css-class="btn">
<component css-class="btn">
// bad
// bad
<component myProp="prop" />
<component myProp="prop" />
// good
// good
<component my-prop="prop" />
<component my-prop="prop" />
```
```
...
@@ -387,6 +391,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
...
@@ -387,6 +391,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
[
#34371
]:
https://gitlab.com/gitlab-org/gitlab-ce/issues/34371
[
#34371
]:
https://gitlab.com/gitlab-org/gitlab-ce/issues/34371
#### Alignment
#### Alignment
1.
Follow these alignment styles for the template method:
1.
Follow these alignment styles for the template method:
1.
With more than one attribute, all attributes should be on a new line:
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.
...
@@ -395,31 +400,31 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
// bad
// bad
<component v-if="bar"
<component v-if="bar"
param="baz" />
param="baz" />
<button class="btn">Click me</button>
<button class="btn">Click me</button>
// good
// good
<component
<component
v-if="bar"
v-if="bar"
param="baz"
param="baz"
/>
/>
<button class="btn">
<button class="btn">
Click me
Click me
</button>
</button>
```
```
1.
The tag can be inline if there is only one attribute:
1.
The tag can be inline if there is only one attribute:
```javascript
```javascript
// good
// good
<component bar="bar" />
<component bar="bar" />
// good
// good
<component
<component
bar="bar"
bar="bar"
/>
/>
// bad
// bad
<component
<component
bar="bar" />
bar="bar" />
...
@@ -434,7 +439,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
...
@@ -434,7 +439,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
template: `
template: `
<button :class='style'>Button</button>
<button :class='style'>Button</button>
`
`
// good
// good
template: `
template: `
<button :class="style">Button</button>
<button :class="style">Button</button>
...
@@ -447,7 +452,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
...
@@ -447,7 +452,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
```
javascript
```
javascript
// bad
// bad
props
:
[
'
foo
'
]
props
:
[
'
foo
'
]
// good
// good
props
:
{
props
:
{
foo
:
{
foo
:
{
...
@@ -467,7 +472,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
...
@@ -467,7 +472,7 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
type: String,
type: String,
}
}
}
}
// good
// good
props: {
props: {
foo: {
foo: {
...
@@ -490,7 +495,7 @@ On those a default key should not be provided.
...
@@ -490,7 +495,7 @@ On those a default key should not be provided.
required: false,
required: false,
}
}
}
}
// good
// good
props: {
props: {
foo: {
foo: {
...
@@ -499,7 +504,7 @@ On those a default key should not be provided.
...
@@ -499,7 +504,7 @@ On those a default key should not be provided.
default: 'bar'
default: 'bar'
}
}
}
}
// good
// good
props: {
props: {
foo: {
foo: {
...
@@ -534,7 +539,7 @@ On those a default key should not be provided.
...
@@ -534,7 +539,7 @@ On those a default key should not be provided.
```javascript
```javascript
// bad
// bad
<component v-on:click="eventHandler"/>
<component v-on:click="eventHandler"/>
// good
// good
<component @click="eventHandler"/>
<component @click="eventHandler"/>
```
```
...
@@ -544,7 +549,7 @@ On those a default key should not be provided.
...
@@ -544,7 +549,7 @@ On those a default key should not be provided.
```javascript
```javascript
// bad
// bad
<component v-bind:class="btn"/>
<component v-bind:class="btn"/>
// good
// good
<component :class="btsn"/>
<component :class="btsn"/>
```
```
...
@@ -556,7 +561,7 @@ On those a default key should not be provided.
...
@@ -556,7 +561,7 @@ On those a default key should not be provided.
```javascript
```javascript
// bad
// bad
<component></component>
<component></component>
// good
// good
<component />
<component />
```
```
...
@@ -650,7 +655,7 @@ Useful links:
...
@@ -650,7 +655,7 @@ Useful links:
title="Some tooltip text">
title="Some tooltip text">
Text
Text
</span>
</span>
// good
// good
<span
<span
v-tooltip
v-tooltip
...
@@ -666,10 +671,10 @@ Useful links:
...
@@ -666,10 +671,10 @@ Useful links:
```javascript
```javascript
// bad
// bad
<span data-original-title="tooltip text">Foo</span>
<span data-original-title="tooltip text">Foo</span>
// good
// good
<span title="tooltip text">Foo</span>
<span title="tooltip text">Foo</span>
$('span').tooltip('_fixTitle');
$('span').tooltip('_fixTitle');
```
```
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment