Install the necessary packages
npm i -D\
eslint@latest\
prettier@latest\
\
eslint-plugin-react@latest\
eslint-plugin-react-hooks@latest\
eslint-plugin-react-refresh@latest\
eslint-plugin-jsx-a11y@latest\
eslint-config-standard-with-typescript\
eslint-plugin-import@latest\
eslint-plugin-n@latest\
eslint-plugin-promise@latest\
\
@typescript-eslint/eslint-plugin@latest\
@typescript-eslint/parser@latest\
\
eslint-config-prettier@latest\
eslint-plugin-prettier@latest\
Create the .eslintrc.json file with the configurations you want like the following example
{
"root": true,
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"standard-with-typescript",
"plugin:react/recommended",
"plugin:import/recommended",
"plugin:prettier/recommended",
"plugin:jsx-a11y/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
"eslint-config-prettier",
"prettier"
],
"ignorePatterns": ["dist"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"node": {
"paths": ["src"],
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"plugins": ["@typescript-eslint", "react", "prettier", "react-refresh"],
"rules": {
"react/react-in-jsx-scope": "off",
"@typescript-eslint/triple-slash-reference": "off",
"@typescript-eslint/explicit-function-return-type": "off",
"import/no-unresolved": "off",
"no-undef": "off",
"prettier/prettier": "error",
"semi": ["error", "never"],
"quotes": ["error", "single"],
"no-console": 1,
"no-var": "error",
"prefer-const": "error",
"react-refresh/only-export-components": [
"warn",
{ "allowConstantExport": true }
]
}
}
Create the .prettierrc.json file with the configurations you want like the following example
{
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"printWidth": 120,
"bracketSpacing": true
}
Create a .prettierignore file to let the Prettier CLI and editors know which files to not format. Here’s an example:
# Ignore artifacts:
build
dist
node_modules
copy these scripts to the package.json file at the root of the project
{
"scripts": {
"lint": "eslint ./src",
"lint:fix": "eslint --fix ./src",
"format": "prettier --write ./src"
}
}
Run ESLint to find and fix errors in the code
npm run lint
npm run lint:fix
Run prettier to format the code
npm run prettier
Install the necessary packages
npm i -D\
eslint@latest\
prettier@latest\
\
@typescript-eslint/eslint-plugin@latest\
@typescript-eslint/parser@latest\
\
eslint-config-prettier@latest\
eslint-plugin-prettier@latest\
Create the .eslintrc.json file with the configurations you want like the following example
{
"root": true,
"env": {
"node": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:@typescript-eslint/recommended",
"eslint-config-prettier",
"prettier"
],
"ignorePatterns": ["dist"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"node": {
"paths": ["src"],
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"plugins": ["@typescript-eslint", "prettier"],
"rules": {
"import/no-unresolved": "off",
"no-undef": "off",
"prettier/prettier": 2,
"no-console": 1,
"no-var": "error",
"prefer-const": "error"
}
}
Create the .prettierrc.json file with the configurations you want like the following example
{
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"printWidth": 120,
"bracketSpacing": true
}
Create a .prettierignore file to let the Prettier CLI and editors know which files to not format. Here’s an example:
# Ignore artifacts:
build
dist
node_modules
copy these scripts to the package.json file at the root of the project
{
"scripts": {
"lint": "eslint ./src",
"lint:fix": "eslint --fix ./src",
"format": "prettier --write ./src"
}
}
Run ESLint to find and fix errors in the code
npm run lint
npm run lint:fix
Run prettier to format the code
npm run prettier
eslint-config-prettier Turns off all rules that are unnecessary or might conflict with Prettier.eslint-plugin-prettier Runs Prettier as an ESLint rule and reports differences as individual ESLint issues."prettier/prettier": 2 Means error"no-console": 1 Means warning
found a typo, or something wrong, misleading, or could be written better! I hope you found this blog post informative and helpful. If you have any feedback or suggestions for improvement, please don't hesitate to let me know in the comments below. I welcome constructive criticism and am always looking for ways to make my writing better.