By Joshua Bemenderfer
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking 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
We’re going to need three packages:
tslint. It can use your
tslint.json files unchanged.
$ 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.
# Valtýr configuration.
# Use the Vé preprocessor for all *.vue files.
# Valtýr will still run for *.ts files by default.
- files: "*.vue"
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!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.