Typescript + Vue linter config step by step

INTRODUCTION

Configuring a linter with TypeScript might seem daunting if you're unsure where to begin. Fortunately, here's an easy and straightforward method to set up TypeScript for your Vue application.

In this guide, I'll be using Eslint along with Standard and Prettier. I believe these tools offer a simpler way to kickstart your work without spending excessive time on manual configurations.

GET'S START

First of all, we'll need install eslint:

npx eslint --init

This command will be asking you a bunch of things, just follow the installation selecting your preferences.

In my case, I'd like to use Standard and Typescript.

Secondly, we need to install prettier:

npm i prettier -D

With this tools installed we need to configure a bit some files.

CONFIG FILES

The first file to configure will be ".prettierrc" following this:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "semi": true,
  "comma-dangle": ["error", "never"]
}

These are my prettier preferences, but they can be whatever you think works fine with your workflow.

Finally the ".eslintrc.json" file:

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "standard-with-typescript",
        "plugin:vue/vue3-essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": ["./tsconfig.json"],
        "tsconfigRootDir": "./",
        "extraFileExtensions": [".vue"],
        "parser": "@typescript-eslint/parser"
    },

    "plugins": [
        "vue"
    ],
    "rules": {
        "@typescript-eslint/member-delimiter-style": 0,
        "@typescript-eslint/semi": 0,
        "vue/multi-word-component-names": "off",
        "@typescript-eslint/strict-boolean-expressions": 0,
        "@typescript-eslint/no-invalid-void-type": 0
    }
}

This is pre-configured by you once Eslint is installed, but probably you will need to add some configurations, such as the "rules", "parserOptions" and "extends".

FINAL STEP

Once we already have everything configured, our last step will be create an script to re-format all our code in a simple way. This is my favourite easy script:

"format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx}\""

This way only running this script all your code will be pretty formated :)

ENJOY

Well, this is my personal Eslint and prettier configuration, I know it can be improved a lot, so just share your feedback on comments. I'm more than happy to learn better ways to configure a project with Typescript and a proper formatter tool.