Combining vue with deno and vscode: A guide to seamless development integration

How can I set up Visual Studio Code for a Vue project using Deno?

Important note - the issues mentioned here only pertain to highlighting in VSCode, as the builds, development, and scripts are functioning correctly!

Deno + Vue is an appealing choice! You can develop APIs and UIs within the same repository and easily share models, types, or validators between them.

Key points from my exploration:

  1. My focus in this article is on resolving the highlighting issue in vscode.

  2. I suspect that *.vue files in vscode require the Volar extension, which relies on TypeScript LSP rather than Deno's, posing a main challenge.

  3. When using Deno's LSP, it struggles to understand SingleFileComponent syntax.

I've attempted separate configurations for TypeScript and Deno, syncing their aliases, imports, and node_modules successfully. However, I believe there may be more robust and standardized solutions available.

typescriptvue.jsvisual-studio-codevitedeno

Answer №1

my typical solution approach:

  • vite.config.mts containing all necessary npm:* imports
  • deno.json with aliases in imports to mirror original npm package names

and an unconventional twist:

  • .vscode/settings.json configured to enable deno specifically for the API
  • tsconfig.json defining types for projects following standard vue-vite-node-vscode setup...
  • creation of a dev-hack folder with its own package.json importing all modules via npm
  • update tsconfig.json (compilerOptions.typeRoots[) to include path to dev-hack/node_modules

Essentially, aside from the API (if applicable), all files are handled by TypeScript in Visual Studio Code using tsconfig.json that references dev-hack/node_modules (with node_modules being ignored in .gitignore)... solely for syntax highlighting purposes!

The actual build/serve/dev processes will function as expected without TypeScript configurations mentioned earlier, instead relying on deno+vite as outlined in the documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Waiting for the response to come by subscribing in Angular

I am encountering an issue while trying to subscribe to an Observable and assign data from the response. The problem is that my code does not wait for the response before executing the console.log(this.newIds) line, resulting in an empty value being logg ...

javascriptangulartypescriptasynchronous

Problem: Unable to locate the TypeScript declaration file

I am facing an issue with my TypeScript configuration. I have two files in /src/models/: User.ts and User.d.ts. In User.ts, I am building a class and trying to use an interface declaration for an object defined in User.d.ts. However, User.ts is unable to a ...

typescripttypescript-typings

To ensure optimal performance, it is necessary to import the vite build styles individually

I created a vue3+vite package and now I am looking to publish it on npm. However, when I import it into a test project, I find myself having to separately import styles from the dist folder in addition to the package itself. My goal is for the styles to be ...

vue.jsvite

Locate a class using an interface

Consider the code snippet below: interface FirstInterface {} interface SecondInterface {} interface ThirdInterface {} class TheClass { constructor(howdy: FirstInterface) {} } class Foo implements FirstInterface {} class Bar implements SecondInterface ...

typescript

What could be causing the content in my select box to change only when additional select boxes are introduced?

When working with a form in next.js and using select boxes from material UI, I encountered an issue. The number of select boxes should change based on user input, but when I modify the value inside a select box, the displayed text does not update until I a ...

node.jstypescriptnext.jsmaterial-ui

vee-validate remains consistent in its language settings

Having trouble changing the error message in vee-validate, any suggestions on how to fix this? import VeeValidate from "vee-validate"; import hebrew from "vee-validate/dist/locale/he"; Vue.use(VeeValidate, { locale: "he", dictionary: { he: { me ...

javascriptvue.jsvee-validate

Guide to retrieving the previous URL in Angular 2 using Observables

Can someone help me retrieve my previous URL? Below is the code snippet I am working with: prev2() { Promise.resolve(this.router.events.filter(event => event instanceof NavigationEnd)). then(function(v){ console.log('Previous ' ...

javascriptangulartypescript

Is there a way to ensure that a "catch all other" route in the Vue Router will also capture the URL if a portion of it matches a predefined route?

After following the suggestion to implement a catch all route from this article, I realized that it does not capture URLs that partially match a defined route. routes: [ { path: "/album/:album", name: "album", component: Album, } ...

javascriptvue.jsredirectvue-router

The value of an Angular array seems to be disappearing after being copied to another array and then cleared

I have encountered an issue while working with arrays. I am initializing two arrays - one with some values and another as empty. However, when I assign the items from the first array to the second array and then clear the first array, it unexpectedly clear ...

angulartypescript

Changing the Class of an Element in a Different Component with Angular 2+

Currently in a project utilizing Angular 4, I have implemented two components: app.component and other.component Within app.component.html, there exists a div with the name attribute myClass. <div class="myClass"></div> In the other.componen ...

javascriptangulartypescript

Error: Unable to cast value to an array due to validation failure

I'm currently working on integrating Typegoose with GrqphQL, MongoDB, and Nest.js for a project. My goal is to create a mutation that will allow users to create a post. I have set up the model, service, and resolver for a simple Post. However, when I ...

typescriptmongoosenestjstypegraphqltypegoose

A guide to integrating ffmpeg with NuxtJS

I am completely new to Nuxt and currently in the process of migrating a Vue application that generates gifs using ffmpeg.wasm over to Nuxt.js. However, every time I try to access the page, the server crashes with the following error message: [fferr] reques ...

javascriptnode.jsvue.jsnuxt.js

In Angular, make a call to a second API if the first API call times out after a specified period

In the event that my API does not return data within 5 seconds, I need to call a different one. Attempted implementation: this.service.returnData1(param1, param2) .pipe(timeout(5000), finalize(() => this.callSecondApi())) .subscribe( data => { ...

angulartypescriptpipetimeout

Receiving an `Invalid module name in augmentation` error is a common issue when using the DefaultTheme in Material

After following the guidelines outlined in the migration documentation (v4 to v5), I have implemented the changes in my theme: import { createTheme, Theme } from '@mui/material/styles' import { grey } from '@mui/material/colors' declar ...

javascriptreactjstypescriptmaterial-ui

I am experiencing issues with the search feature in angular and node.js that is not functioning properly

Need assistance with debugging this code. I am currently working on adding search functionality to my Angular web page. However, when testing the code in Postman, I keep receiving the message "NO USER FOUND WITH USERNAME: undefined". Additionally, on the w ...

javascriptnode.jsangulartypescript

I am experiencing issues with my Jest unit test case for Material UI's multi select component failing

I've been working on writing a unit test case for the material UI multi select component. The code for the parent component is as follows: import {myData} from '../constant'; export const Parent = () => { const onChangeStatus= (sel ...

reactjstypescriptjestjsmaterial-uienzyme

What is the best way to initiate a loading event once the window has completely finished loading?

I am currently working with a framework (vue.js) that inserts images when there is a page change, without actually refreshing the entire page. When the page is loaded directly, I can implement a loading screen using the following code: loading = true; $(w ...

javascriptjqueryasynchronoussingle-page-applicationvue.js

The absence of the function crypto.createPrivateKey is causing issues in a next.js application

For my next.js application, I am utilizing the createPrivateKey function from the crypto module in node.js. However, I encountered an issue as discussed in this thread: TypeError: crypto.createPrivateKey is not a function. It seems that this function was a ...

javascriptnode.jsreactjstypescriptnext.js

How can a Firestore Timestamp object be correctly created within a rules test data set?

I am in the process of writing tests for Firestore rules, focusing on testing rules that control when actions can be executed based on a timestamp stored in the document. It is important to note that the rules will utilize rules.Timestamp rather than Java ...

typescriptgoogle-cloud-firestorefirebase-security

Exploring the world of computed properties in Vue.js

Currently working on implementing a dynamic category feature in Vue.js My project involves four input fields: Team, Gender, Age, Grade I want the text on the screen to update every time one of these inputs changes, indicating the selected category. Init ...

vue.js