Add prettier and eslint
Published: 2021-11-09 05:13:31


[Prettier](https://prettier.io/docs/en/install.html) is an opinionated automatic code formatter with lots of programming languages and IDE. The reason why I chose this one is first, I saw in the different projects. It means that it is widely used in javascript projects. And it seems easy to install and use it.

These are the steps to how I added prettier to my project.
1. Enter `npm install --save-dev --save-exact prettier` to download the prettier.
2. Enter `echo {}> .prettierrc.json` to create empty JSON file.
3. Create ".prettierignore" and add the build and coverage to ignore it. 
`
# Ignore artifacts:
build
coverage
`
4. Run "npx prettier --write ." to run prettier formatter
5. Run  "npx prettier --check ." to check if the files are already formatted.

These are the steps to implement prettier in the project.
However, I added one more step to make it the developers easier to format the code. 
6. Add "prettier": "npx prettier --write ./src/*.js" in the scripts in package.json file. 
So, the developer can just run prettier with "npm run prettier" 

When I run this prettier formatter it changed the different tab sizes to the same size by 3spaces, changed the single quotes to double quotes, and add semi-colons where I didn't add. 

And for the [eslint](https://eslint.org/docs/user-guide/getting-started), it is a code analysis tool that optimizes the code and coding styles of javaScript. The reason why I chose this one is first, as same as prettier, I saw this plugin in the other open-source project and it made me research a lot to fix the error when I worked on the error in the previous assignment. 

These are the steps that I followed to implement it on my project
1. Enter `npm install eslint --save-dev` to install
2. Enter `npx eslint --init` to do the basic setting of the eslint. These are what I chose while initializing the eslint.
```
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No 
√ Where does your code run? · node
√ What format do you want your config file to be in? · JavaScript
```
3. Enter `npx eslint [filename]` to run the eslint on the codes. 
4. Edit eslintrc.js file
I chose two options. 
   1. Double quotes for String 
   2. Semicolon is required

```
 "rules": {
        "semi": ["error", "always"], 
        "quotes": ["error", "double"]
    }
```
As same as prettier, I added one more step to make the developer easily use the eslint.
5. Add ` "eslint" : "npx eslint ./src/*.js" ` in the scipts in package.json file. 
So, they can run eslint with `npm run eslint` and it is applied to all the necessary files.

When I run this eslint formatter it caused lots of defects.

```
   79:13  error  'patternExt' is assigned a value but never used  no-unused-vars
   86:16  error  'str' is assigned a value but never used         no-unused-vars
  112:57  error  'err' is defined but never used                  no-unused-vars

C:\Users\suhhe\Documents\git\new\create-ssg\create-ssg\src\htmlCreator.js
    1:7   error  'path' is assigned a value but never used  no-unused-vars
   13:18  error  Unnecessary escape character: \>           no-useless-escape
   14:18  error  Unnecessary escape character: \>           no-useless-escape
   16:17  error  Unnecessary escape character: \_           no-useless-escape
   16:19  error  Unnecessary escape character: \_           no-useless-escape
   16:25  error  Unnecessary escape character: \_           no-useless-escape
   16:27  error  Unnecessary escape character: \_           no-useless-escape
   17:17  error  Unnecessary escape character: \`           no-useless-escape
  125:14  error  'metadata' is defined but never used       no-unused-vars

✖ 13 problems (13 errors, 0 warnings)
``` 
Hence, I need to go to the location with the error and fix the code. most of them are defined but not used or useless escape characters. So, I need to fix those issues to optimize my code and run the program. 

Finally, I edited the settings.json file to help new contributors to my project automate the two prettier and eslint on the vscode.
```
{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}
```
After I finished all the implementation of two tools, I [squashed all the previous commits](https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg/commit/5fcde04adce33a1163564619de3c463f3dbccba4) I did in this lab. And I [merged it](https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg/commit/8c41ae83bbaeed58ddfff9381fc0180728a63e8b) to the main branch.

For lab 7, I added [prettier](https://prettier.io/docs/en/install.html) and [eslint](https://eslint.org/docs/user-guide/getting-started) to my static site generator. I saw these two while I was working on the last assignment. To be honest, when I am working on a project with prettier and eslint, it was annoying to me. Because first I can estimate what prettier and eslint were doing, but the errors that the two asked me to fix were not even affected in running codes. But, I fixed it because or else it does not run in the code. After I listen to this week's lecture, I thought the errors were understandable. Because now I know that how it works and why they needed in projects. As these two tools synchronize the codes from different contributors to one, I will use this tool, if I create a project in which I need to work together with other people.