Add prettier and eslint

Prettier 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.

1. 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, 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

1. Enter npx eslint [filename] to run the eslint on the codes.
2. 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.

1. 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 I did in this lab. And I merged it to the main branch.

For lab 7, I added prettier and eslint 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.