One of the saviours for JS developers is how best we can utilize the tools to minimize our errors in development time, starting from common issues that are caused by our muscle memory, to having unique coding standard across a team of developers, we will need to follow this to make our lives easier.
We are in excellent hands with some of the amazing toolchains that make JS development easier than ever. The common solution we use for this include Eslint & Prettier.
You can add them to your existing project using
npm install eslint prettier
or if you use yarn
yarn add eslint prettier
Prettier
Code Formatter that can integrate almost all popular editors out there, supporting multiple languages as well. Automate Prettier on save and be done with it.
Configuring Prettier
Once you have installed prettier, they give plenty of options to help you with how you configure the code style. You can create .prettierrc file in the root of your project.
The common settings we use in our team is
{
"singleQuote": true,
"arrowParens": "always",
"bracketSpacing": true,
}
In your fav editor, you will have the option to automate prettier on save, I will discuss how we do in our VS Code.
You will need to install this extension in VS Code first, the link is here
Or you can simply run
ext install esbenp.prettier-vscode
Once you have installed, you can open your settings.json and add these lines
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
with this, you will see the magic that prettier keeps doing every time you save your file.
For other editors, you can find the documentation here.
Eslint
Find problems during development, auto-fix most problems and fix the remaining ones before they come back to bite you.
Tslint is typescript version of this, but typescript team confirmed that they are migrating from tslint to eslint, you can refer here. This makes all the more reason for us to set up to any JS project that you are working on.
Configuring Eslint
You can extend many popular companies coding standards, the commons ones include google, Airbnb.
Depending on React/Angular/Vue, you might want to add your eslint config one after another.
For example, for a nodejs/angular project, You can include the dependencies mentioned first,
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier-eslint
or if you are using yarn
yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier-eslint
Once done, you can create a file similar to how we created for prettier, the file name would be .eslintrc.json. You can also create rc file instead.
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"globals": {},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"modules": true
}
},
"plugins": ["@typescript-eslint"],
"rules": {
"no-const-assign": "error"
},
"settings": {}
}
Linting on Save with VS Code
You will need to install Eslint extension in vs code. You can do that using
ext install dbaeumer.vscode-eslint
You can find more on that extension here
You can run eslint on save files here as well. In your vs code settings, you will need to add these lines.
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
This will fix all your auto-fixable issues on save.
Ignoring files from Eslint & Prettier
There are ways in which you can tell eslint & prettier to stop working on some files.
Prettier ignore
Create a .prettierignore file and follow similar syntax on how you will use for .gitignore. Example would be
styles-tailwind.css
Eslint ignore
Similarly, you can create .eslintignore and it will skip that corresponding files specified there as well. Example would be
package.json
package-lock.json
yarn.lock
dist/
node_modules/
Using them on Pre-commit hooks.
Once you have set up eslint & prettier, you can make sure you are using them effectively by running a pre-commit hook to make sure you are not missing any errors. You can find more on that on my other blog here.
