# JS Style Guide

For our javascript style guide we follow a style that is already popular and many other developers use to style their code,

{% embed url="<https://github.com/airbnb/javascript/blob/master/README.md>" %}

## Our rules with js writing

1. Use the library only when you need it&#x20;

When you want to use libraries like jquery, slick, swiper, etc. make it a habit to use the library (import or require) in a separate file from the main.js file. \
\
An Example case is when you want to make a slider using slick which is need jquery and slick itself needs to be like the image below :

<figure><img src="https://115803331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F705N8OeBYBxKGzhvaDVF%2Fuploads%2FY4ALteGklDQ7qoYq8Aeq%2Fimage.png?alt=media&#x26;token=eda25e82-28f4-4f0a-9d29-e2fbd7c303c6" alt=""><figcaption><p>Correct way to import the library</p></figcaption></figure>

Don't forget to reinitialize our js in the main.js file<br>

<figure><img src="https://115803331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F705N8OeBYBxKGzhvaDVF%2Fuploads%2FU44uekHML4DshE6nX27M%2Fimage.png?alt=media&#x26;token=ce3cfa7f-dbc8-4752-b147-300c803ce2c9" alt=""><figcaption><p>always write and initialize our js in main file</p></figcaption></figure>

The image below is an example of wrong library usage

<figure><img src="https://115803331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F705N8OeBYBxKGzhvaDVF%2Fuploads%2FmVUjhok8hwJtNC7sFVZX%2Fimage.png?alt=media&#x26;token=0d3caa6d-79d5-43d5-a63e-16cbbd02a163" alt=""><figcaption><p>Wrong way to import because its on main.js</p></figcaption></figure>

maybe you will think why we have to separate the use of the library even though if it is not separated it can work.\
\
this is the answer because our development uses a wordpress environment where there will be several different plugins for each project. if by chance between the plugin and custom code there is the same library. then a conflict will occur which can cause the plugin to be crashed\
\
So by separating this library from the main js file, the libraries in the plugin and the libraries in our custom code will run separately and avoid conflicts.

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://madeindonesia.gitbook.io/mi-guide/style-guide/js-style-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
