diff options
Diffstat (limited to 'doc/development/fe_guide/style/javascript.md')
-rw-r--r-- | doc/development/fe_guide/style/javascript.md | 30 |
1 files changed, 23 insertions, 7 deletions
diff --git a/doc/development/fe_guide/style/javascript.md b/doc/development/fe_guide/style/javascript.md index f22e3ea6395..4a0923ebe19 100644 --- a/doc/development/fe_guide/style/javascript.md +++ b/doc/development/fe_guide/style/javascript.md @@ -136,24 +136,40 @@ the class name with `js-`. ## ES Module Syntax -Use ES module syntax to import modules: +For most JavaScript files, use ES module syntax to import or export from modules. +Prefer named exports, as they improve name consistency. ```javascript -// bad -const SomeClass = require('some_class'); +// bad (with exceptions, see below) +export default SomeClass; +import SomeClass from 'file'; // good -import SomeClass from 'some_class'; +export { SomeClass }; +import { SomeClass } from 'file'; +``` + +Using default exports is acceptable in a few particular circumstances: + +- Vue Single File Components (SFCs) +- Vuex mutation files + +For more information, see [RFC 20](https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/20). +## CommonJS Module Syntax + +Our Node configuration requires CommonJS module syntax. Prefer named exports. + +```javascript // bad module.exports = SomeClass; +const SomeClass = require('./some_class'); // good -export default SomeClass; +module.exports = { SomeClass }; +const { SomeClass } = require('./some_class'); ``` -We still use `require` in `scripts/` and `config/` files. - ## Absolute vs relative paths for modules Use relative paths if the module you are importing is less than two levels up. |