CRA Settings 2020 (CRA overrides, webpack, babel, editorconfig, and eslint config) — I use the following settings for aliasing imports in webpack, optional chaining in babel, preferred eslint formatting and linting on save. Enjoy!

.babelrc

// `/.babelrc`
{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

.editorconfig

# `/.editorconfig`
# Editor configuration, see http://editorconfig.org 
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

.eslintrc.js

// `/src/.eslintrc.js`

module.exports = {
  "extends": [
    "react-app"
  ],
  "plugins": [
    "sort-destructure-keys",
    "react-hooks"
  ],
  "rules": {
    "array-bracket-spacing": ["error", "never"],
    "comma-dangle": ["error", "never"],
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "key-spacing": ["error", { "afterColon": true }],
    "no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1 }],
    "no-trailing-spaces": ["error", { "skipBlankLines": true, "ignoreComments": true }],
    "object-curly-spacing": ["error", "always"],
    "semi": ["error", "never"],
    "sort-destructure-keys/sort-destructure-keys": 2,
  
    "react/jsx-indent": [2, 2, { "checkAttributes": true }],
    "react/jsx-first-prop-new-line": [2, "multiline"],
    "react/jsx-max-props-per-line": [1, { "maximum": 1 }],
    "react/jsx-closing-bracket-location": [2, "line-aligned"],
    "react/jsx-sort-props": [1, { "reservedFirst": true }],

    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [2, { "enableDangerousAutofixThisMayCauseInfiniteLoops": true }],
  }
}

config-overrides.js

// `/config-overrides.js`

const {
  addWebpackAlias,
  addWebpackModuleRule,
  useBabelRc,
  override
} = require('customize-cra');

const path = require('path')

module.exports = override(
  // Add inline SVG support for icons
  addWebpackModuleRule({
    test: /\.inline\.svg$/,
    use: 'svg-inline-loader'
  }),
  
  // Allias commonly used paths
  addWebpackAlias({
    '~api': path.resolve(__dirname, 'src/common/api/api'),
    '~components': path.resolve(__dirname, 'src/components'),
    '~constants': path.resolve(__dirname, 'src/common/constants/constants'),
    '~data': path.resolve(__dirname, 'src/data'),
    '~fonts': path.resolve(__dirname, 'src/fonts'),
    '~helpers': path.resolve(__dirname, 'src/common/helpers/helpers'),
    '~hooks': path.resolve(__dirname, 'src/common/hooks'),
    '~images': path.resolve(__dirname, 'src/images'),
    '~mixins': path.resolve(__dirname, 'src/styles/mixins'),
    '~storybook': path.resolve(__dirname, '.storybook'),
    '~styles': path.resolve(__dirname, 'src/styles/styles'),
    
    // Redux aliases — note the unique prefix, '@'
    '@': path.resolve(__dirname, 'src/data'),
  }),
  useBabelRc()
)

package.json

{
  "name": "Sample Project",
  "author": "@Cornally",
  "description": "Critical packages and some changes to a vanilla CRA app with configuration overrides and support for cross-platform scripts.",
  "productName": "Sample",
  "version": "0.6.2",
  "homepage": ".",
  "dependencies": {
    "@simbathesailor/use-what-changed": "^0.1.25",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-jss": "^10.5.0",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0",
    "react-transition-group": "^4.4.1",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
  },
  "scripts": {
    "start": "cross-env REACT_APP_VERSION=$npm_package_version react-app-rewired start",
    "build": "cross-env REACT_APP_VERSION=$npm_package_version react-app-rewired build",
    "lint": "eslint './src/**/*.{js, jsx}' --fix",
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.12.1",
    "cross-env": "^7.0.2",
    "customize-cra": "^1.0.0",
    "eslint-plugin-sort-destructure-keys": "^1.3.5",
    "react-app-rewired": "^2.1.6",
    "svg-inline-loader": "^0.8.2"
  }
}

settings.json (VSCode)

{
    "workbench.iconTheme": null,
    "bracket-pair-colorizer-2.showHorizontalScopeLine": false,
    "bracket-pair-colorizer-2.showVerticalScopeLine": false,
    "bracket-pair-colorizer-2.showBracketsInGutter": true,
    "workbench.colorTheme": "One Monokai",
    "editor.rulers": [
        120
    ],
    "editor.minimap.enabled": false,
    "editor.largeFileOptimizations": false,
    "breadcrumbs.enabled": false,
    "explorer.confirmDelete": false,
    "window.zoomLevel": 0,
    "editor.tabSize": 2,
    "colorize.languages": [
        "javascript",
        "css",
        "sass",
        "scss",
        "less",
        "postcss",
        "sss",
        "stylus",
        "xml",
        "svg"
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "javascript.updateImportsOnFileMove.enabled": "never",
    "cSpell.userWords": [
        "timeslot"
    ],
    "editor.formatOnSave": true,
    "eslint.format.enable": true,
    "eslint.packageManager": "yarn"
}