Giap Hiep

I'm Giap Hiep

I'm a web developer, a gymer. I enjoy share something i know that help people's work!
Giap Hiep

Setup môi trường development cơ bản cho React Typescript

ESlint TypeScript setup

How to use:

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier

Config .eslintrc

{
	"parserOptions": {
		"ecmaVersion": 2020,
		"sourceType": "module",
		"ecmaFeatures": {
			"jsx": true
		}
	},
	"settings": {
		"react": {
			"version": "detect"
		}
	},
	"parser": "@typescript-eslint/parser",
	"extends": [
		"plugin:react/recommended",
		"plugin:@typescript-eslint/recommended",
		"prettier/@typescript-eslint",
		"plugin:prettier/recommended"
	],
	"rules": {
		"strict": ["error", "never"],
		"react/prop-types": 0
	},
	"env": {
		"browser": true
	}
}

Prettier setup

How to use:

npm i -D prettier

Config .prettierrc:

{
  "arrowParens": "avoid",
  "bracketSpacing": false,
  "insertPragma": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": true
}

Setup scripts in package.json:

Check eslint-typescript rules:

"lint": "eslint '*/**/*.{ts,tsx}' --quiet --fix"

Beautify code with Prettier:

"prettier": "prettier --config ./.prettierrc.json --ignore-path ./.gitignore --write . -c"

Preventing ESLint and formatting errors from being committed

Install lint-staged and husky

npm i -D lint-staged husky

Setup lint-staged and husky script on package.json

"husky": {
		"hooks": {
			"pre-commit": "lint-staged"
		}
	},
"lint-staged": {
    "*.{ts,tsx}": [
        "eslint --fix"
    ]
}