build: add jsx/tsx to pre-commit-hook (#65266)

Biome doesn't support styled CSS formatting for now. In order to check
for valid formatting inside the styled components, we add this temporary
fix of running prettier on jsx and tsx files.

.pre-commit-config.yaml

@@ -119,11 +119,12 @@ repos:
         name: biome (javascript, typescript, json)
         additional_dependencies: ['@biomejs/biome@1.5.3']
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: 'v3.0.3' # Use the sha or tag you want to point at
+    rev: 'v3.1.0' # Use the sha or tag you want to point at
     hooks:
       - id: prettier
-        name: prettier (yaml, markdown)
-        types_or: [yaml, markdown]
+        name: prettier (yaml, markdown, tsx, jsx, css)
+        # TODO: Remove tsx and jsx when Biome supports styled CSS formatting.
+        types_or: [yaml, markdown, tsx, jsx, css]
         # https://pre-commit.com/#regular-expressions
         exclude: |
           (?x)^($^

.vscode/extensions.json

@@ -2,6 +2,7 @@
   // See https://go.microsoft.com/fwlink/?LinkId=827846
   // for the documentation about the extensions.json format
   "recommendations": [
+    "esbenp.prettier-vscode",
     "biomejs.biome",
     "ms-python.python",
     "ms-python.black-formatter",