What is Prettier?
- Prettier is one of the code formatting tools that ensures a consistent code style.
- I have used it before, so I might as well use it again to become familiar with it.
- https://prettier.io/
What is TypeScript-ESLint?
- It helps in identifying and fixing potential problems in the code.
- I've only used ESLint with JavaScript, but I haven't used TypeScript-ESLint with TypeScript before. So, I decided to use this.
- https://typescript-eslint.io/
Prettier Set-up
1.Installation:
Run npm install --save-dev --save-exact prettier
.
2.Create a .prettierrc
file:
{
"arrowParens": "always",
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"endOfLine": "lf",
"insertPragma": false,
"proseWrap": "preserve",
"requirePragma": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"printWidth": 100
}
3.Create a .prettierignore
file:
node_modules/
package.json
package-lock.json
4.Add a prettier
script to package.json
:
...
"scripts": {
...
"prettier": "prettier . --write",
...
}
5.How to run Prettier from the command line?
$ npm run prettier
ESLint Set-up
1.Installation:
Run npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
.
2.Create a .eslintrc.cjs
file:
module.exports = {
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
root: true,
};
3.Add a lint
script to package.json
:
...
"scripts": {
...
"lint": "eslint --ignore-path .gitignore ."
...
}
4.How to run ESLint from the command line?
$ npm run lint
What Prettier and ESLint Found:
Prettier
formatted the code based on the rules specified in the .prettierrc
file.
Integrating the Tools with VSCode:
Install Prettier Extension for VSCode.
Create a directory called
.vscode
and add asettings.json
file inside it with the following content:
{
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"files.eol": "\n",
"files.insertFinalNewline": true
}
After completing these steps, Prettier
should automatically format the code for you, saving a significant amount of time for everyone involved.
Learning Opportunity
Even if it takes some time to set up static analysis tools, including ESLint
and Prettier
, it is so worth it since it saves so much time for both maintainers and contributors. I was lazy to set up these tools, so I always did not use them even though I knew they work amazingly. I think I need to make it a habit to set up these static analysis tools first from now on whenever I start a new project.
You can find the whole commit here: abb9bed
Top comments (0)