Gist to the blog post https://blog.alexanderwolf.tech/vs-code-workspace-configuration

. VS code workspace config - .prettierrc

// .prettierrc
// (filename in gist just to have a better title in the gist overview page as mentioned [here](https://github.com/isaacs/github/issues/194))
//
// install prettier with
// yarn add prettier pretty-quick husky
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70
}

.eslintrc.js

// install with
// yarn add -DE babel-eslint eslint-config-react-app @typescript-eslint/[email protected] @typescript-eslint/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
// as mentioned here: https://www.npmjs.com/package/eslint-config-react-app
// Note: For create-react-app this is already configured, so only needed for non cra apps.

module.exports = {
  extends: ['react-app', 'plugin:jest/recommended'],
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 6,
    allowImportExportEverywhere: true,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      modules: true,
    },
  },
  rules: {
    'no-unused-vars': 1,
    'no-shadow': 2,
    'jest/no-large-snapshots': ['warn', { maxSize: 100 }],
  },
  overrides: [],
};

.vscode\extensions.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp

  // List of extensions which should be recommended for users of this workspace.
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "jpoissonnier.vscode-styled-components"
  ],
  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
  "unwantedRecommendations": []
}

.vscode\settings.json

{
  "editor.tabSize": 2,
  "search.exclude": {
    "**/node_modules": true
  },
  "editor.formatOnSave": true,
  //disable default javascript validator replaced by eslint
  "javascript.validate.enable": false,
  "eslint.enable": true
}

babel.config.js

// install babel with 
// yarn add @babel/core @babel/cli @babel/preset-env --exact
// yarn add @babel/polyfill --exact

const presets = [
  [
    '@babel/env',
    {
      targets: {
        edge: '17',
        firefox: '60',
        chrome: '67',
        safari: '11.1',
      },
      useBuiltIns: 'usage',
    },
  ],
];

module.exports = { presets };

package.json

// Note: React not a dependency here as this could be also used for other frameworks
{
  "name": "your-project-name",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "dependencies": {
    "@babel/cli": "7.7.4",
    "@babel/core": "7.7.4",
    "@babel/polyfill": "7.7.0",
    "@babel/preset-env": "7.7.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "2.x",
    "@typescript-eslint/parser": "2.x",
    "babel-eslint": "10.0.3",
    "eslint": "6.x",
    "eslint-config-react-app": "5.0.2",
    "eslint-plugin-flowtype": "3.x",
    "eslint-plugin-import": "2.x",
    "eslint-plugin-jsx-a11y": "6.x",
    "eslint-plugin-react": "7.x",
    "eslint-plugin-react-hooks": "1.x",
    "husky": "3.1.0",
    "prettier": "1.19.1",
    "pretty-quick": "2.0.1"
  }
}