diff --git a/docs/contributors/coding-guidelines.md b/docs/contributors/coding-guidelines.md index c47fda1ab070a5..1b4524ffcf9ac7 100644 --- a/docs/contributors/coding-guidelines.md +++ b/docs/contributors/coding-guidelines.md @@ -102,76 +102,30 @@ If an API must be exposed but is clearly not intended to be supported into the f export { __unstableDoAction } from './api'; ``` -### Variable Naming +### Objects -Gutenberg inherits [WordPress' naming conventions of camel-casing](https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/#naming-conventions): - ->Variable and function names should be full words, using camel case with a lowercase first letter. This is an area where this standard differs from the WordPress PHP coding standards. -> ->Constructors intended for use with `new` should have a capital first letter (UpperCamelCase). - -However, Gutenberg is more specific about its handling of abbreviations, acronyms, constants, and the ES2015 class construct. - -#### Abbreviations and Acronyms - -[*Abbreviations*](https://en.wikipedia.org/wiki/Abbreviation) must be written as camel case, with an initial capitalized letter followed by lowercase letters. - -[*Acronyms*](https://en.wikipedia.org/wiki/Acronym) must be written with each of its composing letters capitalized. This is intended to reflect that each letter of the acronym is a proper word in its expanded form. - -If an abbreviation or an acronym occurs at the start of a variable name, it must be written to respect the camelcase naming rules covering the first letter of a variable or class definition. For variable assignment, this means writing the abbreviation entirely as lowercase. For class definitions, its initial letter should be capitalized. - -**Examples:** - -```js -// "Id" is an abbreviation of "Identifier": -const userId = 1; - -// "DOM" is an acronym of "Document Object Model": -const currentDOMDocument = window.document; - -// Acronyms and abbreviations at the start of a variable name are consistent -// with camelcase rules covering the first letter of a variable or class. -const domDocument = window.document; -class DOMDocument {} -class IdCollection {} -``` - -#### Class Definition - -A [`class` definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) must use the UpperCamelCase convention, regardless of whether it is intended to be used with `new` construction. - -**Example:** +When possible, use [shorthand notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) when defining object property values: ```js -class Earth { - static addHuman( human ) { - Earth.humans.push( human ); - } - - static getHumans() { - return Earth.humans; - } -} - -Earth.humans = []; -``` - -All `@wordpress/element` Components, including stateless function components, should be named using Class Definition naming rules, both for consistency and to reflect the fact that a component may need to be transitioned from a function to a class without breaking compatibility. - -**Examples:** +const a = 10; -```js -class MyComponent extends Component {} +// Bad: +const object = { + a: a, + performAction: function() { + // ... + }, +}; -function MyComponent() {} +// Good: +const object = { + a, + performAction() { + // ... + }, +}; ``` -#### Constants - -An exception to camel case is made for constant values which are never intended to be reassigned or mutated. Such variables must use the [SCREAMING_SNAKE_CASE convention](https://en.wikipedia.org/wiki/Snake_case). - -In almost all cases, a constant should be defined in the top-most scope of a file. It is important to note that [JavaScript's `const` assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) is conceptually more limited than what is implied here, where a value assigned by `const` in JavaScript can in-fact be mutated, and is only protected against reassignment. A constant as defined in these coding guidelines applies only to values which are expected to never change, and is a strategy for developers to communicate intent more so than it is a technical restriction. - ### Strings String literals should be declared with single-quotes *unless* the string itself contains a single-quote that would need to be escaped–in that case: use a double-quote. If the string contains a single-quote *and* a double-quote, you can use ES6 template strings to avoid escaping the quotes. diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js index 06732edc108dc9..56f7a2c8772c4b 100644 --- a/docs/tool/manifest.js +++ b/docs/tool/manifest.js @@ -91,10 +91,10 @@ function generateRootManifestFromTOCItems( items, parent = null ) { } pageItems.push( { - title: title, - slug: slug, + title, + slug, markdown_source: `${ baseRepoUrl }\/${ fileName }`, - parent: parent, + parent, } ); if ( Array.isArray( children ) && children.length ) { pageItems = pageItems.concat( generateRootManifestFromTOCItems( children, slug ) ); diff --git a/packages/block-library/src/classic/edit.js b/packages/block-library/src/classic/edit.js index f0eb37ff30ca9b..49c1ec2340e506 100644 --- a/packages/block-library/src/classic/edit.js +++ b/packages/block-library/src/classic/edit.js @@ -128,7 +128,7 @@ export default class ClassicEdit extends Component { editor.addButton( 'kitchensink', { tooltip: _x( 'More', 'button to expand options' ), icon: 'dashicon dashicons-editor-kitchensink', - onClick: function() { + onClick() { const button = this; const active = ! button.active(); diff --git a/packages/block-library/src/html/index.js b/packages/block-library/src/html/index.js index 74233c565036ec..b537f2a8d6e421 100644 --- a/packages/block-library/src/html/index.js +++ b/packages/block-library/src/html/index.js @@ -59,7 +59,7 @@ export const settings = { ], }, - edit: edit, + edit, save( { attributes } ) { return { attributes.content }; diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index e315f551cc9f3f..934efe8dc1c90d 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -174,9 +174,9 @@ export const settings = { 'has-drop-cap': dropCap, } ); const styles = { - backgroundColor: backgroundColor, + backgroundColor, color: textColor, - fontSize: fontSize, + fontSize, textAlign: align, }; diff --git a/packages/block-library/src/verse/index.js b/packages/block-library/src/verse/index.js index 46bfac96d22082..0993bfa4f9c7eb 100644 --- a/packages/block-library/src/verse/index.js +++ b/packages/block-library/src/verse/index.js @@ -76,7 +76,7 @@ export const settings = { content: nextContent, } ); } } - style={ { textAlign: textAlign } } + style={ { textAlign } } placeholder={ __( 'Write…' ) } wrapperClassName={ className } onMerge={ mergeBlocks } @@ -91,7 +91,7 @@ export const settings = { return ( ); diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index cd38fecd9ed2c2..176498ecd113bc 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -37,16 +37,16 @@ const styles = StyleSheet.create( { fontWeight: 'bold', fontSize: 13, alignSelf: 'flex-end', - marginLeft: marginLeft, - marginBottom: marginBottom, + marginLeft, + marginBottom, }, subscriptActive: { color: 'white', fontWeight: 'bold', fontSize: 13, alignSelf: 'flex-end', - marginLeft: marginLeft, - marginBottom: marginBottom, + marginLeft, + marginBottom, }, } ); diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js index 3dfe358954e1f3..c70db00206f49b 100644 --- a/packages/components/src/color-palette/index.js +++ b/packages/components/src/color-palette/index.js @@ -27,7 +27,7 @@ export default function ColorPalette( { colors, disableCustomColors = false, val return (
{ map( colors, ( { color, name } ) => { - const style = { color: color }; + const style = { color }; const itemClasses = classnames( 'components-color-palette__item', { 'is-active': value === color } ); return ( diff --git a/packages/components/src/form-token-field/test/index.js b/packages/components/src/form-token-field/test/index.js index 1fb0992fff5567..3199cdfa447cd3 100644 --- a/packages/components/src/form-token-field/test/index.js +++ b/packages/components/src/form-token-field/test/index.js @@ -49,7 +49,7 @@ describe( 'FormTokenField', function() { TestUtils.Simulate.keyDown( wrapperElement(), { - keyCode: keyCode, + keyCode, shiftKey: ! ! shiftKey, } ); @@ -58,7 +58,7 @@ describe( 'FormTokenField', function() { function sendKeyPress( charCode ) { TestUtils.Simulate.keyPress( wrapperElement(), - { charCode: charCode } + { charCode } ); } diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 0663fcd5f98b36..3f3ed97063cd8c 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -92,7 +92,7 @@ export default compose( return { openGeneralSidebar: () => openGeneralSidebar( getBlockSelectionStart() ? 'edit-post/block' : 'edit-post/document' ), - closeGeneralSidebar: closeGeneralSidebar, + closeGeneralSidebar, }; } ), )( Header ); diff --git a/packages/editor/src/components/block-draggable/index.js b/packages/editor/src/components/block-draggable/index.js index a9c3e6cad0d8ea..27a44ce2a852b6 100644 --- a/packages/editor/src/components/block-draggable/index.js +++ b/packages/editor/src/components/block-draggable/index.js @@ -22,8 +22,8 @@ const BlockDraggable = ( { children, clientId, rootClientId, blockElementId, ind { ( { onDraggableStart, onDraggableEnd } ) => { return children( { - onDraggableStart: onDraggableStart, - onDraggableEnd: onDraggableEnd, + onDraggableStart, + onDraggableEnd, } ); } } diff --git a/packages/editor/src/components/inserter/test/menu.js b/packages/editor/src/components/inserter/test/menu.js index 7538f1639b1fca..0ad4ef34c1a5df 100644 --- a/packages/editor/src/components/inserter/test/menu.js +++ b/packages/editor/src/components/inserter/test/menu.js @@ -93,7 +93,7 @@ const items = [ const DEFAULT_PROPS = { position: 'top center', - items: items, + items, debouncedSpeak: noop, fetchReusableBlocks: noop, setTimeout: noop, diff --git a/packages/editor/src/editor-styles/ast/parse.js b/packages/editor/src/editor-styles/ast/parse.js index 0c91c972f7ba33..4f7e925c9937e1 100644 --- a/packages/editor/src/editor-styles/ast/parse.js +++ b/packages/editor/src/editor-styles/ast/parse.js @@ -36,7 +36,7 @@ export default function( css, options ) { */ function position() { - const start = { line: lineno, column: column }; + const start = { line: lineno, column }; return function( node ) { node.position = new Position( start ); whitespace(); @@ -50,7 +50,7 @@ export default function( css, options ) { function Position( start ) { this.start = start; - this.end = { line: lineno, column: column }; + this.end = { line: lineno, column }; this.source = options.source; } @@ -351,8 +351,8 @@ export default function( css, options ) { return pos( { type: 'keyframes', - name: name, - vendor: vendor, + name, + vendor, keyframes: frames, } ); } @@ -382,7 +382,7 @@ export default function( css, options ) { return pos( { type: 'supports', - supports: supports, + supports, rules: style, } ); } @@ -440,7 +440,7 @@ export default function( css, options ) { return pos( { type: 'media', - media: media, + media, rules: style, } ); } @@ -527,7 +527,7 @@ export default function( css, options ) { return pos( { type: 'document', document: doc, - vendor: vendor, + vendor, rules: style, } ); } diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index 3d6a36751ddd1d..0ab0b2624c58d8 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -1,3 +1,9 @@ +## 2.0.0 (Unreleased) + +### Breaking Changes + +- The `esnext` and `recommended` rulesets now enforce [`object-shorthand`](https://eslint.org/docs/rules/object-shorthand) + ## 1.0.0 (2018-12-12) ### New Features diff --git a/packages/eslint-plugin/configs/esnext.js b/packages/eslint-plugin/configs/esnext.js index 7e01f959fde72d..8ea39cb8649665 100644 --- a/packages/eslint-plugin/configs/esnext.js +++ b/packages/eslint-plugin/configs/esnext.js @@ -23,6 +23,7 @@ module.exports = { 'no-useless-computed-key': 'error', 'no-useless-constructor': 'error', 'no-var': 'error', + 'object-shorthand': 'error', 'prefer-const': 'error', quotes: [ 'error', 'single', { allowTemplateLiterals: true, avoidEscape: true } ], 'space-unary-ops': [ 'error', { diff --git a/packages/hooks/src/createHooks.js b/packages/hooks/src/createHooks.js index 3e5c0dbf934f0b..9915a1167e31f9 100644 --- a/packages/hooks/src/createHooks.js +++ b/packages/hooks/src/createHooks.js @@ -34,8 +34,8 @@ function createHooks() { doingFilter: createDoingHook( filters ), didAction: createDidHook( actions ), didFilter: createDidHook( filters ), - actions: actions, - filters: filters, + actions, + filters, }; } diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js index c45d20ce088be0..d320e5fcfcdf22 100644 --- a/packages/rich-text/src/create.js +++ b/packages/rich-text/src/create.js @@ -124,7 +124,7 @@ export function create( { if ( typeof text === 'string' && text.length > 0 ) { return { formats: Array( text.length ), - text: text, + text, }; }