I modified the Svelte starter template so CoffeeScript can be used via svelte-preprocess. VS Code displays "problems" for Svelte files because the CoffeeScript is being interpreted as JavaScript:
Note this is only a problem with the VS Code tooling; when the project is built the CoffeeScript is correctly detected and compiled into JavaScript.
Why is VS Code processing the CoffeeScript as JavaScript? Steps I tried to configure VS Code for Svelte + CoffeeScript:
Install Svelte for VS Code extension.
Add svelte.config.js file in project root, per these instructions:
If a svelte file contains some language other than html, css or
javascript, svelte-vscode needs to know how to preprocess it. This can
be achieved by creating a svelte.config.js file...
Restart the language server.
At first I tried the simple svelte.config.js from the instructions above. Then I modified it to ensure both Svelte language tools and rollup use the exact same configuration:
// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');
function createPreprocessors() {
return sveltePreprocess({
defaults: {
markup: 'pug',
script: 'coffeescript',
style: 'css'
},
coffeescript: {
bare: true
}
})
}
module.exports = {
preprocess: createPreprocessors(),
createPreprocessors
};
I have also confirmed VS Code correctly processes pure CoffeeScript files with .coffee extension.
The entire project is available at: github.com/Leftium/svelte-coffeescript-pug
Do you also have this issue when using <script lang="coffee">?
Related
i am running an app in aspnetcore which uses plain js files for the view part,
in this case is a legacy app using :
jquery
Requirejs with AMD modules
Durandal (now aurelia) which enforces the use of those modules
Knockoutjs (mvvm lib)
here an example of durandal/amd module code (if anyone has seen it already)
define(['durandal/app',
'plugins/dialog',
'global',
'knockout',
'services/datacontext',
'services/appsecurity'],
function (app, dialog, global, ko, datacontext, appsecurity) {
/// ... function body using modules but no intellisense...
}
this is the structure of my app
--src
----aspnectoreapp
-------wwwroot
---------App (contains app code using durandall structure)
-----------Config.js (requirejs config file)
-----------Main.js (entry point)
---------Scripts (contains js libs like all the aboves)
how can i make this to work with vscode intellisense?
i tried adding packages with npm init, and npm install -D
adding both packages and types..
i also tried adding this in my wwwroot/jsconfig.json
{
"compilerOptions": {
"module": "amd",
"target": "es6"
}
}
but got no luck.
I also tried installing the requirejs vscode extension specifying a settings.json workspace solution file (at top level), with this values
{
"requireModuleSupport.modulePath": "./src/aspnectoreapp/Scripts",
"requireModuleSupport.configFile": "./src/aspnectoreapp/App/Config.js"
}
but got no luck .
Anyone which tried any of those settings or knows a way this could work?
At the moment deno bundle does not support targeting older ES version such as ES3, since it's by default targeting ESNext, it makes the bundled code unable to be executed in certain environments.
Therefore, I wanted to use Babel to transpile the bundled code to a more compatible version ES.
You can achieve this by importing Babel standalone from jspm.io.
import babelstandalone from "https://dev.jspm.io/#babel/standalone"
const code = `var x = 5`
const transformed = babelstandalone.transform(code, {
presets: ['env']
}).code
console.log(transformed)
If you intended to run the transformed code in browser, you will need to import runtime.js. You can do so by including the following script tag in your HTML file.
<script src="https://unpkg.com/regenerator-runtime#0.13.1/runtime.js"></script>
Currently, I have VSCode properly linting SCSS for Svelte using the following setup; however, it does not work for braceless SASS. <style type="text/sass"> will process correctly, however VSCode will repeatedly highlight errors requesting braces.
How should I update the follow to allow linting for braceless SASS?
\\ svelte.config.js
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
preprocess: sveltePreprocess()
};
Unfortunately SASS is not supported. The Svelta Beta extension only supports syntax for Less/CSS/SCSS. This is the case because the html language service that the work is delegated to (https://github.com/microsoft/vscode-html-languageservice) does not support SASS.
Is it possible to make a vscode extension made of mjs files?
because I tried to make an extension with mjs files only, in order to have full es6 features without TypeScript.
But it does not run:
If I make the extension with $ vsce package it does not give any error but it makes an extension that does not work when installed: the contributions that I've put in the package.json are present but vscode shows an error popup that says
Activating extension 'my.ext' failed: Must use import to load ES Module: c:\vsext\extension.mjs.
and every command I try to run gives an error
command 'my.cmd' not found
If I run the extension on the debugger, and the breakpoint on uncaught exception option flagged, it breaks on /src/vs/workbench/api/node/extHostExtensionService.ts:88.
After further search, I noticed that this exception is generatend when the script tries to load the first mjs module.
there is something I can do in order to include my mjs library files?
I think that this behaviour could also impact the use of npm modules with mjs files.
EDIT
Found (kind of) a way using esm:
The idea is to use esm to handle es6 imports and share the vscode object between imported modules
this could seem quite tricky but when I tried to just import * as vscode from "vscode" im my mjs files, vscode complained that can't find module vscode.
so I've done the following
add 'esm' as dependency
in all the files where vscode is used, remove the import of vscode and add something like this function
var vscode; // will store vscode obj
export function IMPORTVSCODE(vscodeInstance){
vscode = vscodeInstance
}
create a init file where you require vscode (with node native require) and your main module (with esm require)
in the init file call main.IMPORTVSCODE(vscode)
on all the files A that imports a file B that need vscode, before use the exported stuff from file B, call B.IMPORTVSCODE(vscode)
for example
// init.js
const vscode = require("vscode")
const esm = require("esm")(module/*, options*/)
const main = esm("./main.mjs")
main.IMPORTVSCODE(vscode)
module.exports = main
// main.mjs
import * as other from "./other.mjs"
var vscode; // will store vscode obj
export function IMPORTVSCODE(vscodeInstance){
vscode = vscodeInstance
}
function activate(){
other.IMPORTVSCODE(vscode)
other.methodThatNeedsVscode()
}
// other.mjs
var vscode; // will store vscode obj
export function IMPORTVSCODE(vscodeInstance){
vscode = vscodeInstance
}
export function methodThatNeedsVscode(){
vscode // ...use vscode
}
My extension runs fine now!
But I think that better ideas could be found, so if somebody has some finest solutions, please share them
I am using Jest as unit testing framework and bellow intellisense is correct:
However, when I install Cypress "cypress": "^3.2.0", the same code now displaying error Property 'toMatch' does not exist on type 'Assertion'. Did you mean 'match'?. The reason for that IMO is Cypress install typings under node_modules/cypress/types/chai/index.d.ts and VS Code is picking them for intellisense. Both Jest and Cypress have dependency on Chai assertion library. Intellisense after installing Cypress:
Is there a way to tell VS Code which Chai intellisense to use in specific folder? Or is there some way to specify it in jsconfig.json file?
Had the same problem with cypress and jest.
I solved it by creating two jsconfig.json
cypress/jsconfig.json
{
"typeAcquisition": { "include": ["cypress"] }
}
and then one for my src folder
src/jsconfig.json
{
"typeAcquisition": { "include": ["jest"] }
}
Restarted VSCode and it worked as expected
Facing this issue myself too.
Usually I can type the assertions by heart, but when you really need autocompletion, adding
/// <reference types="jest" />
(A triple-slash directive) On the top of your test suite file will give you the correct jest types.
Note: you need to have #types/jest installed too!
The solution was to create aliases for those global variables exposed in Jest
and decorate those variables with #type in JSDoc. So, I created a file jestGlobals.js in same directory where my tests are.
jestGlobals.js file: (I included only one global for sake of simplicity, but you would do the same thing for all global variables):
/** #type {jest.Expect} */
// #ts-ignore
let expect = global.expect
export { expect }
Then I just import those variables in my *.spec.js files:
import { expect } from './jestGlobals'
Now, when I use this aliases, I got correct intellisense like this: