This article is base on
https://dev.to/markliu2013/how-to-create-a-react-application-with-webpack-43b5
We want to add eslint and prettier for the project.
Install Eslint and Prettier
npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-plugin-react eslint-plugin-react-hooks
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
Create .eslintrc.js
module.exports = {
settings: {
react: {
version: 'detect'
},
'import/resolver': {
typescript: {}
}
},
env: {
browser: true,
es2021: true
},
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:react/recommended',
'prettier',
'plugin:prettier/recommended'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
rules: {
'react/react-in-jsx-scope': 'off'
}
};
Create .prettierrc.json
{
"semi": true,
"tabWidth": 20,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none"
}
Run Eslint and Prettier
"lint": "eslint ./src --ext .ts,.tsx,.js,.jsx",
"lint:fix": "eslint ./src --ext .ts,.tsx,.js,.jsx --fix",
"format": "prettier 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --write"
Top comments (0)