eslint-config-dicodingacademy 0.9.0

package/README.md

@@ -0,0 +1,608 @@
+# Dicoding Academy JavaScript - Style Guide
+
+## Introduction
+
+> Ada banyak sekali opsi yang bisa diikuti perihal gaya penulisan kode JavaScript. Oleh sebab itu, untuk mengurangi kebingungan, kami standarkan penulisan kode JavaScript yang digunakan dalam lingkup Dicoding Academy.
+
+*Style guide* ini dibuat untuk menstandarkan penulisan kode JavaScript yang berada di dalam platform Dicoding Academy, seperti potongan kode yang kami ajarkan di dalam sebuah kelas. Selain itu, style guide ini bisa menjadi panduan bagi siswa untuk menstandarkan gaya penulisan kode JavaScript dalam berbagai aktivitas, salah satunya ketika pengerjaan proyek submission.
+
+
+
+## Meta Rules
+
+### Encoding menggunakan UTF-8
+
+Untuk menampilkan dan mengubah teks dengan benar, teks editor harus mengetahui *text encoding* yang digunakan. Pastikan *text encoding* yang digunakan adalah **UTF-8**. Pada teks editor yang umum (seperti VSCode atau WebStorm), informasi encoding yang digunakan dapat ditemukan di *status bar* yang berada di bawah kode editor.
+
+Informasi tambahan:
+
+- https://www.jetbrains.com/help/idea/encoding.html
+
+
+
+### Comments
+
+Gunakan komentar untuk menjelaskan kode yang ditulis, seperti baris kode yang sulit dimengerti, informasi argumen pada sebuah fungsi, dan lain sebagainya. Jangan menambahkan komentar pada kode yang "mudah" untuk dibaca dan dimengerti.
+
+#### Multiline Comment
+
+Gunakan `/** ... */` untuk komentar lebih dari satu baris.
+
+Contoh **SALAH** ⛔.
+
+```javascript
+// make() returns a new element
+// based on the passed in tag name
+function make(tag) {
+  
+  // ...
+    
+  return element;
+}
+```
+
+Contoh **BENAR** ✅.
+
+```javascript
+/**
+ * make() returns a new element
+ * based on the passed in tag name
+ */
+function make(tag) {
+  
+  // ...
+    
+  return element;
+}
+```
+
+
+
+#### Singleline Comment
+
+Gunakan `//` untuk komentar satu baris. Sebisa mungkin komentar ditulis di baris baru.
+
+Contoh **SALAH** ⛔.
+
+```javascript
+const interval = 60_000; // 1 hour in millis
+
+/**
+ * 1 hour in milis
+ */
+const interval = 60_000;
+```
+
+Contoh **BENAR** ✅.
+
+```javascript
+// 1 hour in millis
+const interval = 60_000;
+```
+
+
+
+#### Type Information
+
+Anda dapat (secara opsional) mendokumentasikan kode yang ditulis (termasuk menjelaskan informasi tipe data) menggunakan komentar yang ditulis dengan mengikuti format standar JSDoc. Format yang standar dapat dikenali oleh Code Editor sehingga dapat membantu memudahkan pengembangan.
+
+Contoh **SALAH** ⛔ karena tidak menggunakan standar format apa pun.
+
+```javascript
+/**
+ * function that sum two of numbers
+ * Potentially throwing an TypeError
+ * a is number
+ * b is number
+ */
+function sum(a, b) {
+  if (typeof a !== 'number' || typeof b !== 'number') {
+    throw new TypeError('all given argument should be a number');
+  }
+  
+  return a + b;
+}
+```
+
+Contoh **BENAR** ✅ dengan mengikuti format JSDoc.
+
+```javascript
+/**
+ * function that sum two of numbers
+ * 
+ * @throws {TypeError} will throw if the arguments is not number
+ * @params {number} a
+ * @params {number} b
+ */
+function sum(a, b) {
+  if (typeof a !== 'number' || typeof b !== 'number') {
+    throw new TypeError('all given argument should be a number');
+  }
+  
+  return a + b;
+}
+```
+
+Informasi tambahan:
+
+- https://jsdoc.app/
+
+  
+
+### Action Items
+
+Tandai sebuah  *placeholder* (hal yang perlu dilakukan) dengan teks `TODO:`. Anda bisa gunakan `//` jika to-do dijelaskan dalam satu baris atau `/** */` jika lebih dari satu baris. Jangan tambahkan karakter lain seperti `@` atau `@@` ketika menulis `TODO:` karena tidak perlu.
+
+Berikut adalah contoh yang **SALAH** ⛔.
+
+```javascript
+function sum(a, b) {
+    // @TODO: throws an TypeError when both argument is not number
+    
+    return a + b;
+}
+```
+
+Berikut adalah contoh yang **BENAR** ✅.
+
+```javascript
+function sum(a, b) {
+  // TODO: throws an TypeError when both argument is not number
+  
+  return a + b;
+}
+
+
+/**
+ * TODO:
+ * Create a function that:
+ *  - called average
+ *  - receives an array of numbers as argument
+ *  - ... etc
+ */
+```
+
+
+
+### Line Break (Line Endings)
+
+Anda harus menggunakan format baris baru yang konsisten pada setiap berkas. Di panduan ini kami fokuskan hanya pada penggunaan **unix** (LF atau \n). Pada teks editor yang umum (seperti VSCode atau WebStorm), informasi *line endings* yang digunakan dapat ditemukan di *status bar* yang berada di bawah kode editor.
+
+Informasi tambahan:
+
+- https://www.jetbrains.com/help/webstorm/configuring-line-endings-and-line-separators.html
+- https://www.cs.toronto.edu/~krueger/csc209h/tut/line-endings.html
+
+
+
+## Code Styles
+
+### Trailing Whitespace
+
+Terkadang kita tidak sadar menambahkan spasi (*whitespace*) yang tidak perlu di akhir baris kode. Bila whitespace tersebut terbawa ke VCS seperti git, tidak jarang developer menjadi bingung dan frustrasi mencari "perbedaan" dari sebuah baris kode karena sulit untuk terlihat. Maka dari itu, pastikan setiap akhir baris kode bersih dari *whitespace*.
+
+Contoh yang **SALAH** ⛔ karena baris kode (pertama) mengandung *whitespace*.
+
+```javascript
+const foo = 0;        
+const bar = 5;
+```
+
+Contoh yang **BENAR** ✅. Tidak ada *whitespace* di setiap akhir baris kode.
+
+```javascript
+const foo = 0;
+const bar = 5;
+```
+
+
+
+### Indentation
+
+Penggunaan indentasi pada kode harus konsisten. Untuk menjaga konsistensi, kami menggunakan **2**  buah **spasi** sebagai indentasi.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+function adder(by) {
+    return (value) => {
+        return by + value;
+  }
+}
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+function adder(by) {
+  return (value) => {
+    return by + value;
+  }
+}
+```
+
+
+
+### Naming
+
+Secara umum penamaan variabel atau fungsi harus menggunakan format `camelCase`.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+const my_favorite_color = '#112C85';
+
+function do_something() {
+  // ...
+}
+
+const { from_json } = JSON.parse('{}');
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+const myFavoriteColor = '#112C85';
+
+function doSomething() {
+  // ...
+}
+
+const { from_json: fromJson } = JSON.parse('{}');
+```
+
+
+
+### Arrow Function Parentheses
+
+Agar menjaga konsistensi penulisan, selalu gunakan tanda kurung (parentheses) setiap kali membuat arrow function baik tanpa argumen, 1 argumen, atau lebih.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+document.addEventListener('click', event => {
+  // ...
+});
+
+store.subscribe(() => {
+  // ...
+})
+
+server.handler((request, response) => {
+  // ...
+});
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+document.addEventListener('click', (event) => {
+  // ...
+});
+
+store.subscribe(() => {
+  // ...
+})
+
+server.handler((request, response) => {
+  // ...
+});
+```
+
+
+
+### Formatting
+
+#### Comma
+
+Selalu tambahkan spasi di antara nilai yang dipisahkan oleh tanda koma.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+function sum(a,b,c) {
+  // ...
+}
+
+const numbers = [1,2,3,4];
+const person = { name: 'Fulan',age: 30 };
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+function sum(a, b, c) {
+  // ...
+}
+
+const numbers = [1, 2, 3, 4];
+const person = { name: 'Fulan', age: 30 };
+```
+
+
+
+#### Object Literals
+
+Selalu tambahkan spasi di antara tanda `{ }` dan nama properti yang didefinsikan dalam satu baris.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+const person = {name: 'Fulan', age: 30};
+const {name, age} = person;
+
+function printPerson({name, age}) {
+  // ...
+}
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+const person = { name: 'Fulan', age: 30 };
+const { name, age } = person;
+
+
+function printPerson({ name, age }) {
+  // ...
+}
+```
+
+
+
+#### Array Literals
+
+Jangan tambahkan spasi di antara tanda `[ ]` dan elemen di dalam array.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+const numbers = [ 1, 2, 3 ];
+const [ first, second ] = numbers;
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+const numbers = [1, 2, 3];
+const [first, second] = numbers;
+```
+
+
+
+#### Parentheses
+
+Jangan tambahkan spasi di antara tanda `( )` dan expression yang ada di dalamnya.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+function sum( a, b ) {
+  // ...
+}
+
+const value = 1 + ( 2 * 1 );
+
+if ( value === 1 ) {
+  // ...
+}
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+function sum(a, b) {
+  // ...
+}
+
+const value = 1 + (2 * 1);
+
+if (value === 1) {
+  // ...
+}
+```
+
+
+
+#### Control Statement
+
+Beri 1 spasi sebelum menggunakan tanda `()` pada *control statement* (contohnya `if`, `while`, `for`, dan lainnya). Namun, jangan berikan 1 spasi antara daftar argumen dan nama fungsi ketika mendeklarasikan regular function ataupun ketika memanggil sebuah fungsi.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+function fight () {
+  console.log('Swooosh!');
+}
+
+if(isJedi) {
+  fight ();
+}
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+function figth() {
+  console.log('Swooosh!');
+}
+
+if (isJedi) {
+  fight();
+}
+```
+
+
+
+## Language Rules
+
+### Variable Declaration
+
+#### Prefer using `const`
+
+Gunakan `const` ketika membuat sebuah variabel yang tidak ditetapkan ulang nilainya.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+let a = 1;
+var b = 2;
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+const a = 1;
+const b = 2;
+```
+
+
+
+#### Using `let`, avoid `var`
+
+Jika sebuah variabel perlu ditetapkan ulang nilainya, gunakan `let` alih-alih `var`.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+var count = 1;
+
+if (true) {
+  count += 1;
+}
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+let count = 1;
+
+if (true) {
+  count += 1;
+}
+```
+
+Informasi tambahan:
+
+- https://dev.to/mindninjax/stop-using-var-for-declaring-variables-2p3a
+
+### Semicolon
+
+Di balik layar, JavaScript akan menambahkan **titik koma**--*sesuai aturan yang berlaku*--sebagai tanda berakhirnya statement pada baris kode yang tidak diberikan semicolon. Aturan ini disebut sebagai *[Automatic Semicolon Insertion (ASI)](https://tc39.es/ecma262/#sec-automatic-semicolon-insertion)*. ASI mengandung beberapa perilaku yang esentrik dan membuat kode yang kita tulis rusak jika ia salah menginterpretasikan baris kode tersebut. ASI juga akan semakin rumit dipahami seiring bertambahnya fitur atau sintaks pada bahasa pemrograman JavaScript. Dengan menuliskan titik koma (semicolon) secara eksplisit tentu akan membantu untuk mencegah masalah-masalah yang ditimbulkan karena ASI.
+
+Berikut contoh yang **SALAH** ⛔ karena kode akan membangkitkan error.
+
+```javascript
+// will raise exception
+const luke = {}
+const leia = {}
+[luke, leia].forEach((jedi) => jedi.father = 'vader')
+
+
+// will raise exception
+const reaction = "No! That’s impossible!"
+(async function meanwhileOnTheFalcon() {
+  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
+  // ...
+}())
+
+
+// return undefined because ASI insert semicolon after `return`
+function foo() {
+  return
+    'search your feelings, you know it to be foo'
+}
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+``` javascript
+// good
+const luke = {};
+const leia = {};
+[luke, leia].forEach((jedi) =>  jedi.father = 'vader');
+
+// good
+const reaction = 'No! That’s impossible!';
+(async function meanwhileOnTheFalcon() {
+  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
+  // ...
+}());
+
+// good
+function foo() {
+  return 'search your feelings, you know it to be foo';
+}
+```
+
+Informasi tambahan:
+
+-  https://stackoverflow.com/questions/7365172/semicolon-before-self-invoking-function/7365214#7365214
+
+### Strings
+
+Agar konsisten, selalu gunakan **kutip satu** `' '` untuk membuat nilai string.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+// Bad
+const name = "Fulan";
+
+// Bad
+const address = `Bandung`;
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+// Good
+const name = 'Fulan';
+const address = 'Bandung';
+```
+
+Anda boleh gunakan tanda lain untuk kasus-kasus tertentu, seperti:
+
+Gunakan `" "` jika nilai string mengandung karakter '.
+
+```javascript
+// Bad
+const movie = 'Howl\'s Moving Castle';
+
+// Good
+const movie = "Howl's Moving Castle";
+```
+
+Gunakan ` `` ` jika membutuhkan JavaScript expression dalam membangun nilai string.
+
+```javascript
+// Bad
+function sayHi(name) {
+  return 'How are you, ' + name + '?';
+}
+
+// Good
+function sayHi(name) {
+  return `How are you, ${name}?`;
+}
+```
+
+
+
+### Arrow Function for Function Expressions
+
+Function di JavaScript merupakan first-class citizen. Sama seperti nilai primitif, function dapat  berupa expression dan disimpan menjadi nilai variabel, argumen fungsi, atau nilai yang dikembalikan oleh fungsi. Ketika Anda membuat function expression (contohnya menetapkan fungsi callback), gunakanlah arrow function.
+
+Berikut contoh yang **SALAH** ⛔.
+
+```javascript
+[1, 2, 3].map(function(x) {
+  return x * 2;
+});
+```
+
+Berikut contoh yang **BENAR** ✅.
+
+```javascript
+[1, 2, 3].map((x) => x * 2);
+```

package/index.js

@@ -0,0 +1,26 @@
+const config =  [
+  {
+    rules: {
+      'linebreak-style': ['error', 'unix'],
+      'no-trailing-spaces': 'error',
+      'indent': ['error', 2],
+      'camelcase': 'error',
+      'arrow-parens': ['error', 'always'],
+      'comma-spacing': ['error', { 'before': false, 'after': true }],
+      'object-curly-spacing': ['error', 'always'],
+      'array-bracket-spacing': ['error', 'never'],
+      'space-in-parent': ['error', 'never'],
+      'space-before-function-paren': ['error', 'never'],
+      'func-call-spacing': ['error', 'never'],
+      'keyword-spacing': ['error', { 'before': true, 'after': true }],
+      'prefer-const': 'error',
+      'no-var': 'error',
+      'semi': ['error', 'always'],
+      'quotes': ['error', 'single', { 'avoidEscape': true }],
+      'prefer-template': 'error',
+      'prefer-arrow-callback': 'error'
+    }
+  }
+]
+
+export default config;

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "eslint-config-dicodingacademy",
+  "version": "0.9.0",
+  "description": "Standard style and guide for writing JavaScript in Dicoding Academy ecosystem",
+  "main": "index.js",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dicodingacademy/javascript-style-guide.git"
+  },
+  "keywords": [
+    "javascript",
+    "style",
+    "guide",
+    "eslint",
+    "eslintconfig"
+  ],
+  "author": "dicodingacademy",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/dicodingacademy/javascript-style-guide/issues"
+  },
+  "homepage": "https://github.com/dicodingacademy/javascript-style-guide#readme",
+  "peerDependencies": {
+    "eslint": ">= 9"
+  }
+}