Skip to content

Instantly share code, notes, and snippets.

@vukhanhtruong
Last active April 3, 2023 10:21
Show Gist options
  • Save vukhanhtruong/670c6b4d1c02a5798cb40a50762c7548 to your computer and use it in GitHub Desktop.
Save vukhanhtruong/670c6b4d1c02a5798cb40a50762c7548 to your computer and use it in GitHub Desktop.
Setup Javascript / Nodejs Project with ES6 + Babel 7 + ESLint + Airbnb + Prettier

Project Setup

Create a directory and run the following command.

npm init 

For this tutorial, I will be adding an index.js file to the src folder, and this will be our entry point. Our file directory should look like this.

your-project-folder/
|--src/
  |--index.js
|--package.json

Install Packages

Nodemon

Nodemon is a tool that helps develop Js/Nodejs based applications by automatically restarting the node application when file changes detected.

npm install nodemon --save-dev

Babel

Babel is a tool that is used to convert ECMAScript 2015+ code into a backward compatible version of JavaScript so that older browsers and environment will be able to understand your code.

Run the following command to install babel:

npm install @babel/core @babel/cli @babel/preset-env @babel/node @babel/runtime --save-dev

Next, we need to tell babel how to transpile our files by creating a .babelrc file in the root directory and adding the following code to it.

{
  "presets": [
    "@babel/preset-env"
  ]
}

If you want to set up a custom alias for directories, specific files, or even other npm modules. Let's take a look to this handy plugin

ESLint + Airbnb + Prettier

These tools will be identifying, reporting and formatting on patterns found in ECMAScript/JavaScript code, with the goal of making the code more consistent and avoiding bugs.

Run the following command to install:

npm install eslint \
            eslint-config-airbnb-base \
            eslint-config-prettier \
            eslint-plugin-import \
            eslint-plugin-prettier \
            prettier --save-dev

Prettier Configuration

Create the file named .prettierrc in the root directory and adding the following code to it.

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

If you'd like a JSON schema to validate your configuration, one is available here: http://json.schemastore.org/prettierrc.

Eslint Configuration

Create the file named .eslintrc.json in the root directory and add the following code to it.

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }  
}

Scripts

Open up package.json then add the following code to the scripts section

{
  ...
  "scripts": {
    "build": "babel ./src --out-dir ./build",
    "start": "nodemon --exec babel-node src/index.js",
    "lint": "eslint ."
  },
  ...
}

Integrated with VSCode

Install Prettier and ESLint extensions

Configure VS Code

{
  ..
  "editor.formatOnSave": true,
  ..
}
{
"presets": [
"@babel/preset-env"
]
}
/node_modules/**
/build
{
"extends": ["airbnb-base", "plugin:prettier/recommended"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
{
"name": "your-project",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "nodemon --exec babel-node src/index.js",
"build": "babel ./src --out-dir ./build",
"lint": "eslint ."
},
"dependencies": {},
"devDependencies": {
"@babel/cli": "7.4.3",
"@babel/core": "7.4.3",
"@babel/node": "7.2.2",
"@babel/preset-env": "7.4.3",
"@babel/runtime": "^7.4.3",
"babel-eslint": "^10.0.1",
"babel-plugin-module-resolver": "^3.2.0",
"eslint": "^5.16.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-prettier": "^3.0.1",
"nodemon": "1.18.4",
"prettier": "^1.17.0"
},
"keywords": []
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment