[Team] Eslint Prettier Setup

Posted by Jarxi on 2019-10-30

Eslint

Eslint is a linter that helps keep every team member commit the same style of code. During a internship, I come across Eslint. I was already using Prettier at the time.
Something weird happens. Prettier is forcing a style on save. Eslint is forcing another style on commit. So I decide to merge Prettier and Eslint.

Setup Eslint for Node.js

1
npm i --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

Create .eslintrc.json at the level of package.json
Add below scripts to the file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"extends": ["plugin:prettier/recommended"],
"parserOptions": {
"ecmaVersion": 8,
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"node": true,
"browser": true,
"es6": true,
"jest": true
}
}

The default of prettier is double quotation mark. Industry standard prefers single quotation mark. To change double quotation to single quotation, open package.json
Add below key and value in the outermost curly bracket:

1
2
3
"prettier": {
"singleQuote": true
}

How to Run

Add a script to package.json. The files I want to Eslint to work on is under /api.

1
2
3
"scripts": {
"pretest": "eslint ./api/** --fix"
}

Open terminal and type in npm run pretest. Eslint should fix the styling problems.



支付宝打赏 微信打赏

赞赏一下