Properly process Svelte files with CoffeeScript/Pug in VS Code

Viewed 510

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:

enter image description here

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:

  1. Install Svelte for VS Code extension.

  2. 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...

  1. 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

1 Answers

Do you also have this issue when using <script lang="coffee">?

Related