Eslint / Prettier for ReactJS

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "react-hooks",
    "prettier",
    "eslint-plugin-import-helpers"
  ],
  "rules": {
    "camelcase": "off",
    "react/jsx-key": "error",
    "react/prop-types": "off",
    "prettier/prettier": "error",
    "react/react-in-jsx-scope": "off",
    "space-before-function-paren":"off",
    "react-hooks/rules-of-hooks": "error", 
    "react-hooks/exhaustive-deps": "warn", 
    
    "react/self-closing-comp": ["error", {
      "component": true,
      "html": true
      }],
      
    "import-helpers/order-imports": [
      "warn",
      {
        "newlinesBetween": "always",
        "groups": [
          ["/^react/", "/^next/", "module"],
          "parent",
          ["sibling", "index"]
        ]
      }
    ] 
  },
  "overrides": [
    {
      "files": "**/*.+(ts|tsx)",
      "extends": [
        "plugin:@typescript-eslint/recommended", 
        "prettier"
      ],
      "parser": "@typescript-eslint/parser",
      "plugins": [
        "@typescript-eslint/eslint-plugin"
      ],
      "rules": {
        "@typescript-eslint/quotes": [
          2,
          "backtick",
          {
            "avoidEscape": true
          }
        ]
      }
    }
  ]
}

package.json

"@typescript-eslint/eslint-plugin": "^5.12.1",
"@typescript-eslint/parser": "^5.12.1",
"eslint": "^7.32.0",
"eslint-config-next": "12.1.5",
"eslint-config-prettier": "^8.4.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-import-helpers": "^1.2.1",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-react": "^7.29.0",
"eslint-plugin-react-hooks": "^4.3.0",
"prettier": "^2.5.1",

prettier.config.cjs

module.exports = {
  semi: false,
  singleQuote: true,
  arrowParens: 'always',
  trailingComma: 'none',
  endOfLine: 'auto',
};

vscode-settings.json

{
  "breadcrumbs.enabled": false,
  "editor.scrollbar.horizontal": "hidden",
  "editor.scrollbar.vertical": "hidden",
  "editor.fontFamily": "JetBrains Mono",
  "editor.fontLigatures": true,
  "editor.fontSize": 17,
  "editor.lineHeight": 27,
  "editor.rulers": [80, 120],
  "editor.tabSize": 2,
  "editor.parameterHints.enabled": true,
  "editor.semanticHighlighting.enabled": false,
  "editor.renderLineHighlight": "gutter",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },

  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.compactFolders": false,
  "extensions.ignoreRecommendations": true,
  "dotenv.enableAutocloaking": false,
  "files.associations": {
    ".env*": "dotenv"
  },
  "material-icon-theme.files.associations": {
    "styles.ts": "stitches",
    "styles/home.styles.ts": "stitches",
    "styles/global.ts": "stitches",
    "styles/theme.ts": "stitches"
  },
  "material-icon-theme.folders.associations": {
    "querys": "shader",
    "exceptions": "aurelia",
    "steps": "custom"
  },

  "javascript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "symbols.hidesExplorerArrows": true,
  "security.workspace.trust.untrustedFiles": "open",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "terminal.integrated.fontSize": 13,
  "workbench.iconTheme": "symbols",
  "workbench.productIconTheme": "fluent-icons",
  "workbench.startupEditor": "none",
  "workbench.editor.labelFormat": "short",
  "window.zoomLevel": 1,

  "[prisma]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[postcss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "editor.tokenColorCustomizations": {
    "textMateRules": []
  },

  "symbols.files.associations": {
    "loading.tsx": "react",
    "layout.tsx": "react",
    "page.tsx": "next",
    ".env.example": "terraform",
    ".env.local": "terraform",
    ".env": "terraform",
    ".env.test": "terraform"
  },
  "symbols.folders.associations": {
    "data": "folder-green",
    "lib": "folder-purple-code",
    "providers": "folder-sky-code",
    "querys": "folder-orange",
    "querys/server": "folder-green",
    "querys/functions": "folder-purple"
  },

  "tailwindCSS.experimental.classRegex": [
    ["tv\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],

  "workbench.statusBar.visible": false,
  "workbench.activityBar.location": "hidden",
  "workbench.colorTheme": "Dracula Refined"
}

// update on 10/05/2024 to not use prettier installed as an extension

{
  
  "breadcrumbs.enabled": false,

  "editor.scrollbar.horizontal": "hidden",
  "editor.scrollbar.vertical": "hidden",
  "editor.fontFamily": "JetBrains Mono",
  "editor.fontLigatures": true,
  "editor.fontSize": 17,
  "editor.lineHeight": 27,
  "editor.rulers": [80, 120],
  "editor.tabSize": 2,
  "editor.parameterHints.enabled": true,
  "editor.semanticHighlighting.enabled": false,
  "editor.renderLineHighlight": "gutter",
  "editor.minimap.enabled": false,
  "editor.suggestSelection": "first",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
  },

  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.compactFolders": false,
  "extensions.ignoreRecommendations": true,

  "javascript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[prisma]": {
    "editor.formatOnSave": true
  },
  
  "symbols.hidesExplorerArrows": false,
  
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.showExitAlert": false,
  "tailwindCSS.experimental.classRegex": [
    ["tv\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "never",
  
  "workbench.iconTheme": "symbols",
  "workbench.productIconTheme": "fluent-icons",
  "workbench.startupEditor": "none",
  "workbench.editor.labelFormat": "short",
  "workbench.statusBar.visible": false,
  "workbench.colorTheme": "Dracula Refined",
  "workbench.editor.empty.hint": "hidden",
  "window.zoomLevel": 0.9,
  
}