Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
087eb951
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
087eb951
编写于
10月 10, 2018
作者:
E
Evan Read
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Fix broken link
Also includes some basic fixes to Markdown to make it adhere to styleguide.
上级
f9bedcfc
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
57 addition
and
52 deletion
+57
-52
doc/development/fe_guide/style_guide_js.md
doc/development/fe_guide/style_guide_js.md
+57
-52
未找到文件。
doc/development/fe_guide/style_guide_js.md
浏览文件 @
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');
```
```
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录