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
