Visual Code Configuration for Typescript and React development

By | March 30, 2020

Install necessary extensions

Go to extension market

  1. ESLint
    Recommended code qualification tool for modern Javascript
  2. TSLint

  3. Git Lens
    For blame development driven 🙂

Change editor preferences

- Go to **File** => **Preferences** => **Settings**
- Search for **Code Actions on Save** to see the link to file settings.json

- Override all settings by the content below:
    "tslint.packageManager": "yarn",
    "tslint.jsEnable": true,
    "eslint.format.enable": true,
    "eslint.packageManager": "yarn",
    "editor.fontFamily": "'SF Mono', 'monospace', monospace, 'Droid Sans Fallback'",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.minimap.maxColumn": 140,
    "files.autoSave": "onFocusChange",
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    "[typescriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    "editor.codeActionsOnSave": {
        "source.fixAll.tslint": true
    "git.autofetch": true,
    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    "": "onSave",
    "eslint.alwaysShowStatus": true,
    "eslint.lintTask.enable": true,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "javascript.preferences.quoteStyle": "single",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.preferences.importModuleSpecifier": "non-relative",
    "javascript.preferences.importModuleSpecifier": "non-relative",
    "typescript.preferences.quoteStyle": "single",
    "typescript.updateImportsOnFileMove.enabled": "always",
    "editor.tabSize": 2,
    "editor.mouseWheelZoom": true

Useful Keyboard Shortcuts

  • Optimise imports: Alt + Shift + O

Leave a Reply