JavaScript Project with ESLint + Prettier, Husky + Lint-Staged

It is very difficult to always manage the same style of code without any tools. Tabs and spaces are always confusing, and quotes and double quotes are also confusing.

Using multiple styles of code in a single project creates confusion among members. That’s true even if it’s a project you’re working on alone.

So I started to use several tools:

• ESLint : javascript linter for finding and fixing problems in your code
• Prettier : code formatting tools for code style unification
• Husky : perform certain actions when git commit(ex — eslint fix)
• Lint-Staged : lint only the files that will be committed

These tools make your JavaScript code more beautiful and ensure that only beautiful code is committed to git. I recommend using these tools in your JavaScript project.

Then how can you add these tools to your project? If you use React or Express(Node), you don’t have to worry. I’ve already written the start code and uploaded it to GitHub:

• express-starter: Click
• react-starter: Click

You just need to clone this repository and fill it with your code.

However, if the starter code is not available, you will have to configure it yourself. Don’t worry too much. It’s not that difficult.

Let’s get started.

First, create the Node.js project by running the command below:

$ mkdir node-starter
$ cd node-stater
$ git init
$ npm init

Then you have to install a dependency:

# Install ESlint + Prettier
$ npm install eslint --save-dev
$ npm install prettier --save-dev --save-exact
# In case of conflict with Prettier, disable the setting
$ npm install eslint-plugin-prettier --save-dev
# Add config that use Prettier when formatting code
$ npm install eslint-config-prettier --save-dev
# Install Husky and Lint-Staged
$ npm install husky@4 --save-dev
$ npm install lint-staged --save-dev

ESlint can also import configs created by other developers. we will use Airbnb’s configs here:

# Install the correct versions of each package, which are listed by the command:
$ npm info "eslint-config-airbnb-base@latest" peerDependencies
# if using npm 5+, use this shortcut
$ npx install-peerdeps --dev eslint-config-airbnb-base

Finally, a setup file of these tools should be added.

• git settings (.gitignore)

# .gitignore
node_modules/

• ESlint settings (.eslintrc.json, .eslintignore)

# .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["prettier"],
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "rules": {
    "no-console": "off",
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    "import/extensions": "off"
  }
}
# .eslintignore
node_modules/

• Prettier settings (.prettierrc, .prettierignore)

# .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "avoid"
}
# .prettierignore
node_modules/
package.json
package-lock.json

• Husky settings (.huskyrc.json)

# .huskyrc.json
{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

• Lint-Staged settings (.lintstagedrc.json)

{
  "*.js": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{json,md}": [
    "prettier --write"
  ]
}

Now all the work is done. Create index.js for testing:

const hello = "Hello Node-Starter"
console.log(hello);

Currently index.js uses double quotes, and there are some parts without semicolons. Let’s commit this to Git and see the changes:

$ git add .
$ git commit -s -m "Initial commit"
husky > pre-commit (node v14.15.3)
...

If you open index.js after git commit, you can see the change as shown below:

const hello = 'Hello Node-Starter';
console.log(hello);

Until now, we have written the starter code for the JavaScript project using several tools. It’s time to do additional work according to your preference and upload it to GitHub for other projects.

• express-starter: Click
• react-starter: Click
• node-starter: Click

Thank you for your reading! :)