Linting TypeScript Vue.js Components with Wotan
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
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
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!