TypeScript is a special language. People tend to either love it or vehemently hate it (though it seems like most of those who’ve tried it, love it). Regardless of your opinion, TypeScript can be quite convenient at times. But, it can be a pain to get it working properly with Vue. Since TypeScript uses its own linting and compiling tools, integrating it into an existing toolchain can be quite an exploration of arcane arts. Getting TypeScript to lint, for example, Vue Single File Components, cannot be directly done by
Let’s take a look at how we can get Vue Single File Components linted using wotan.
This tutorial assumes you’ve got a project already set up with TypeScript. Something along the lines of Microsoft’s official TypeScript-Vue Starter Project
— Sorry to interrupt this program! 📺
If you're interested in learning Vue in a comprehensive and structured way, I highly recommend you try The Vue.js Master Class course by Vue School. Learning from a premium resource like that is a serious investment in yourself.
Plus, this is an affiliate link, so if you purchase the course you help Alligator.io continue to exist at the same time! 🙏
Install Wotan and Related Plugins
We’re going to need three packages:
- The wotan CLI. Does the usual things that CLIs do.
- Vé - A preprocessor for Wotan that extracts scripts from Vue Single File Components for linting.
- Valtýr - A plugin for Wotan that effectively works as a drop-in replacement for
tslint. It can use your
$ npm install --save-dev @fimbul/wotan @fimbul/ve @fimbul/valtyr
Create a new file called
.fimbullinter.yaml. This holds the configuration that tells wotan how to lint your project.
# Tell wotan to use the valtyr module for linting. modules: "@fimbul/valtyr" # Valtýr configuration. valtyr: overrides: # Use the Vé preprocessor for all *.vue files. # Valtýr will still run for *.ts files by default. - files: "*.vue" processor: "@fimbul/ve"
Now, you can lint your project simply by running
wotan in the project directory.
For example, here’s the output I get when running
wotan on the default TypeScript-Vue Starter Project.
Thankfully, all of those errors can be automatically fixed using
Don’t like the linter configuration? Just configure
tslint.json like you would with any other TypeScript project!
At the moment, wotan is a fairly young project and doesn't seem to have direct integration with any editors. Perhaps you could help with that?
And with that, you should be good to go!