Typescript + Vite

vite-ts.md

Install mkweb ( https://manz.dev/software/mkweb/ )

sudo apt-get install curl jq
sudo curl -s https://manz.dev/download/mkweb -o /usr/local/bin/mkweb
sudo chmod +x /usr/local/bin/mkweb
mkweb project-name
cd project-name

Instalar Typescript

npm install -D @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser ts-node typescript
npm install

• Cambiar scripts build --> "tsc && vite build"

Crear tsconfig.json

{
  "compilerOptions": {
    "target": "ES2019",
    "lib": ["esnext", "dom"],
    "module": "ESNext",
    "rootDir": "src",
    "outDir": "dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "skipLibCheck": false
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Cambiar configuración de ESLint

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: [
    "@typescript-eslint"
  ],
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    "standard"
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module"
  },
  rules: {
    "@typescript-eslint/no-unused-vars": ["error"],
    "@typescript-eslint/type-annotation-spacing": "error",
    quotes: ["error", "double"],
    semi: ["error", "always"],
    "comma-dangle": ["error", "only-multiline"],
    "space-before-function-paren": ["error", "never"]
  }
};

Cambiar referencias en HTML / CSS / JS

• Enlazar al Typescript: <script type="module" src="./index.ts"></script>

Integración con VSCode

Asegurarnos de que estos valores están indicados en F1:

{
  /* ... */
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.format.enable": true,
  "typescript.validate.enable": true,
  /* ... */
}