project created by yarn create umi by default comes with packages of old versions in devDependencies.
eslint-config-umi just use eslint-config-react-app under the hook, this demo remove eslint-config-umi
and use new version of eslint-config-react-app.
update eslint to 6.x and babel-eslint to 10.x
use @typescript-eslint for eslint to parse typescript codes, as tslint will be deprecated by 2020
required extensions:
- Debugger for chrome
- ESLint
recommended extensions:
- AutoTrim
- indent-rainbow
- indenticator
- Path Autocomplete
- Path Intellisense
- Rainbow Brackets
- React Standard Style code snippets
merge those settings into your vscode settings file
{
"javascript.format.enable": false,
"[javascript]": {
"editor.tabSize": 2,
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.tabSize": 2,
"editor.formatOnSave": false
},
"[typescript]": {
"editor.tabSize": 2,
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.tabSize": 2,
"editor.formatOnSave": false
},
"typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"autoFix": true,
"language": "typescript"
},
{
"autoFix": true,
"language": "typescriptreact"
}
}- use eslint for linting typescript files, DO NOT install tslint(vscode extension)
- use indent size of 2
- prefer to no semicolon style