Introduction
Hello everyone, today, I'd like to talk a bit about my experience using Eslint and Prettier in Visual studio code
Source code formatter
As I'm using Javascript for my project, I have Prettier as the default code formatter.
Prettier is a plug-in or extension in Visual studio code. What Prettier will do is that it will FORMAT your code in a prefect manner which means people who haven't never looked at your code can easily understand the flow and what your code is doing. The reason why I chose Prettier mainly because it gives my the ability of auto-formatting the code after pressing save, which indeed saves me a lot of time and energy.
To be honest, after installing and running the prettier script, my code didn't change much because I already have it installed in my visual studio. It checks every time I type something.
Linter
For linter, the most common one among javascript developers is Eslint. Eslint will help developers catch silly mistakes that they wouldn't thought of, they just forgot or bad coding patterns leading to bugs in the future.
However, for eslint, after running the script, I got a bunch of errors. A few errors were about process as it's a global variable and one was about variable that I declared but never used. The process error could be fixed by adding a line of global process. For the variable that never used, I had to look at the code again to see if that's actually redundant or something that I'm planning to do down the road.
Scripts that I added to my package.json
"eslint": "eslint --config .eslintrc.js",
"eslint-fix": "eslint --config .eslintrc.js --fix",
"lint": "npm run eslint",
"prettier": "prettier --write \"./**/*.{md,jsx,json,html,css,js,yml}\"",
"prettier-check": "prettier --check \"./**/*.{md,jsx,json,html,css,js,yml}\""
Workspace configurations
Apart from that, I also have a ./vscode which contains workspace settings. In there, I have 2 files extensions.json which has all necessary plug-ins that I need other contributors have in their visual studio code and settings.json which will override other contributors' settings so that we will be on the page in terms of coding style.
Github hook
I used husky as my github hook as it basically runs a command line before commit to github. Specifically, when I type git commit ... and hit enter, the command npm run pre-commit will be run before that to check the format and everything is in the right coding style and codes that break eslint rules.
Recent commit
6a068c
Top comments (0)