TSLint for Visual Studio Code and VueJS

TSLint for Visual Studio Code and VueJS

VSCode extension for tslint with added support for .vue (single file component) files and compiler/typechecker level linting.

vscode-tslint-vue

VSCode extension for tslint with added support for .vue (single file component) files and compiler/typechecker level linting.

Important

Quick Setup

Set Script lang

For linting to work in .vue files, you need to ensure your script tag's language attribute is set to ts or tsx (also make sure you include the .vue extension in all your import statements as shown below):

<script lang="ts">
import Hello from '@/components/hello.vue'

// ...

</script>

Enable typeCheck

You can turn on linting at the typechecker level by setting the typeCheck tslint option to true in your settings.json (File > Preferences > Settings - Workspace):

// .vscode/settings.json
{
  // ...

  "tslint.typeCheck": true, 

  // ...
}

Important: Importing vue modules (ie. import Hello from 'Hello.vue') will work fully within other .vue files (type information is retrieved) without the need for a declaration file .d.ts. However, .ts modules that import .vue modules (ie. main.ts, hello.spec.ts) still require a declaration file:

// vue.d.ts
declare module "*.vue" {
    import Vue from "vue"  // <-- this is not ideal, looking for solution to this in future version.
    export default Vue
}

The above will give the type as vue which is not ideal and defeats the purpose of TypeScript (your Vue modules extend Vue with more type information that you have added on your module). I'm currently looking for a solution to this. In the meantime, you can double check yourself (if you have any places you import vue into ts) using the Webpack plugin fork-ts-checker-webpack-plugin. See Webpack section further down below. Also remember that you will still need declaration files for any non-ts/non-vue imports otherwise TypeScript does not know how to work with them.

Setup tsconfig.json

This extension assumes you have a tsconfig.json file located at the root of your current project/workspace. In your tsconfig file, ensure you don't exclude .vue files and also provide the wildcard path alias @ so that it points to src:

// tsconfig.json
{
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ],
  "exclude": [
      "node_modules"
  ],
  "compilerOptions": {

    // ...

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

Setup tslint.json

Add a tslint.json file. For a quick set of rules you can use the Javascript Standard Style wit npm install tslint-config-standard --save-dev and add it to the extends section as shown below:

{
    "defaultSeverity": "error",
    "extends": [
        "tslint-config-standard" // <-- Don't forget to npm install this package.
    ],    
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
}

Webpack

If you are using Webpack you will mostly likely need a way to perform linting in your build process as well. Check out the fast fork-ts-checker-webpack-plugin (which works with ts-loader set to transpileOnly) where I currently have a pull-request for adding Vue functionality. You can try it out early and read more at this issue here.

VNext

  • This is a fork of vscode-tslint so you can find more information there. Soon I will update this code to fork from the newer, improved extension TSLint (vnext) vscode-ts-tslint. Please refer to the tslint documentation for how to configure the linting rules.

Prerequisites

The extension requires that the tslint and typescript modules are installed either locally or globally. The extension will use the tslint module that is installed closest to the linted file. You can switch the typescript version at the bottom right of the status bar to use the workspace/local version (will update your settings.json). To install tslint and typescript globally you can run npm install -g tslint typescript

Development setup

  • run npm install inside the tslint and tslint-server folders
  • open VS Code on tslint and tslint-server

Developing the server

  • open VS Code on tslint-server
  • run npm run compile or npm run watch to build the server and copy it into the tslint folder
  • to debug press F5 which attaches a debugger to the server
  • to trace the server communication you can enable the setting: "tslint.trace.server": "verbose", "messages"

Developing the extension/client

  • open VS Code on tslint
  • run F5 to build and debug the extension

If you want to debug server and extension at the same time; 1st debug extension and then start server debugging

Publishing to marketplace

  • Make sure you have vsce installed: npm install -g vsce.
  • To publish (from the tslint directory): vsce publish.

Download Details:

Author: prograhammer

Source Code: https://github.com/prograhammer/vscode-tslint-vue

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.