TypeScript and Vue3 in VS Code Setup

Vue is great framework for developing web applications. For mid-size and large projects, using TypeScript can help prevent many potential runtime errors and enforce better coding practices.

I'd like to share how to setup a project to use Typescript (.ts and .tsx) and Vue in VS Code with eslint.

Create a vue project using vue-cli

vue create vue-tsx

If you need to install vue-cli: yarn global add @vue/cli

From the CLI, choose at least Vue 3, TypeScript, Babel, and Linter:

vue-cli will install all the dependencies based on these selections.

To use ESLint in VS Code for Typescript and Vue, install the Vetur and ESLint extensions for VS Code.

Then we can add the following into VS Code's setting (settings.json):

{
  "eslint.validate": [
    "vue",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

Create a .eslintrc.js file to specify ESLint configs and rules:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
    jsx: true,
    tsx: true
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "semi": ["warn", "never"],
    "quotes": ["warn", "single", {"avoidEscape": true}],
    "comma-dangle": ["warn", "never"],
    "indent": ["warn", 2]
  }
};

Then you can see warning and options for autofix in VS Code for your .tsx and .vue files:

That's it. Happy building!