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
39e2ace4
Commit
39e2ace4
authored
Dec 11, 2017
by
Christiaan Van den Poel
Committed by
Rémy Coutable
Dec 11, 2017
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fixes some markup issues in the js style guide docs
parent
4ccbd556
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
60 additions
and
62 deletions
+60
-62
doc/development/fe_guide/style_guide_js.md
doc/development/fe_guide/style_guide_js.md
+60
-62
No files found.
doc/development/fe_guide/style_guide_js.md
View file @
39e2ace4
...
...
@@ -86,34 +86,34 @@ followed by any global declarations, then a blank newline prior to any imports o
#### Modules, Imports, and Exports
1.
Use ES module syntax to import modules
```
javascript
// bad
const
SomeClass
=
require
(
'
some_class
'
);
```
javascript
// bad
const
SomeClass
=
require
(
'
some_class
'
);
// good
import
SomeClass
from
'
some_class
'
;
// good
import
SomeClass
from
'
some_class
'
;
// bad
module
.
exports
=
SomeClass
;
// bad
module
.
exports
=
SomeClass
;
// good
export
default
SomeClass
;
```
Import statements are following usual naming guidelines, for example object literals use camel case:
```
javascript
// some_object file
export
default
{
key
:
'
value
'
,
};
// bad
import
ObjectLiteral
from
'
some_object
'
;
// good
export
default
SomeClass
;
```
Import statements are following usual naming guidelines, for example object literals use camel case:
// good
import
objectLiteral
from
'
some_object
'
;
```
```javascript
// some_object file
export default {
key: 'value',
};
// bad
import ObjectLiteral from 'some_object';
// good
import objectLiteral from 'some_object';
```
1.
Relative paths: when importing a module in the same directory, a child
directory, or an immediate parent directory prefer relative paths. When
...
...
@@ -334,33 +334,33 @@ A forEach will cause side effects, it will be mutating the array being iterated.
#### Alignment
1.
Follow these alignment styles for the template method:
1.
With more than one attribute, all attributes should be on a new line:
```
javascript
// bad
<
component
v
-
if
=
"
bar
"
param
=
"
baz
"
/>
```
javascript
// bad
<
component
v
-
if
=
"
bar
"
param
=
"
baz
"
/>
<
button
class
=
"
btn
"
>
Click
me
<
/button
>
<
button
class
=
"
btn
"
>
Click
me
<
/button
>
// good
<
component
v
-
if
=
"
bar
"
param
=
"
baz
"
/>
// good
<
component
v
-
if
=
"
bar
"
param
=
"
baz
"
/>
<
button
class
=
"
btn
"
>
Click
me
<
/button>
```
<
button
class
=
"
btn
"
>
Click
me
<
/button>
```
1.
The tag can be inline if there is only one attribute:
```
javascript
// good
<
component
bar
=
"
bar
"
/>
```
javascript
// good
<
component
bar
=
"
bar
"
/>
// good
<
component
bar
=
"
bar
"
/>
```
// good
<
component
bar
=
"
bar
"
/>
```
#### Quotes
1.
Always use double quotes
`"`
inside templates and single quotes
`'`
for all other JS.
...
...
@@ -414,7 +414,6 @@ A forEach will cause side effects, it will be mutating the array being iterated.
1.
Default key should be provided if the prop is not required.
_Note:_
There are some scenarios where we need to check for the existence of the property.
On those a default key should not be provided.
```
javascript
// good
props
:
{
...
...
@@ -494,21 +493,20 @@ On those a default key should not be provided.
#### Ordering
1.
Tag order in
`.vue`
file
```
<script>
// ...
</script>
<template>
// ...
</template>
// We don't use scoped styles but there are few instances of this
<style>
// ...
</style>
```
```
<script>
// ...
</script>
<template>
// ...
</template>
// We don't use scoped styles but there are few instances of this
<style>
// ...
</style>
```
1.
Properties in a Vue Component:
1.
`name`
...
...
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