-
Notifications
You must be signed in to change notification settings - Fork 2
Some update ideas for the code-style #4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,6 +5,10 @@ This is fork from [jQuery Code Style] and follows the same licensing. | |
|
|
||
| This style guide should be applied to all ES6Rocks code to improve readability and consistency. | ||
|
|
||
| ## Strict mode | ||
|
|
||
| Always use strict mode. | ||
|
|
||
| ## Spacing | ||
|
|
||
| - Indentation: 4 spaces, no tabs. | ||
|
|
@@ -16,10 +20,10 @@ This style guide should be applied to all ES6Rocks code to improve readability a | |
|
|
||
| ```js | ||
| // Bad | ||
| if ( condition ) return; | ||
| if (condition) return; | ||
|
|
||
| // Good | ||
| if ( condition ) { | ||
| if (condition) { | ||
| return; | ||
| } | ||
| ``` | ||
|
|
@@ -109,18 +113,36 @@ html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c + | |
| ``` | ||
|
|
||
| Lines should be broken into logical groups if it improves readability, such as splitting each expression of a ternary operator onto its own line even if both will fit on a single line. | ||
| If possible, use ternary conditions between parentheses to ensure the logic, for the reader. | ||
|
|
||
| ```js | ||
| var baz = (firstCondition( foo ) && secondCondition( bar )) ? | ||
| qux( foo, bar ) : | ||
| foo; | ||
| ``` | ||
|
|
||
| Never use multiple ternary conditions in the same instruction. | ||
|
|
||
| ```js | ||
| var baz = firstCondition( foo ) && secondCondition( bar ) ? | ||
| // bad | ||
| var baz = (firstCondition( foo ) && secondCondition( bar )) ? | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. no space inside function call's parentheses
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ok, fixing it...but notice that it was already there :p
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. heheh no problem. We would need to update it sooner or later. |
||
| qux( foo, bar ) : | ||
| foo? 'abc': 'def'; | ||
|
|
||
| // god | ||
| var baz = (firstCondition( foo ) && secondCondition( bar )) ? | ||
| qux( foo, bar ) : | ||
| foo; | ||
|
|
||
| baz = baz? 'abc': 'def; | ||
|
|
||
| ``` | ||
|
|
||
| When a conditional is too long to fit on one line, successive lines must be indented one extra level to distinguish them from the body. | ||
|
|
||
| ```js | ||
| if ( firstCondition() && secondCondition() && | ||
| thirdCondition() ) { | ||
| if (firstCondition() && secondCondition() && | ||
| thirdCondition()) { | ||
| doStuff(); | ||
| } | ||
| ``` | ||
|
|
@@ -172,14 +194,20 @@ Strict equality checks (`===`) must be used in favor of abstract equality checks | |
| undefOrNull == null; | ||
| ``` | ||
|
|
||
| When checking for `undefined`, prefer using `void(0)` instead. | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not sure what's the advantage here. In ES5+, the global |
||
|
|
||
| ```js | ||
| if (something === void(0)) { | ||
| // magic | ||
| } | ||
| ``` | ||
|
|
||
| ## Comments | ||
|
|
||
| Comments are always preceded by a blank line and must go over the line they refer to. | ||
|
|
||
| There must be a single space between the comment token and the comment text. | ||
|
|
||
| Multi-line comments - also named block level comments - are only used for file and function headers. | ||
|
|
||
| ```js | ||
| // We need an explicit "bar", because later in the code foo is checked. | ||
| var foo = 'bar'; | ||
|
|
@@ -189,23 +217,120 @@ var foo = 'bar'; | |
| // line comment form. | ||
| ``` | ||
|
|
||
| Multi-line comments - also named block level comments - are only used for file and function headers and should start with `/**`, end with `*/` and have a `*` for each comment line, like so: | ||
|
|
||
| ```js | ||
| /** | ||
| * This function does something. | ||
| * | ||
| * In this function, you will | ||
| * find magic! | ||
| */ | ||
| function doSomething() { | ||
| // magic | ||
| } | ||
| ``` | ||
|
|
||
| Annotation comments are also welcome. | ||
|
|
||
| ```js | ||
| /** | ||
| * This method does something. | ||
| * | ||
| * In this method, you will | ||
| * find magic! | ||
| * | ||
| * @method doSomething | ||
| * @param {String} someArg The spell | ||
| * @return void | ||
| */ | ||
| someObj.doSomething = function(someArg) { | ||
| // magic | ||
| } | ||
| ``` | ||
|
|
||
|
|
||
| ## Quotes | ||
|
|
||
| Use single quotes: `'`. Strings that require inner quoting must use single outside and double inside. | ||
|
|
||
| ## Semicolons | ||
|
|
||
| Use them. Never rely on ASI. | ||
| Use them. Never rely on ASI. EVER! | ||
|
|
||
| ## Naming Conventions | ||
|
|
||
| Variable and function names should be full words, using camel case with a lowercase first letter. Names should be descriptive but not excessively so. Exceptions are allowed for iterators, such as the use of i to represent the index in a loop. | ||
| Variable and function names should be full words, using camel case with a lowercase first letter. | ||
| ```js | ||
| let someData; | ||
|
|
||
| function someFunc() {}; | ||
| ``` | ||
|
|
||
| Constructors need a capital first letter, but modules do not. | ||
| Names should be descriptive but not excessively so. Exceptions are allowed for iterators, such as the use of i to represent the index in a loop. | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. i -> |
||
|
|
||
| Constructors and classes need a capital first letter(pascal case), but modules do not. | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What do "modules" refer to, specifically? |
||
|
|
||
| ```js | ||
| function SomeConstructiveFunc() {} | ||
| class SomeClass {} | ||
| ``` | ||
|
|
||
| ## Switch statements | ||
|
|
||
| The usage of switch statements is generally discouraged. | ||
| But you need to use it, besure you cast its type: | ||
|
|
||
| ```js | ||
| switch (parseInt(theNum, 10)) { | ||
| case 1: { break; } | ||
| case 2: | ||
| case 3: | ||
| case 4: { break; } | ||
| default: {} | ||
| } | ||
| ``` | ||
| Also, always use braces, and prefer to define a default to it whenever possible. | ||
|
|
||
| ## Throwing, Trying and Catching | ||
|
|
||
| - ALways throw an `Error` instance. | ||
|
|
||
| ```js | ||
| // bad | ||
| throw 'something went wrong!'; | ||
|
|
||
| // god | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. god -> good |
||
| throw new Error('something went wrong!'); | ||
| ``` | ||
|
|
||
| - Avoid using multiple try/catch. | ||
|
|
||
| ```js | ||
| // bad | ||
| try { | ||
| doThis(); | ||
| try { | ||
| andThenThat(); | ||
| } catch (e) { | ||
| console.error('that failed'); | ||
| } | ||
| } catch (e) { | ||
| console.error('this failed'); | ||
| } | ||
|
|
||
| // good | ||
| try { | ||
| // in case of error, throws a new Error('this failed'); | ||
| doThis(); | ||
| // in case of error, throws a new Error('that failed'); | ||
| andThenThat(); | ||
| } catch (e) { | ||
| console.error(e.message); | ||
| } | ||
| ``` | ||
|
|
||
| Never leave a `catch` empty. | ||
|
|
||
| ## Linting and checking | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ECMAScript modules (ES2015+) are implicitly strict. Perhaps add a note about
"use strict"being redundant in ES2015+ module code?