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.
- Enter
npm install --save-dev --save-exact prettier
to download the prettier. - Enter
echo {}> .prettierrc.json
to create empty JSON file. - Create ".prettierignore" and add the build and coverage to ignore it.
# Ignore artifacts: build coverage
- Run "npx prettier --write ." to run prettier formatter
- 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.
- 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
- Enter
npm install eslint --save-dev
to install - 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
- Enter
npx eslint [filename]
to run the eslint on the codes. - Edit eslintrc.js file
I chose two options.
- Double quotes for String
- 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.
- Add
"eslint" : "npx eslint ./src/*.js"
in the scipts in package.json file. So, they can run eslint withnpm 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.
Top comments (0)