Using eslint, prettier and sort-imports vscode extensions for formatting Open Source Project ‘HackaTalk’

Published in

dooboolab

4 min readAug 13, 2019

This article is intended for developers who would like to contribute to HackaTalk Open Source Project. so it’s formatting instruction is biased for its eslint rules. but even if you are not contributor of HackaTalk, you can also easily apply these knowledge to your own projects👍

Many open source projects use its own customized eslint rules. which is essential for consistency when lots of people(with various coding styles) are contributing to one repository.

However, when you find out yourself spending time on moving some lines of code, replacing double quotes, splitting lines manually… let’s face it, you feel like it is no more than a chore like above gif (assuming you have eslint-extension already installed to show the red lines)

if you don’t see any ‘red lines’(error lines) even though you know your code is not following suggested eslint rules, you need to install eslint-extension first then make a file .vscode/settings.json and add below lines.

vscode/settings.json

then you should be able to see ‘red lines’

Use eslint-extension to format on save

Fortunately, there is a silver lining. we can use eslint-extension to format some code automatically. let’s edit .vscode/settings.json like below

And when you save (simply cmd+s), it will fix some codes automatically.

Not perfect but… did some.. auto formatting 😌

sometimes you need to save several times to finish formatting
also we will solve those import errors later on..!

This behavior is following the code formatting rules set by .eslintrc.js

This might be enough for some people.

but you might want to have more control over ‘when’ to format. since we have to save for formatting. and also you might want to have more customized formatting rules by your own!
also you might want more formatting than just avoid errors. when you see props property destructure, those are not formatted perfectly.

this is when prettier plays in!

Use Prettier to format better

Install Prettier extension and set .vscode/settings.json

{
  // eslint extension options
  "eslint.enable": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  
  // prettier extension setting
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.configPath": ".prettierrc.js"
}

also set .prettierrc.js

module.exports = {
  trailingComma: 'all',
  arrowParens: 'always',
  singleQuote: true,
  jsxSingleQuote: false,
};

above setting is following HackaTalk’s eslint rules (.eslintrc.js).
from here you can customize more while not breaking eslint rules

then you can format code by hitting code-format-shortcut-key (alt+shift+f) without saving file. and also it automatically format the code on saving too!

now you don’t need to use eslint-extension for formatting on save so you can comment out or remove relevant rules. below is full code of .vscode/settings.json (and .prettierrc.js stays same as before)

{
  // eslint extension options
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],  // prettier extension setting
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
 "prettier.configPath": ".prettierrc.js"
}