Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Setup Javascript / Nodejs Project with ES6 + Babel 7 + ESLint + Airbnb + Prettier
# Project Setup
Create a directory and run the following command.
```sh
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.
```sh
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:
```sh
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.
```js
{
"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](https://github.com/tleunen/babel-plugin-module-resolver)
## 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:
```sh
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.
```js
{
"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](http://json.schemastore.org/prettierrc).
### Eslint Configuration
Create the file named `.eslintrc.json` in the root directory and add the following code to it.
```sh
{
"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
```js
{
...
"scripts": {
"build": "babel ./src --out-dir ./build",
"start": "nodemon --exec babel-node src/index.js",
"lint": "eslint ."
},
...
}
```
## Integrated with VSCode
Install [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extensions
Configure VS Code
```js
{
..
"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
You can’t perform that action at this time.