React Vite Typescript Eslint

.eslintignore

vite.config.ts
src/vite-env.d.ts
dist

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2022": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "plugin:etc/recommended",
    "plugin:unicorn/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "react-hooks",
    "unicorn"
  ],
  "rules": {
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": [
      "error"
    ],
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [
      "warn",
      {
        "extensions": [
          ".tsx",
          ".js"
        ]
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ],
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": [
      "error"
    ],
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "allowExpressions": true
      }
    ],
    "max-len": [
      "warn",
      {
        "code": 180
      }
    ],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/function-component-definition": [
      "error",
      {
        "namedComponents": "arrow-function"
      }
    ],
    "import/prefer-default-export": "off",
    "comma-dangle": [
      "error",
      "never"
    ],
    "import/no-unresolved": [
      "error",
      {
        "ignore": [
          "^react$"
        ]
      }
    ],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "src/stories/**/*.stories.tsx"
        ]
      }
    ],
    "no-multiple-empty-lines": "error",
    "sort-keys": [
      "error",
      "asc",
      {
        "caseSensitive": true,
        "natural": false,
        "minKeys": 3
      }
    ],
    "etc/prefer-interface": "error",
    "unicorn/prevent-abbreviations": [
      "error",
      {
        "allowList": {
          "props": true
        }
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    },
    "react": {
      "version": "18"
    }
  }
}

.vscode_extensions.json

{
  "recommendations": [
    "blanu.vscode-styled-jsx",
    "csstools.postcss",
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens",
    "snyk-security.snyk-vulnerability-scanner",
    "sonarsource.sonarlint-vscode",
    "usernamehw.errorlens",
    "lacroixdavid1.vscode-format-context-menu",
    "henriiik.vscode-sort"
  ]
}

.vscode_settings.json

{
  "typescript.tsdk": "node_modules\\typescript\\lib",
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.addMissingImports": true,
    "source.fixAll.eslint": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/.vscode": true,
    "**/dist": true
  },
  "git.autofetch": true,
  "typescript.implementationsCodeLens.enabled": true,
  "editor.trimAutoWhitespace": true,
  "files.encoding": "utf8",
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "css.validate": false,
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.detectIndentation": false,
  "editor.tabSize": 2
}

README.md

Init project with Vite

npm init vite@latest vite-react -- --template react-ts
cd vite-react
npm install

Quick Install

mkdir .vscode
curl -o .vscode/extensions.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.vscode_extensions.json
curl -o .vscode/settings.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.vscode_settings.json

curl -o tsconfig.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/tsconfig.json

npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb eslint-import-resolver-typescript eslint-plugin-etc eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unicorn eslint-plugin-tailwindcss --save-dev

curl -o .eslintignore https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.eslintignore
curl -o .eslintrc.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.eslintrc.json
npm pkg set scripts.lint="eslint . --ext .js,.jsx,.ts,.tsx"
npm pkg set scripts.format="eslint . --ext .js,.jsx,.ts,.tsx --fix"

npm install vitest c8 --save-dev
curl -o vite.config.ts https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/vite.config.ts
npm pkg set scripts.test="vitest run"
npm pkg set scripts.watch="vitest watch"
npm pkg set scripts.coverage="vitest run --coverage"
curl -o ./src/example.test.ts https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/example.test.ts

npm install husky --save-dev
npm pkg set scripts.prepare="husky install"
git init
npm run prepare
npx husky add .husky/pre-commit "npm run lint && npm run test"
npx husky add .husky/pre-push "npm run lint && npm run test && npm run build"
npm pkg delete scripts.prepare


rm ./src/logo.svg
rm ./src/App.css
rm ./src/App.tsx
rm ./src/index.css
curl -o ./src/app.tsx https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/app.tsx
curl -o ./src/main.tsx https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/main.tsx

npm pkg set scripts.update-dependencies="npx -y npm-check-updates -u"
npm run update-dependencies
npm install

npm run format

echo .dccache >> .gitignore
git add .
git commit -m "init project"

app.tsx

import { FC } from 'react';

const App: FC = () => (
  <div>
    <h1>We are all Jedi!</h1>
  </div>
);

export default App;

create_react-app.sh

npm init vite@latest $APP_NAME-react-app -- --template react-ts
cd $APP_NAME-react-app
npm install

git init

mkdir .vscode
curl -o .vscode/extensions.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.vscode_extensions.json
curl -o .vscode/settings.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.vscode_settings.json

curl -o tsconfig.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/tsconfig.json

npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb eslint-import-resolver-typescript eslint-plugin-etc eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unicorn --save-dev

curl -o .eslintignore https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.eslintignore
curl -o .eslintrc.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.eslintrc.json
npm pkg set scripts.lint="eslint . --ext .js,.jsx,.ts,.tsx"
npm pkg set scripts.format="eslint . --ext .js,.jsx,.ts,.tsx --fix"

npm install husky --save-dev
npm pkg set scripts.prepare="husky install"
git init
npm run prepare
npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-push "npm run lint && npm run build"
npm pkg delete scripts.prepare

npm install vitest --save-dev
curl -o vite.config.ts https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/vite.config.ts
npm pkg set scripts.test="vitest run"
npm pkg set scripts.watch="vitest watch"
npm pkg set scripts.coverage="vitest run --coverage"
curl -o ./src/example.test.ts https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/example.test.ts
npx json -I -f tsconfig.json -e 'this.compilerOptions.types=["vitest/globals"]'

rm ./src/logo.svg
rm ./src/Main.tsx
rm ./src/App.css
rm ./src/App.tsx
rm ./src/index.css
curl -o ./src/app.tsx https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/app.tsx
curl -o ./src/main.tsx https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/main.tsx

npx replace-in-files-cli --string='Vite App' --replacement='$APP_NAME' index.html

npm pkg set scripts.update-dependencies="npx -y npm-check-updates -u"
npm run update-dependencies
npm install

npm run format

echo .dccache >> .gitignore
echo !.vscode/settings.json >> .gitignore
echo coverage >> .gitignore
git add .
git commit -m "init project"

cd ..

create_ui-library.sh

npm init vite@latest $APP_NAME-ui-library -- --template react-ts
cd $APP_NAME-ui-library
npm install

git init

mkdir .vscode
curl -o .vscode/extensions.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.vscode_extensions.json
curl -o .vscode/settings.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.vscode_settings.json

curl -o tsconfig.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/tsconfig.json

npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb eslint-import-resolver-typescript eslint-plugin-etc eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unicorn eslint-plugin-tailwindcss --save-dev

curl -o .eslintignore https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.eslintignore
curl -o .eslintrc.json https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/.eslintrc.json
echo tailwind.config.js  >> .eslintignore
echo postcss.config.js  >> .eslintignore
npm pkg set scripts.lint="eslint . --ext .js,.jsx,.ts,.tsx"
npm pkg set scripts.format="eslint . --ext .js,.jsx,.ts,.tsx --fix"

npm install husky --save-dev
npm pkg set scripts.prepare="husky install"
git init
npm run prepare
npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-push "npm run lint && npm run build"
npm pkg delete scripts.prepare

rm ./src/logo.svg
rm ./src/Main.tsx
rm ./src/App.css
rm ./src/App.tsx
rm ./src/index.css
rm ./src/favicon.svg
rm ./index.html

npm pkg delete scripts.dev
npm pkg delete scripts.preview

npx sb init --builder @storybook/builder-vite

rm -rvf ./src/stories/*
mkdir ./src/lib

npm install vite-plugin-dts --save-dev
curl -o vite.config.ts https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/library-vite.config.ts
npx -y replace-in-files-cli --string='my-lib' --replacement='$APP_NAME-ui-library' vite.config.ts

npm install tailwindcss@latest postcss@latest autoprefixer@latest @storybook/addon-postcss --save-dev
npx tailwindcss init -p
touch ./src/lib/main.css
echo '@tailwind base;\n@tailwind components;\n@tailwind utilities;' >> ./src/lib/main.css
touch ./src/lib/index.ts
echo "import './main.css';" >> ./src/lib/index.ts
curl -o tailwind.config.js https://gist.githubusercontent.com/vdelacou/4584ed57e1f141290820ba389694d7dd/raw/tailwind.config.js
npx replace-in-files-cli --string='"@storybook/addon-essentials",' --replacement='"@storybook/addon-essentials",\n"@storybook/addon-postcss",' .storybook/main.js
echo "\nimport '../src/lib/main.css';" >> .storybook/preview.js
echo storybook-static >> .gitignore

npm install @headlessui/react @heroicons/react react-hook-form

npx -y replace-in-files-cli --string='"dependencies"' --replacement='"peerDependencies"' package.json
npm pkg set "files[0]"=dist
npm pkg set "main"="./dist/$APP_NAME-ui-library.umd.js"
npm pkg set "module"="./dist/$APP_NAME-ui-library.es.js"
npm pkg set "types"="./dist/index.d.ts"

npx -y json -I -f package.json -e 'this.exports={".": {"import": "./dist/$APP_NAME-ui-library.es.js","require": "./dist/$APP_NAME-ui-library.umd.js"}}'

npm pkg set scripts.update-dependencies="npx -y npm-check-updates -u"
npm run update-dependencies
npm install

curl https://codeload.github.com/vdelacou/template-in-a-glass-ui-library/tar.gz/main | tar -xz --strip=1 template-in-a-glass-ui-library-main/src/

npm run format

echo .dccache >> .gitignore
echo !.vscode/settings.json >> .gitignore
git add .
git commit -m "init project"

cd ..

example.test.ts

describe('suite name', () => {
  it('foo', () => {
    assert.equal(Math.sqrt(4), 2)
  })

  it('bar', () => {
    expect(1 + 1).eq(2)
  })
})

library-vite.config.ts

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
const path = require('path');

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true
    })
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/lib/index.ts'),
      name: 'my-lib',
      formats: ['es', 'umd'],
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
});

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './app';

const rootElement = document.querySelector('#root');

if (rootElement) {
  ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

start.sh

export APP_NAME=helix

mkdir $APP_NAME
cd $APP_NAME

../create_ui-library.sh

# npm init vite@latest $APP_NAME-react -- --template react-ts
# cd $APP_NAME-react
# npm install

# npx json -I -f tsconfig.json -e 'this.compilerOptions.types=["vitest/globals"]'

tailwind.config.js

/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors');

module.exports = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: colors.indigo,
        secondary: colors.cyan,
        gray: colors.slate,
        red: colors.orange
      }
    },
  },
  plugins: [],
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

vite.config.ts

/// <reference types="vitest" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true
  }
});