This content originally appeared on DEV Community and was authored by Christian Duarte
Improvements...
This week I had the task of implementing a formatter and a linter into my F2Read repository project.
Tools...
The tools I chose to implement this week were 'Prettier Formatter' and 'ESLint'.
Prettier formatter
Prettier formatter is a VSCode extension and/or npm module that can be used to format code in a nice looking way with a simple command or the click of a button. I chose prettier as I had been using it already to format my documents in VSCode for quite a while now, and on my old PC had it set up for formatting on save from an older project in last year's cloud computing class. The documentation can be found here
ESLint
ESLint is another VSCode extension and/or npm module that can be used to check for lint warnings and errors live while programming, or with a simple command run. I chose ESLint as I have chosen to have it in react projects in the past and figured it would be easy to start with. The documentation can be found here
Setup...
Prettier formatter
For the prettier setup, I had to run various commands, and ignore several files and folders in the configuration files, while leaving the format settings to their defaults. I followed the official prettier documentation which I will list below as I used their 'bun' section.
Commands (In-Order):
bun add --dev --exact prettier
bun --eval "fs.writeFileSync('.prettierrc','{}\n')"
node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
Make any changes to the .prettierignore as needed:
Add the below script to the package.json scripts: >
bun prettier . --write
ESLint
For the ESLint setup, I had to install dependencies, and left all the default configurations as they were.
Commands (In-Order):
bun add -d eslint
bun eslint --init
bun add -d eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
Add the below script to the package.json scripts to run the linter on any files, in my case the src/ directory: >
eslint src/*.ts
Auto Linting and Formatting...
For auto linting and formatting in VSCode, please visit the bottom section of my CONTRIBUTIONS.md here, where I have outlined the steps to do so.
Bugs and Issues...
While working, I found no issues with the prettier format once I ran the script. My code worked fine, and it removed unnecessary whitespaces within my code. As mentioned before, I have been using it to format while working already through the VSCode extension, so there was no conflictions, errors, or bugs for me. With ESLint, I found several errors of which 2 I placed ignoring comments due to them being an err in a catch wasn't used. I wanted these ignored because they had custom error messages by me used in place, and I did not find it as an ACTUAL issue to my program. The third I commented was an issue of a type being any, where it could be explicitly defined. It was in receiving the Ollama response. I found it was easier for me to leave the definition as any because that was my choice of how to define it (it gets redefined one line after) and I left it ignored. The other issues, I did use the lint suggestions and cleaned up my bugs. Mostly setting const for variables of let that never get redefined.
Tools running from CLI...
As provided in my setup above, adding the scripts allowed me to run the tools from the command line. The prettier script opens up all of my files and formats them to the prettier format, and the ESLint script checks only my src/command.ts file for lint errors as it contains my main logic, and my only other file is just 1 line of code that had no issues when I tested it.
IDE Integration...
To integrate into my IDE, I mentioned it above in my steps as well. But I will provide screenshots here for context. The implementation into my IDE can be seen below:
What did I learn
Overall from this process I learned or re-learned how to install a formatter and linter into my code, set up auto formatting, auto and live linting, and set up GIT Hooks into my code. I also did a better job this time around of rebasing, squashing, and then committing and pull requesting my code, and was way more successful with my squash. I was in less of a rush and was more comfortable this lab than when I did the last one with rebasing, and I enjoyed it much more thoroughly this time. Overall this was a short but solid lab and learning experience for me.
This content originally appeared on DEV Community and was authored by Christian Duarte
Christian Duarte | Sciencx (2024-11-02T02:00:54+00:00) Lab 6 – Formatting and Linting. Retrieved from https://www.scien.cx/2024/11/02/lab-6-formatting-and-linting/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.