This short guide will provide you a consistent and reuseable development workflow for your new or existing projects, especially in JavaScript. You can increase your code quality and reduce the time spent on debugging. I will show you how to configure VSCode to handle code formatting, linting and type checking now.

Testing is outside the scope, but it’s highly recommended. You should check every changed files before commit

You can skip ahead to the next step if you have any already

Getting Started

Open VSCode and install following extensions (what I shared in previous post, it’s here)

ESLint and Prettier Setup

Install following npm packages for your project as dev dependencies. I use yarn here, you can use npm i --save-dev instead

yarn add --dev eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-prettier husky lint-staged prettier
  • added eslint, prettier
  • added eslint-config-prettier so eslint and prettier won’t fight over code formatting rules
  • added eslint-config-airbnb-base to use Airbnb’s base JS .eslintrc as an extensible shared config. You can use other base like: StandardJS
  • Prettier will auto-format your code based on it’s rules. It’s amazingggg! 🤩 Let’s install and enjoy your life.

Open the .eslintrc.json file and configure it like so:

{
    "extends": ["airbnb-base", "prettier"],
    "plugins": ["import", "prettier"],
    "rules": {
        "eqeqeq": ["warn"],
        "radix": ["warn"],
        "newline-per-chained-call": ["warn"],
        "newline-before-return": "error",
        "no-restricted-syntax": ["warn"],
        "no-param-reassign": ["error", { "props": false }],
        "import/no-dynamic-require": ["warn"],
        "prettier/prettier": [
            "error",
            {
                "singleQuote": true,
                "semi": false,
                "tabWidth": 4
            }
        ]
    }
}

You can create a file name .prettierrc and write it own rules

{
    "singleQuote": true,
    "semi": false,
    "tabWidth": 4
}

This section is my preferences. You’re free to add your own rules.

Lint your Code

Add the following to package.json file

"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
}

Husky can prevent bad git commit, git push and more 🐶 woof!

"lint-staged": {
    "*.js": [
        "eslint --fix",
        "git add"
    ]
}

Run linters against staged git files and don’t let 💩 slip into your code base!

"scripts": {
    "start": "node src/app/app.js",
    "lint": "eslint src --ext .js,.tsx,.ts --fix"
}

With this lint script, you can run from the terminal (yarn lint or npm run lint) and enjoy fixing linter errors!

You can find more details about eslint options here

Prettier Formatter

Now I want VSCode to format my code following ESLint, Prettier config whenever I saving a file

Go to VSCode Preferences then add the following settings:

  • Set Prettier is default formatter and config for all JavaScript projects
{
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}
  • Let VSCode always fix after saving a file
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Example

Before

before

After

after

🥳 Watch the magic of Prettier

Happy Coding~