React-seed.md

React with Typescript, eslint, prettier, Visual Studio Code

• npm create-react-app react-seed --typescript bootstraps react app with typescript.
• Add eslint extension for vsc
• Add .eslintrc file to the project.
• eslint would have worked if we using js and jsx, but here we using typescript. so
• ctrl + shift + p and search for settings(JSON) add below config

"eslint.validate": [
  "javascript",
  "javascriptreact",
  {"language":  "typescript",  "autoFix":  true  },
  {"language":  "typescriptreact",  "autoFix":  true  }
] 

• Now the linter starts working.
• npm install -D prettier eslint-plugin-prettier eslint-config-prettier to install prettier and plugins as dev dependencies.
• Add the following config to vsc settings file

"editor.formatOnSave": true,
// disable typscript files to auto format by prettier.
"[typescript]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true

• Add prettier extension to vsc