updated docs and pull request template

PULL_REQUEST_TEMPLATE.md

@@ -1,3 +1,8 @@
+<!--
+Before submitting this PR, please make sure that:
+- You have read and understand the contributing.md
+- You have checked docs/code_style.md for information on code style
+-->
 ## Description
 <!--
 Tell us what your PR does.
@@ -25,7 +30,7 @@ Change :white_circle: to :radio_button: in all the options that apply
 
 ## Checklist:
 
-- :white_circle: My code follows the project code style
+- :white_circle: My code follows [the project code style](docs/code_style.md)
 - :white_circle: I have written test for my code and it has been tested
 - :white_circle: All existing tests have been passed
 - :white_circle: I have attached a screenshot/video to visualize my change if possible

contributing.md

@@ -1,12 +1,24 @@
 # Contributing to Boostnote (English)
 
 ### When you open an issue or a bug report
-There is no issue template, but there is a request.
-
-**Please paste screenshots of Boostnote with the developer tool open**
+There is an issue template for you to follow. Please provide as much information as you can according to the template.
 
 Thank you in advance for your help.
 
+### When you open a pull request
+There is a pull request template for your to follow. Please fill in the template before submitting your code. Your pull request will be reviewed faster if we know exactly what it does.
+
+Make sure that you have:
+- Checked [`code_style.md`](docs/code_style.md) for information on code style
+- Write tests for your code and run test with the following command
+```
+npm run test
+```
+- Lint your code using the following command
+```
+npm run lint
+```
+
 ### Concerning Copyright
 
 By making a pull request you agree to transfer ownership of your code to BoostIO.

docs/code_style.md

@@ -0,0 +1,60 @@
+# Boostnote Code Style
+When submitting your PR, please make sure that your code is well tested and follow the code style of Boostnote.
+
+The code style of Boostnote is listed in [`.eslintrc`](.eslintrc). We also have additional code styles that is not mentioned in that file.
+
+## Additional code styles
+### Use ES6 Object Destructing
+
+Please use Object Destructing whenever it's possible.
+
+**Example**: Importing from library
+
+```js
+
+// BAD
+import Code from 'library'
+const subCode = Code.subCode
+subCode()
+
+// GOOD
+import { subCode } from 'library'
+subCode()
+```
+
+**Example**: Extract data from react component state
+
+```
+// BAD
+<h1>{this.state.name}</h1>
+
+// GOOD
+const { name } = this.state
+<h1>{name}</h1>
+```
+
+### Use meaningful name
+This is actually not a "code style" but rather a requirement in every projects. Please name your variables carefully.
+
+**Example**: Naming callback function for event
+
+```js
+// BAD
+<h1 onclick={onClick}>Name</h1>
+
+// GOOD
+<h1 onclick={onNameClick}>Name</h1>
+```
+
+### Don't write long conditional statement
+When writing a conditional statement, if it's too long, cut it into small meaningful variables.
+
+```js
+// BAD
+if (note.type == 'markdown' && note.index == 2 && note.content.indexOf('string') != -1)
+
+// GOOD
+const isSecondMarkdownNote = note.type == 'markdown' && note.index == 2
+const isNoteHasString = note.content.indexOf('string') != -1
+if (isSecondMarkdownNote && isNoteHasString)
+```