leverage on eslint and prettier together

eslint is now the defector linter for front end, even for typescript, especially with the deprecation of tslint.

eslint is able to do both formatting, like line length, trailing semi colon etc; at the same time, it’s able to do syntax checking as well, for example, unused or undefined variables alike.

while at the same time, prettier is really doing a good job for formatting the front end. it’s a very opinionated framework however, with very easy to customize configurations. for example,

{  
"semi": true,  
"trailingComma": "all",  
"singleQuote": true,  
"printWidth": 70
}

with the combination of both, we can leverage on the strength of both, to do lint and format:

npx eslint -c .eslintrc.json **/*.{ts,tsx} --fix ##for format or fix

npx eslint -c .eslintrc.json **/*.{ts,tsx} ## for lint

these are the set ups we need to prepare:

install the dependencies:

npm install -g prettier eslint
## or
yarn add prettier eslint

install the plugins

npm install --save-dev eslint-config-prettier eslint-plugin-prettier
## or
yarn add --dev eslint-config-prettier eslint-plugin-prettier

then configure .eslintrc

{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint","prettier"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"rules": {
"@typescript-eslint/interface-name-prefix": 1
}
}

in addition, to use airbnb formatting:

npx install-peerdeps --dev eslint-config-airbnb

then add it into .eslintrc.json

{  
"extends": ["airbnb", "prettier"],  
"plugins": ["prettier"],  
"rules": {    
"prettier/prettier": ["error"]  
}}