Developer Experience mejorada

.eslintrc

@@ -0,0 +1,57 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:tailwind/recommended",
+    "next", // includes eslint-plugin-react / eslint-plugin-react-hooks /eslint-plugin-next
+    "next/core-web-vitals",
+    "prettier" // deletes props with conflict with prettier
+  ],
+  "rules": {
+    "no-console": "warn",
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "react/jsx-indent-props": [2, "first"],
+    "import/prefer-default-export": "off",
+    "import/no-cycle": "off",
+    "no-multi-assign": "off",
+    "react/react-in-jsx-scope": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "no-unused-vars": "warn",
+    "import/order": [
+      "warn",
+      {
+        "pathGroups": [
+          {
+            "pattern": "@/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "newlines-between": "always"
+      }
+    ],
+    "react/jsx-sort-props": [
+      "error",
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "noSortAlphabetically": false,
+        "reservedFirst": true
+      }
+    ],
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": "*", "next": "return" },
+      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+      { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] }
+    ]
+  },
+  "plugins": ["import", "@typescript-eslint"]
+}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn eslint --fix

.prettierrc

@@ -1,9 +1,8 @@
 {
-  "arrowParens": "always",
+  "arrowParens": "avoid",
   "bracketSpacing": true,
   "embeddedLanguageFormatting": "auto",
   "htmlWhitespaceSensitivity": "css",
-  "insertPragma": false,
   "jsxBracketSameLine": false,
   "jsxSingleQuote": true,
   "printWidth": 100,
@@ -14,6 +13,5 @@
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "useTabs": false,
-  "vueIndentScriptAndStyle": false
+  "useTabs": false
 }

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  // other settings
+  // formatting using eslint
+  // let editor format using prettier for all other files
+  "editor.formatOnSave": true,
+  // disable editor formatting, so eslint can handle it
+  "[javascript]": {
+    "editor.formatOnSave": false
+  },
+  // available through eslint plugin in vscode
+  "eslint.alwaysShowStatus": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

next.config.js

@@ -1,17 +1,17 @@
-const securityHeaders = require('./src/lib/security')
-
 const plugins = require('next-compose-plugins')
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 })
-
 const withOffline = require('next-offline')
 
+// const securityHeaders = require('./src/lib/security')
+
 function esbuildLoader(config, options) {
-  const jsLoader = config.module.rules.find((rule) => rule.test && rule.test.test('.js'))
+  const jsLoader = config.module.rules.find(rule => rule.test && rule.test.test('.js'))
+
   if (jsLoader && jsLoader.use) {
     if (jsLoader.use.length > 0) {
-      jsLoader.use.forEach((e) => {
+      jsLoader.use.forEach(e => {
         e.loader = 'esbuild-loader'
         e.options = options
       })

package.json

@@ -7,22 +7,17 @@
   ],
   "private": false,
   "scripts": {
-    "eslint": "eslint --max-warnings 20 'src/**/*.{js,jsx,ts,tsx}'",
+    "lint": "yarn prettier && yarn eslint",
+    "eslint": "eslint --max-warnings 50 'src/**/*.{js,jsx,ts,tsx}' --ext tsconfig.json",
+    "eslint-fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}' --ext tsconfig.json",
+    "prettier": "prettier --list-different '**/*.{js,jsx,md}'",
     "tsc": "tsc --noEmit",
     "dev": "next dev",
     "build": "next build",
     "export": "EXPORT=true next build && EXPORT=true next export",
     "analyze": "ANALYZE=true next build",
     "start": "next start"
   },
-  "lint-staged": {
-    "*.{js,jsx,json,md}": [
-      "prettier --write"
-    ],
-    "*.{js,jsx}": [
-      "eslint --fix"
-    ]
-  },
   "dependencies": {
     "@code-surfer/themes": "^3.1.1",
     "@headlessui/react": "^1.2.0",
@@ -57,20 +52,17 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-glsl": "^1.0.0",
     "code-surfer": "^3.1.1",
-    "eslint": "^7.25.0",
+    "eslint": "^7.31.0",
+    "eslint-config-next": "^11.0.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-tailwind": "^0.2.1",
     "file-loader": "^6.2.0",
     "glslify": "^7.1.1",
     "glslify-loader": "^2.0.0",
-    "lint-staged": "^10.5.4",
+    "husky": "^7.0.1",
     "mdx-code": "^2.0.0",
     "mdx-deck": "^4.1.1",
     "next-compose-plugins": "^2.2.1",

src/components/Account.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react'
+
 import { supabase } from '@/lib/supabaseClient'
 
 export const Account = ({ session }) => {
@@ -69,15 +70,15 @@ export const Account = ({ session }) => {
     <div className='form-widget'>
       <div>
         <label htmlFor='email'>Email</label>
-        <input id='email' type='text' value={session.user.email} disabled />
+        <input disabled id='email' type='text' value={session.user.email} />
       </div>
       <div>
         <label htmlFor='username'>Name</label>
         <input
           id='username'
           type='text'
           value={username || ''}
-          onChange={(e) => setUsername(e.target.value)}
+          onChange={e => setUsername(e.target.value)}
         />
       </div>
       <div>
@@ -86,15 +87,15 @@ export const Account = ({ session }) => {
           id='website'
           type='website'
           value={website || ''}
-          onChange={(e) => setWebsite(e.target.value)}
+          onChange={e => setWebsite(e.target.value)}
         />
       </div>
 
       <div>
         <button
           className='block button primary'
-          onClick={() => updateProfile({ username, website, avatar_url })}
           disabled={loading}
+          onClick={() => updateProfile({ username, website, avatar_url })}
         >
           {loading ? 'Loading ...' : 'Update'}
         </button>