diff --git a/client/vueMain.ts b/client/vueMain.ts
index 4437fb4ecf..7165cd7c32 100644
--- a/client/vueMain.ts
+++ b/client/vueMain.ts
@@ -22,10 +22,9 @@ export function activate(context: vscode.ExtensionContext) {
 
   context.subscriptions.push(
     vscode.commands.registerCommand('vetur.chooseTypeScriptRefactoring', (args: any) => {
-      client.sendRequest<vscode.Command | undefined>('requestCodeActionEdits', args)
-        .then(command =>
-          command && vscode.commands.executeCommand(command.command, ...command.arguments!)
-        );
+      client
+        .sendRequest<vscode.Command | undefined>('requestCodeActionEdits', args)
+        .then(command => command && vscode.commands.executeCommand(command.command, ...command.arguments!));
     })
   );
 
diff --git a/package.json b/package.json
index cbe3c0d022..6d1d8a3e13 100644
--- a/package.json
+++ b/package.json
@@ -412,6 +412,11 @@
         "vetur.dev.vlsPath": {
           "type": "string",
           "description": "Path to VLS for Vetur developers. There are two ways of using it. \n\n1. Clone vuejs/vetur from GitHub, build it and point it to the ABSOLUTE path of `/server`.\n2. `yarn global add vue-language-server` and point Vetur to the installed location (`yarn global dir` + node_modules/vue-language-server)"
+        },
+        "vetur.experimental.templateTypeCheck": {
+          "type": "boolean",
+          "default": true,
+          "description": "Type-check interpolation expressions in <template> region"
         }
       }
     }
diff --git a/server/package.json b/server/package.json
index d5fbc78c4c..d9d2c93f50 100644
--- a/server/package.json
+++ b/server/package.json
@@ -44,11 +44,14 @@
     "vscode-languageserver": "^5.3.0-next.4",
     "vscode-languageserver-types": "^3.15.0-next.1",
     "vscode-uri": "^1.0.1",
+    "vue-eslint-parser": "^6.0.3",
     "vue-onsenui-helper-json": "^1.0.2",
     "vuetify-helper-json": "^1.0.0"
   },
   "devDependencies": {
     "@types/eslint": "^4.16.5",
+    "@types/eslint-scope": "^3.7.0",
+    "@types/eslint-visitor-keys": "^1.0.0",
     "@types/glob": "^7.1.0",
     "@types/js-beautify": "^1.8.0",
     "@types/lodash": "^4.14.118",
diff --git a/server/src/modes/script/bridge.ts b/server/src/modes/script/bridge.ts
index 59002182c1..e2855a1d64 100644
--- a/server/src/modes/script/bridge.ts
+++ b/server/src/modes/script/bridge.ts
@@ -1,21 +1,44 @@
-// this bridge file will be injected into TypeScript service
+import { renderHelperName, componentHelperName, iterationHelperName, listenerHelperName } from './transformTemplate';
+
+// This bridge file will be injected into TypeScript language service
 // it enable type checking and completion, yet still preserve precise option type
 
 export const moduleName = 'vue-editor-bridge';
 
 export const fileName = 'vue-temp/vue-editor-bridge.ts';
 
-export const oldContent = `
+const renderHelpers = `
+export declare const ${renderHelperName}: {
+  <T>(Component: (new (...args: any[]) => T), fn: (this: T) => any): any;
+};
+export declare const ${componentHelperName}: {
+  (tag: string, data: any, children: any[]): any;
+};
+export declare const ${iterationHelperName}: {
+  <T>(list: T[], fn: (value: T, index: number) => any): any;
+  <T>(obj: { [key: string]: T }, fn: (value: T, key: string, index: number) => any): any;
+  (num: number, fn: (value: number) => any): any;
+  <T>(obj: object, fn: (value: any, key: string, index: number) => any): any;
+};
+export declare const ${listenerHelperName}: {
+  <T>(vm: T, listener: (this: T, ...args: any[]) => any): any;
+};
+`;
+
+export const oldContent =
+  `
 import Vue from 'vue';
 export interface GeneralOption extends Vue.ComponentOptions<Vue> {
   [key: string]: any;
 }
 export default function bridge<T>(t: T & GeneralOption): T {
   return t;
-}`;
+}
+` + renderHelpers;
 
-export const content = `
+export const content =
+  `
 import Vue from 'vue';
 const func = Vue.extend;
 export default func;
-`;
+` + renderHelpers;
diff --git a/server/src/modes/script/javascript.ts b/server/src/modes/script/javascript.ts
index 0d1ded4474..0526c58cfc 100644
--- a/server/src/modes/script/javascript.ts
+++ b/server/src/modes/script/javascript.ts
@@ -102,35 +102,73 @@ export async function getJavascriptMode(
     },
 
     doValidation(doc: TextDocument): Diagnostic[] {
-      const { scriptDoc, service } = updateCurrentTextDocument(doc);
-      if (!languageServiceIncludesFile(service, doc.uri)) {
-        return [];
+      const templateDiags = getTemplateDiagnostics();
+      const scriptDiags = getScriptDiagnostics();
+      return [...templateDiags, ...scriptDiags];
+
+      function getScriptDiagnostics(): Diagnostic[] {
+        const { scriptDoc, service } = updateCurrentTextDocument(doc);
+        if (!languageServiceIncludesFile(service, doc.uri)) {
+          return [];
+        }
+
+        const fileFsPath = getFileFsPath(doc.uri);
+        const rawScriptDiagnostics = [
+          ...service.getSyntacticDiagnostics(fileFsPath),
+          ...service.getSemanticDiagnostics(fileFsPath)
+        ];
+
+        return rawScriptDiagnostics.map(diag => {
+          const tags: DiagnosticTag[] = [];
+
+          if (diag.reportsUnnecessary) {
+            tags.push(DiagnosticTag.Unnecessary);
+          }
+
+          // syntactic/semantic diagnostic always has start and length
+          // so we can safely cast diag to TextSpan
+          return <Diagnostic>{
+            range: convertRange(scriptDoc, diag as ts.TextSpan),
+            severity: DiagnosticSeverity.Error,
+            message: tsModule.flattenDiagnosticMessageText(diag.messageText, '\n'),
+            tags,
+            code: diag.code,
+            source: 'Vetur'
+          };
+        });
       }
 
-      const fileFsPath = getFileFsPath(doc.uri);
-      const diagnostics = [
-        ...service.getSyntacticDiagnostics(fileFsPath),
-        ...service.getSemanticDiagnostics(fileFsPath)
-      ];
+      function getTemplateDiagnostics(): Diagnostic[] {
+        const enabledTemplateValidation = config.vetur.experimental.templateTypeCheck;
+        if (!enabledTemplateValidation) {
+          return [];
+        }
 
-      return diagnostics.map(diag => {
-        const tags: DiagnosticTag[] = [];
+        // Add suffix to process this doc as vue template.
+        const templateDoc = TextDocument.create(doc.uri + '.template', doc.languageId, doc.version, doc.getText());
 
-        if (diag.reportsUnnecessary) {
-          tags.push(DiagnosticTag.Unnecessary);
+        const { templateService } = updateCurrentTextDocument(templateDoc);
+        if (!languageServiceIncludesFile(templateService, templateDoc.uri)) {
+          return [];
         }
 
-        // syntactic/semantic diagnostic always has start and length
-        // so we can safely cast diag to TextSpan
-        return <Diagnostic>{
-          range: convertRange(scriptDoc, diag as ts.TextSpan),
-          severity: DiagnosticSeverity.Error,
-          message: tsModule.flattenDiagnosticMessageText(diag.messageText, '\n'),
-          tags,
-          code: diag.code,
-          source: 'Vetur'
-        };
-      });
+        const templateFileFsPath = getFileFsPath(templateDoc.uri);
+        // We don't need syntactic diagnostics because
+        // compiled template is always valid JavaScript syntax.
+        const rawTemplateDiagnostics = templateService.getSemanticDiagnostics(templateFileFsPath);
+
+        return rawTemplateDiagnostics.map(diag => {
+          // syntactic/semantic diagnostic always has start and length
+          // so we can safely cast diag to TextSpan
+          return {
+            range: convertRange(templateDoc, diag as ts.TextSpan),
+            severity: DiagnosticSeverity.Error,
+            message: ts.flattenDiagnosticMessageText(diag.messageText, '\n'),
+            code: diag.code,
+            source: 'Vetur'
+          };
+        });
+      }
     },
     doComplete(doc: TextDocument, position: Position): CompletionList {
       const { scriptDoc, service } = updateCurrentTextDocument(doc);
diff --git a/server/src/modes/script/preprocess.ts b/server/src/modes/script/preprocess.ts
index ac3817b38c..e364de1884 100644
--- a/server/src/modes/script/preprocess.ts
+++ b/server/src/modes/script/preprocess.ts
@@ -1,64 +1,118 @@
 import * as ts from 'typescript';
 import * as path from 'path';
+import { parse } from 'vue-eslint-parser';
 
 import { getVueDocumentRegions } from '../../embeddedSupport/embeddedSupport';
 import { TextDocument } from 'vscode-languageserver-types';
 import { T_TypeScript } from '../../services/dependencyService';
+import {
+  getTemplateTransformFunctions,
+  componentHelperName,
+  iterationHelperName,
+  renderHelperName,
+  listenerHelperName
+} from './transformTemplate';
+import { isVirtualVueTemplateFile } from './serviceHost';
 
 export function isVue(filename: string): boolean {
   return path.extname(filename) === '.vue';
 }
 
-export function parseVue(text: string): string {
+export function parseVueScript(text: string): string {
   const doc = TextDocument.create('test://test/test.vue', 'vue', 0, text);
   const regions = getVueDocumentRegions(doc);
   const script = regions.getSingleTypeDocument('script');
   return script.getText() || 'export default {};';
 }
 
+function parseVueTemplate(text: string): string {
+  const doc = TextDocument.create('test://test/test.vue', 'vue', 0, text);
+  const regions = getVueDocumentRegions(doc);
+  const template = regions.getSingleTypeDocument('template');
+
+  if (template.languageId !== 'vue-html') {
+    return '';
+  }
+  const rawText = template.getText();
+  // skip checking on empty template
+  if (rawText.replace(/\s/g, '') === '') {
+    return '';
+  }
+  return rawText.replace(/^\s*\n/, '<template>\n').replace(/\s*\n$/, '\n</template>');
+}
+
 export function createUpdater(tsModule: T_TypeScript) {
   const clssf = tsModule.createLanguageServiceSourceFile;
   const ulssf = tsModule.updateLanguageServiceSourceFile;
   const scriptKindTracker = new WeakMap<ts.SourceFile, ts.ScriptKind | undefined>();
+  const modificationTracker = new WeakSet<ts.SourceFile>();
 
   function isTSLike(scriptKind: ts.ScriptKind | undefined) {
-    return scriptKind === ts.ScriptKind.TS || scriptKind === ts.ScriptKind.TSX;
+    return scriptKind === tsModule.ScriptKind.TS || scriptKind === tsModule.ScriptKind.TSX;
   }
 
-  return {
-    createLanguageServiceSourceFile(
-      fileName: string,
-      scriptSnapshot: ts.IScriptSnapshot,
-      scriptTarget: ts.ScriptTarget,
-      version: string,
-      setNodeParents: boolean,
-      scriptKind?: ts.ScriptKind
-    ): ts.SourceFile {
-      const sourceFile = clssf(fileName, scriptSnapshot, scriptTarget, version, setNodeParents, scriptKind);
-      scriptKindTracker.set(sourceFile, scriptKind);
-      if (isVue(fileName) && !isTSLike(scriptKind)) {
-        modifyVueSource(tsModule, sourceFile);
-      }
-      return sourceFile;
-    },
-    updateLanguageServiceSourceFile(
-      sourceFile: ts.SourceFile,
-      scriptSnapshot: ts.IScriptSnapshot,
-      version: string,
-      textChangeRange: ts.TextChangeRange,
-      aggressiveChecks?: boolean
-    ): ts.SourceFile {
-      const scriptKind = scriptKindTracker.get(sourceFile);
-      sourceFile = ulssf(sourceFile, scriptSnapshot, version, textChangeRange, aggressiveChecks);
-      if (isVue(sourceFile.fileName) && !isTSLike(scriptKind)) {
-        modifyVueSource(tsModule, sourceFile);
-      }
-      return sourceFile;
+  function modifySourceFile(
+    fileName: string,
+    sourceFile: ts.SourceFile,
+    scriptSnapshot: ts.IScriptSnapshot,
+    version: string,
+    scriptKind?: ts.ScriptKind
+  ): void {
+    if (modificationTracker.has(sourceFile)) {
+      return;
     }
+
+    if (isVue(fileName) && !isTSLike(scriptKind)) {
+      modifyVueScript(tsModule, sourceFile);
+      modificationTracker.add(sourceFile);
+      return;
+    }
+
+    if (isVirtualVueTemplateFile(fileName)) {
+      // TODO: share the logic of transforming the code into AST
+      // with the template mode
+      const code = parseVueTemplate(scriptSnapshot.getText(0, scriptSnapshot.getLength()));
+      const program = parse(code, { sourceType: 'module' });
+      const tsCode = getTemplateTransformFunctions(tsModule).transformTemplate(program, code);
+      injectVueTemplate(tsModule, sourceFile, tsCode);
+      modificationTracker.add(sourceFile);
+    }
+  }
+
+  function createLanguageServiceSourceFile(
+    fileName: string,
+    scriptSnapshot: ts.IScriptSnapshot,
+    scriptTarget: ts.ScriptTarget,
+    version: string,
+    setNodeParents: boolean,
+    scriptKind?: ts.ScriptKind
+  ): ts.SourceFile {
+    const sourceFile = clssf(fileName, scriptSnapshot, scriptTarget, version, setNodeParents, scriptKind);
+    scriptKindTracker.set(sourceFile, scriptKind);
+    modifySourceFile(fileName, sourceFile, scriptSnapshot, version, scriptKind);
+    return sourceFile;
+  }
+
+  function updateLanguageServiceSourceFile(
+    sourceFile: ts.SourceFile,
+    scriptSnapshot: ts.IScriptSnapshot,
+    version: string,
+    textChangeRange: ts.TextChangeRange,
+    aggressiveChecks?: boolean
+  ): ts.SourceFile {
+    const scriptKind = scriptKindTracker.get(sourceFile);
+    sourceFile = ulssf(sourceFile, scriptSnapshot, version, textChangeRange, aggressiveChecks);
+    modifySourceFile(sourceFile.fileName, sourceFile, scriptSnapshot, version, scriptKind);
+    return sourceFile;
+  }
+
+  return {
+    createLanguageServiceSourceFile,
+    updateLanguageServiceSourceFile
   };
 }
 
-function modifyVueSource(tsModule: T_TypeScript, sourceFile: ts.SourceFile): void {
+function modifyVueScript(tsModule: T_TypeScript, sourceFile: ts.SourceFile): void {
   const exportDefaultObject = sourceFile.statements.find(
     st =>
       st.kind === tsModule.SyntaxKind.ExportAssignment &&
@@ -94,6 +148,91 @@ function modifyVueSource(tsModule: T_TypeScript, sourceFile: ts.SourceFile): voi
   }
 }
 
+/**
+ * Wrap render function with component options in the script block
+ * to validate its types
+ */
+function injectVueTemplate(tsModule: T_TypeScript, sourceFile: ts.SourceFile, renderBlock: ts.Expression[]): void {
+  // add import statement for corresponding Vue file
+  // so that we acquire the component type from it.
+  const setZeroPos = getWrapperRangeSetter(tsModule, { pos: 0, end: 0 });
+  const vueFilePath = './' + path.basename(sourceFile.fileName.slice(0, -9));
+  const componentImport = setZeroPos(
+    tsModule.createImportDeclaration(
+      undefined,
+      undefined,
+      setZeroPos(tsModule.createImportClause(setZeroPos(tsModule.createIdentifier('__Component')), undefined)),
+      setZeroPos(tsModule.createLiteral(vueFilePath))
+    )
+  );
+
+  // import helper type to handle Vue's private methods
+  const helperImport = setZeroPos(
+    tsModule.createImportDeclaration(
+      undefined,
+      undefined,
+      setZeroPos(
+        tsModule.createImportClause(
+          undefined,
+          setZeroPos(
+            tsModule.createNamedImports([
+              setZeroPos(
+                tsModule.createImportSpecifier(undefined, setZeroPos(tsModule.createIdentifier(renderHelperName)))
+              ),
+              setZeroPos(
+                tsModule.createImportSpecifier(undefined, setZeroPos(tsModule.createIdentifier(componentHelperName)))
+              ),
+              setZeroPos(
+                tsModule.createImportSpecifier(undefined, setZeroPos(tsModule.createIdentifier(iterationHelperName)))
+              ),
+              setZeroPos(
+                tsModule.createImportSpecifier(undefined, setZeroPos(tsModule.createIdentifier(listenerHelperName)))
+              )
+            ])
+          )
+        )
+      ),
+      setZeroPos(tsModule.createLiteral('vue-editor-bridge'))
+    )
+  );
+
+  // wrap render code with a function decralation
+  // with `this` type of component.
+  const setRenderPos = getWrapperRangeSetter(tsModule, sourceFile);
+  const statements = renderBlock.map(exp => tsModule.createStatement(exp));
+  const renderElement = setRenderPos(
+    tsModule.createStatement(
+      setRenderPos(
+        tsModule.createCall(setRenderPos(tsModule.createIdentifier(renderHelperName)), undefined, [
+          // Reference to the component
+          setRenderPos(tsModule.createIdentifier('__Component')),
+
+          // A function simulating the render function
+          setRenderPos(
+            tsModule.createFunctionExpression(
+              undefined,
+              undefined,
+              undefined,
+              undefined,
+              [],
+              undefined,
+              setRenderPos(tsModule.createBlock(statements))
+            )
+          )
+        ])
+      )
+    )
+  );
+
+  // replace the original statements with wrapped code.
+  sourceFile.statements = setRenderPos(tsModule.createNodeArray([componentImport, helperImport, renderElement]));
+
+  // Update external module indicator to the transformed template node,
+  // otherwise symbols in this template (e.g. __Component) will be put
+  // into global namespace and it causes duplicated identifier error.
+  (sourceFile as any).externalModuleIndicator = componentImport;
+}
+
 /** Create a function that calls setTextRange on synthetic wrapper nodes that need a valid range */
 function getWrapperRangeSetter(
   tsModule: T_TypeScript,
diff --git a/server/src/modes/script/serviceHost.ts b/server/src/modes/script/serviceHost.ts
index d37c64b38c..d8248692a1 100644
--- a/server/src/modes/script/serviceHost.ts
+++ b/server/src/modes/script/serviceHost.ts
@@ -5,7 +5,7 @@ import { TextDocument } from 'vscode-languageserver-types';
 import * as parseGitIgnore from 'parse-gitignore';
 
 import { LanguageModelCache } from '../../embeddedSupport/languageModelCache';
-import { createUpdater, parseVue, isVue } from './preprocess';
+import { createUpdater, parseVueScript, isVue } from './preprocess';
 import { getFileFsPath, getFilePath } from '../../utils/paths';
 import * as bridge from './bridge';
 import { T_TypeScript } from '../../services/dependencyService';
@@ -22,27 +22,35 @@ function getVueSys(tsModule: T_TypeScript) {
   const vueSys: ts.System = {
     ...tsModule.sys,
     fileExists(path: string) {
-      if (isVueProject(path)) {
-        return tsModule.sys.fileExists(path.slice(0, -3));
+      if (isVirtualVueFile(path)) {
+        return tsModule.sys.fileExists(path.slice(0, -'.ts'.length));
+      }
+      if (isVirtualVueTemplateFile(path)) {
+        return tsModule.sys.fileExists(path.slice(0, -'.template'.length));
       }
       return tsModule.sys.fileExists(path);
     },
     readFile(path, encoding) {
-      if (isVueProject(path)) {
-        const fileText = tsModule.sys.readFile(path.slice(0, -3), encoding);
-        return fileText ? parseVue(fileText) : fileText;
-      } else {
-        const fileText = tsModule.sys.readFile(path, encoding);
-        return fileText;
+      if (isVirtualVueFile(path)) {
+        const fileText = tsModule.sys.readFile(path.slice(0, -'.ts'.length), encoding);
+        return fileText ? parseVueScript(fileText) : fileText;
+      }
+      if (isVirtualVueTemplateFile(path)) {
+        return tsModule.sys.readFile(path.slice(0, -'.template'.length), encoding);
       }
+      const fileText = tsModule.sys.readFile(path, encoding);
+      return fileText;
     }
   };
 
   if (tsModule.sys.realpath) {
     const realpath = tsModule.sys.realpath;
     vueSys.realpath = function(path) {
-      if (isVueProject(path)) {
-        return realpath(path.slice(0, -3)) + '.ts';
+      if (isVirtualVueFile(path)) {
+        return realpath(path.slice(0, -'.ts'.length)) + '.ts';
+      }
+      if (isVirtualVueTemplateFile(path)) {
+        return realpath(path.slice(0, -'.template'.length)) + '.ts';
       }
       return realpath(path);
     };
@@ -92,23 +100,27 @@ export function getServiceHost(
     const filePath = getFilePath(doc.uri);
     // When file is not in language service, add it
     if (!scriptDocs.has(fileFsPath)) {
-      if (fileFsPath.endsWith('.vue')) {
+      if (fileFsPath.endsWith('.vue') || fileFsPath.endsWith('.vue.template')) {
         files.push(filePath);
       }
     }
-    if (!currentScriptDoc || doc.uri !== currentScriptDoc.uri || doc.version !== currentScriptDoc.version) {
+    if (isVirtualVueTemplateFile(fileFsPath)) {
+      scriptDocs.set(fileFsPath, doc);
+      versions.set(fileFsPath, (versions.get(fileFsPath) || 0) + 1);
+    } else if (!currentScriptDoc || doc.uri !== currentScriptDoc.uri || doc.version !== currentScriptDoc.version) {
       currentScriptDoc = jsDocuments.get(doc);
       const lastDoc = scriptDocs.get(fileFsPath);
       if (lastDoc && currentScriptDoc.languageId !== lastDoc.languageId) {
         // if languageId changed, restart the language service; it can't handle file type changes
         jsLanguageService.dispose();
-        jsLanguageService = tsModule.createLanguageService(host);
+        jsLanguageService = tsModule.createLanguageService(jsHost);
       }
       scriptDocs.set(fileFsPath, currentScriptDoc);
       versions.set(fileFsPath, (versions.get(fileFsPath) || 0) + 1);
     }
     return {
       service: jsLanguageService,
+      templateService: templateLanguageService,
       scriptDoc: currentScriptDoc
     };
   }
@@ -123,105 +135,124 @@ export function getServiceHost(
     return scriptDocs.get(fsPath);
   }
 
-  const host: ts.LanguageServiceHost = {
-    getCompilationSettings: () => compilerOptions,
-    getScriptFileNames: () => files,
-    getScriptVersion(fileName) {
-      if (fileName === bridge.fileName) {
-        return '0';
-      }
-      const normalizedFileFsPath = getNormalizedFileFsPath(fileName);
-      const version = versions.get(normalizedFileFsPath);
-      return version ? version.toString() : '0';
-    },
-    getScriptKind(fileName) {
-      if (isVue(fileName)) {
-        const uri = Uri.file(fileName);
-        fileName = uri.fsPath;
-        const doc =
-          scriptDocs.get(fileName) ||
-          jsDocuments.get(TextDocument.create(uri.toString(), 'vue', 0, tsModule.sys.readFile(fileName) || ''));
-        return getScriptKind(tsModule, doc.languageId);
-      } else {
+  function createLanguageServiceHost(options: ts.CompilerOptions): ts.LanguageServiceHost {
+    return {
+      getCompilationSettings: () => options,
+      getScriptFileNames: () => files,
+      getScriptVersion(fileName) {
         if (fileName === bridge.fileName) {
-          return tsModule.Extension.Ts;
+          return '0';
         }
-        // NOTE: Typescript 2.3 should export getScriptKindFromFileName. Then this cast should be removed.
-        return (tsModule as any).getScriptKindFromFileName(fileName);
-      }
-    },
+        const normalizedFileFsPath = getNormalizedFileFsPath(fileName);
+        const version = versions.get(normalizedFileFsPath);
+        return version ? version.toString() : '0';
+      },
+      getScriptKind(fileName) {
+        if (isVue(fileName)) {
+          const uri = Uri.file(fileName);
+          fileName = uri.fsPath;
+          const doc =
+            scriptDocs.get(fileName) ||
+            jsDocuments.get(TextDocument.create(uri.toString(), 'vue', 0, tsModule.sys.readFile(fileName) || ''));
+          return getScriptKind(tsModule, doc.languageId);
+        } else if (isVirtualVueTemplateFile(fileName)) {
+          return tsModule.Extension.Js;
+        } else {
+          if (fileName === bridge.fileName) {
+            return tsModule.Extension.Ts;
+          }
+          // NOTE: Typescript 2.3 should export getScriptKindFromFileName. Then this cast should be removed.
+          return (tsModule as any).getScriptKindFromFileName(fileName);
+        }
+      },
 
-    // resolve @types, see https://github.com/Microsoft/TypeScript/issues/16772
-    getDirectories: vueSys.getDirectories,
-    directoryExists: vueSys.directoryExists,
-    fileExists: vueSys.fileExists,
-    readFile: vueSys.readFile,
-    readDirectory: vueSys.readDirectory,
+      // resolve @types, see https://github.com/Microsoft/TypeScript/issues/16772
+      getDirectories: vueSys.getDirectories,
+      directoryExists: vueSys.directoryExists,
+      fileExists: vueSys.fileExists,
+      readFile: vueSys.readFile,
+      readDirectory: vueSys.readDirectory,
 
-    resolveModuleNames(moduleNames: string[], containingFile: string): ts.ResolvedModule[] {
-      // in the normal case, delegate to ts.resolveModuleName
-      // in the relative-imported.vue case, manually build a resolved filename
-      return moduleNames.map(name => {
-        if (name === bridge.moduleName) {
+      resolveModuleNames(moduleNames: string[], containingFile: string): ts.ResolvedModule[] {
+        // in the normal case, delegate to ts.resolveModuleName
+        // in the relative-imported.vue case, manually build a resolved filename
+        return moduleNames.map(name => {
+          if (name === bridge.moduleName) {
+            return {
+              resolvedFileName: bridge.fileName,
+              extension: tsModule.Extension.Ts
+            };
+          }
+          if (path.isAbsolute(name) || !isVue(name)) {
+            return tsModule.resolveModuleName(name, containingFile, options, tsModule.sys).resolvedModule;
+          }
+          const resolved = tsModule.resolveModuleName(name, containingFile, options, vueSys).resolvedModule;
+          if (!resolved) {
+            return undefined as any;
+          }
+          if (!resolved.resolvedFileName.endsWith('.vue.ts')) {
+            return resolved;
+          }
+          const resolvedFileName = resolved.resolvedFileName.slice(0, -'.ts'.length);
+          const uri = Uri.file(resolvedFileName);
+          const doc =
+            scriptDocs.get(resolvedFileName) ||
+            jsDocuments.get(
+              TextDocument.create(uri.toString(), 'vue', 0, tsModule.sys.readFile(resolvedFileName) || '')
+            );
+          const extension =
+            doc.languageId === 'typescript'
+              ? tsModule.Extension.Ts
+              : doc.languageId === 'tsx'
+              ? tsModule.Extension.Tsx
+              : tsModule.Extension.Js;
+          return { resolvedFileName, extension };
+        });
+      },
+      getScriptSnapshot: (fileName: string) => {
+        if (fileName === bridge.fileName) {
+          const text = isOldVersion ? bridge.oldContent : bridge.content;
           return {
-            resolvedFileName: bridge.fileName,
-            extension: tsModule.Extension.Ts
+            getText: (start, end) => text.substring(start, end),
+            getLength: () => text.length,
+            getChangeRange: () => void 0
           };
         }
-        if (path.isAbsolute(name) || !isVue(name)) {
-          return tsModule.resolveModuleName(name, containingFile, compilerOptions, tsModule.sys).resolvedModule;
-        }
-        const resolved = tsModule.resolveModuleName(name, containingFile, compilerOptions, vueSys).resolvedModule;
-        if (!resolved) {
-          return undefined as any;
+        const normalizedFileFsPath = getNormalizedFileFsPath(fileName);
+        const doc = scriptDocs.get(normalizedFileFsPath);
+        let fileText = doc ? doc.getText() : tsModule.sys.readFile(normalizedFileFsPath) || '';
+        if (!doc && isVue(fileName)) {
+          // Note: This is required in addition to the parsing in embeddedSupport because
+          // this works for .vue files that aren't even loaded by VS Code yet.
+          fileText = parseVueScript(fileText);
         }
-        if (!resolved.resolvedFileName.endsWith('.vue.ts')) {
-          return resolved;
-        }
-        const resolvedFileName = resolved.resolvedFileName.slice(0, -3);
-        const uri = Uri.file(resolvedFileName);
-        const doc =
-          scriptDocs.get(resolvedFileName) ||
-          jsDocuments.get(TextDocument.create(uri.toString(), 'vue', 0, tsModule.sys.readFile(resolvedFileName) || ''));
-        const extension =
-          doc.languageId === 'typescript'
-            ? tsModule.Extension.Ts
-            : doc.languageId === 'tsx'
-            ? tsModule.Extension.Tsx
-            : tsModule.Extension.Js;
-        return { resolvedFileName, extension };
-      });
-    },
-    getScriptSnapshot: (fileName: string) => {
-      if (fileName === bridge.fileName) {
-        const text = isOldVersion ? bridge.oldContent : bridge.content;
         return {
-          getText: (start, end) => text.substring(start, end),
-          getLength: () => text.length,
+          getText: (start, end) => fileText.substring(start, end),
+          getLength: () => fileText.length,
           getChangeRange: () => void 0
         };
-      }
-      const normalizedFileFsPath = getNormalizedFileFsPath(fileName);
-      const doc = scriptDocs.get(normalizedFileFsPath);
-      let fileText = doc ? doc.getText() : tsModule.sys.readFile(normalizedFileFsPath) || '';
-      if (!doc && isVue(fileName)) {
-        // Note: This is required in addition to the parsing in embeddedSupport because
-        // this works for .vue files that aren't even loaded by VS Code yet.
-        fileText = parseVue(fileText);
-      }
-      return {
-        getText: (start, end) => fileText.substring(start, end),
-        getLength: () => fileText.length,
-        getChangeRange: () => void 0
-      };
-    },
-    getCurrentDirectory: () => workspacePath,
-    getDefaultLibFileName: tsModule.getDefaultLibFilePath,
-    getNewLine: () => '\n',
-    useCaseSensitiveFileNames: () => true
-  };
+      },
+      getCurrentDirectory: () => workspacePath,
+      getDefaultLibFileName: tsModule.getDefaultLibFilePath,
+      getNewLine: () => '\n',
+      useCaseSensitiveFileNames: () => true
+    };
+  }
+
+  const jsHost = createLanguageServiceHost(compilerOptions);
+  const templateHost = createLanguageServiceHost({
+    ...compilerOptions,
+    noImplicitAny: false,
+    noUnusedLocals: false,
+    noUnusedParameters: false,
+    allowJs: true,
+    checkJs: true
+  });
+
+  const registry = tsModule.createDocumentRegistry(true);
+  let jsLanguageService = tsModule.createLanguageService(jsHost, registry);
+  const templateLanguageService = tsModule.createLanguageService(templateHost, registry);
 
-  let jsLanguageService = tsModule.createLanguageService(host);
   return {
     updateCurrentTextDocument,
     updateExternalDocument,
@@ -236,9 +267,20 @@ function getNormalizedFileFsPath(fileName: string): string {
   return Uri.file(fileName).fsPath;
 }
 
-function isVueProject(path: string) {
+/**
+ * If the path ends with `.vue.ts`, it's a `.vue` file pre-processed by Vetur
+ * to be used in TS Language Service
+ */
+function isVirtualVueFile(path: string) {
   return path.endsWith('.vue.ts') && !path.includes('node_modules');
 }
+/**
+ * If the path ends with `.vue.template`, it's a `.vue` file's template part
+ * pre-processed by Vetur to calculate template diagnostics in TS Language Service
+ */
+export function isVirtualVueTemplateFile(path: string) {
+  return path.endsWith('.vue.template');
+}
 
 function defaultIgnorePatterns(tsModule: T_TypeScript, workspacePath: string) {
   const nodeModules = ['node_modules', '**/node_modules/*'];
diff --git a/server/src/modes/script/test/transformTemplate.test.ts b/server/src/modes/script/test/transformTemplate.test.ts
new file mode 100644
index 0000000000..89e1475e2c
--- /dev/null
+++ b/server/src/modes/script/test/transformTemplate.test.ts
@@ -0,0 +1,119 @@
+import * as assert from 'assert';
+import * as ts from 'typescript';
+import { getTemplateTransformFunctions } from '../transformTemplate';
+
+suite('transformTemplate', () => {
+  suite('`this` injection', () => {
+    function check(inputTsCode: string, expectedTsCode: string, scope: string[] = []): void {
+      const source = ts.createSourceFile('test.ts', inputTsCode, ts.ScriptTarget.Latest);
+      const st = source.statements[0] as ts.ExpressionStatement;
+      assert.equal(st.kind, ts.SyntaxKind.ExpressionStatement, 'Input ts code must be an expression');
+
+      const exp = st.expression;
+      const output = getTemplateTransformFunctions(require('typescript')).injectThis(exp, scope);
+
+      const printer = ts.createPrinter();
+      const outputStr = printer.printNode(ts.EmitHint.Expression, output, source);
+      assert.equal(outputStr.trim(), expectedTsCode.trim());
+    }
+
+    test('Identifier', () => {
+      check('foo', 'this.foo');
+    });
+
+    test('Identifier: in scope', () => {
+      check('foo', 'foo', ['foo']);
+    });
+
+    test('ThisExpression', () => {
+      check('this.foo', 'this.foo');
+    });
+
+    test('TypeOfExpression', () => {
+      check('typeof foo === "string"', 'typeof this.foo === "string"');
+    });
+
+    test('DeleteExpression', () => {
+      check('delete foo.bar', 'delete this.foo.bar');
+    });
+
+    test('VoidExpression', () => {
+      check('void foo()', 'void this.foo()');
+    });
+
+    test('PropertyAccessExpression', () => {
+      check('foo.bar', 'this.foo.bar');
+    });
+
+    test('ElementAccessExpression', () => {
+      check('test[foo][bar]', 'this.test[this.foo][this.bar]');
+    });
+
+    test('PrefixUnaryExpression', () => {
+      check('!foo', '!this.foo');
+    });
+
+    test('PostfixUnaryExpression', () => {
+      check('foo++', 'this.foo++');
+    });
+
+    test('BinaryExpression', () => {
+      check('foo + bar', 'this.foo + this.bar');
+    });
+
+    test('ConditionalExpression', () => {
+      check('foo ? bar : baz', 'this.foo ? this.bar : this.baz');
+    });
+
+    test('CallExpression', () => {
+      check('foo(bar)', 'this.foo(this.bar)');
+    });
+
+    test('ParenthesizedExpression', () => {
+      check('(foo)', '(this.foo)');
+    });
+
+    test('ObjectLiteralExpression', () => {
+      check('({ foo: bar })', '({ foo: this.bar })');
+    });
+
+    test('ObjectLiteralExpression: computed', () => {
+      check('({ [foo]: 123 })', '({ [this.foo]: 123 })');
+    });
+
+    test('ObjectLiteralExpression: shorthand', () => {
+      check('({ foo })', '({ foo: this.foo })');
+    });
+
+    test('ObjectLiteralExpression: spread', () => {
+      check('({ ...foo })', '({ ...this.foo })');
+    });
+
+    test('ArrayLiteralExpression', () => {
+      check('[foo, bar]', '[this.foo, this.bar]');
+    });
+
+    test('ArrayLiteralExpression: spread', () => {
+      check('[...foo]', '[...this.foo]');
+    });
+
+    test('ArrowFunction', () => {
+      check('(event) => foo(event)', '(event) => this.foo(event)');
+    });
+
+    test('ArrowFunction: rest spread', () => {
+      check('(...args) => test(args)', '(...args) => this.test(args)');
+    });
+
+    test('ArrowFunction: patterns', () => {
+      check(
+        '({ foo: bar, baz }, [qux, ...tail]) => tail.concat(foo(bar + baz) + qux)',
+        '({ foo: bar, baz }, [qux, ...tail]) => tail.concat(this.foo(bar + baz) + qux)'
+      );
+    });
+
+    test('TemplateExpression', () => {
+      check('`font-size: ${size}px`', '`font-size: ${this.size}px`');
+    });
+  });
+});
diff --git a/server/src/modes/script/transformTemplate.ts b/server/src/modes/script/transformTemplate.ts
new file mode 100644
index 0000000000..c30efef530
--- /dev/null
+++ b/server/src/modes/script/transformTemplate.ts
@@ -0,0 +1,547 @@
+import * as ts from 'typescript';
+import { AST } from 'vue-eslint-parser';
+import { T_TypeScript } from '../../services/dependencyService';
+
+export const renderHelperName = '__vlsRenderHelper';
+export const componentHelperName = '__vlsComponentHelper';
+export const iterationHelperName = '__vlsIterationHelper';
+export const listenerHelperName = '__vlsListenerHelper';
+
+/**
+ * Allowed global variables in templates.
+ * Borrowed from: https://github.com/vuejs/vue/blob/dev/src/core/instance/proxy.js
+ */
+const globalScope = (
+  'Infinity,undefined,NaN,isFinite,isNaN,' +
+  'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
+  'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
+  'require'
+).split(',');
+
+const vOnScope = ['$event', 'arguments'];
+
+export function getTemplateTransformFunctions(ts: T_TypeScript) {
+  return {
+    transformTemplate,
+    injectThis
+  };
+
+  /**
+   * Transform template AST to TypeScript AST.
+   * Note: The returned TS AST is not compatible with
+   * the regular Vue render function and does not work on runtime
+   * because we just need type information for the template.
+   * Each TypeScript node should be set a range because
+   * the compiler may clash or do incorrect type inference
+   * when it has an invalid range.
+   */
+  function transformTemplate(program: AST.ESLintProgram, code: string): ts.Expression[] {
+    const template = program.templateBody;
+
+    if (!template) {
+      return [];
+    }
+
+    return template.children.map(c => transformChild(c, code, globalScope));
+  }
+
+  /**
+   * Transform an HTML to TypeScript AST.
+   * It will be a call expression like Vue's $createElement.
+   * e.g.
+   * __vlsComponentHelper('div', { props: { title: this.foo } }, [ ...children... ]);
+   */
+  function transformElement(node: AST.VElement, code: string, scope: string[]): ts.Expression {
+    const newScope = scope.concat(node.variables.map(v => v.id.name));
+    const element = setTextRange(
+      ts.createCall(ts.setTextRange(ts.createIdentifier(componentHelperName), { pos: 0, end: 0 }), undefined, [
+        // Element / Component name
+        ts.createLiteral(node.name),
+
+        // Attributes / Directives
+        transformAttributes(node.startTag.attributes, code, newScope),
+
+        // Children
+        ts.createArrayLiteral(node.children.map(c => transformChild(c, code, newScope)))
+      ]),
+      node
+    );
+
+    const vFor = node.startTag.attributes.find(isVFor);
+    if (!vFor || !vFor.value || !vFor.value.expression) {
+      return element;
+    } else {
+      // Convert v-for directive to the iteration helper
+      const exp = vFor.value.expression as AST.VForExpression;
+
+      return setTextRange(
+        ts.createCall(setTextRange(ts.createIdentifier(iterationHelperName), exp.right), undefined, [
+          // Iteration target
+          parseExpression(exp.right, code, scope),
+
+          // Callback
+          setTextRange(
+            ts.createArrowFunction(
+              undefined,
+              undefined,
+              parseParams(exp.left, code, scope),
+              undefined,
+              setTextRange(ts.createToken(ts.SyntaxKind.EqualsGreaterThanToken), exp),
+              element
+            ),
+            exp
+          )
+        ]),
+        exp
+      );
+    }
+  }
+
+  interface AttributeData {
+    props: ts.ObjectLiteralElementLike[];
+    on: ts.ObjectLiteralElementLike[];
+    directives: ts.Expression[];
+  }
+
+  function transformAttributes(
+    attrs: (AST.VAttribute | AST.VDirective)[],
+    code: string,
+    scope: string[]
+  ): ts.Expression {
+    const data: AttributeData = {
+      props: [],
+      on: [],
+      directives: []
+    };
+
+    attrs.forEach(attr => {
+      // Normal attributes
+      // e.g. title="title"
+      if (isVAttribute(attr)) {
+        const name = attr.key.name;
+
+        // Skip style and class because there may be v-bind for the same attribute which
+        // occurs duplicate property name error.
+        // Since native attribute value is not JS expression, we don't have to check it.
+        if (name !== 'class' && name !== 'style') {
+          data.props.push(transformNativeAttribute(attr));
+        }
+        return;
+      }
+
+      // v-bind directives
+      // e.g. :class="{ selected: foo }"
+      if (isVBind(attr)) {
+        data.props.push(transformVBind(attr, code, scope));
+        return;
+      }
+
+      // v-on directives
+      // e.g. @click="onClick"
+      if (isVOn(attr)) {
+        data.on.push(transformVOn(attr, code, scope));
+        return;
+      }
+
+      // Skip v-for directive (handled in `transformElement`)
+      if (isVFor(attr)) {
+        return;
+      }
+
+      // Skip v-slot and slot-scope for now
+      if (isVSlot(attr)) {
+        return;
+      }
+
+      // Other directives
+      const exp = transformDirective(attr, code, scope);
+      if (exp) {
+        data.directives.push(...exp);
+      }
+    });
+
+    // Fold all AST into VNodeData-like object
+    // example output:
+    // {
+    //   props: { class: 'title' },
+    //   on: { click: __vlsListenerHelper(this, function($event) { this.onClick($event) } }
+    // }
+    return ts.createObjectLiteral([
+      ts.createPropertyAssignment('props', ts.createObjectLiteral(data.props)),
+      ts.createPropertyAssignment('on', ts.createObjectLiteral(data.on)),
+      ts.createPropertyAssignment('directives', ts.createArrayLiteral(data.directives))
+    ]);
+  }
+
+  function transformNativeAttribute(attr: AST.VAttribute): ts.ObjectLiteralElementLike {
+    return setTextRange(
+      ts.createPropertyAssignment(
+        setTextRange(ts.createIdentifier(attr.key.name), attr.key),
+        attr.value ? setTextRange(ts.createLiteral(attr.value.value), attr.value) : ts.createLiteral(true)
+      ),
+      attr
+    );
+  }
+
+  function transformVBind(vBind: AST.VDirective, code: string, scope: string[]): ts.ObjectLiteralElementLike {
+    const exp =
+      vBind.value && vBind.value.expression
+        ? parseExpression(vBind.value.expression as AST.ESLintExpression, code, scope)
+        : ts.createLiteral(true);
+
+    return directiveToObjectElement(vBind, exp, code, scope);
+  }
+
+  function transformVOn(vOn: AST.VDirective, code: string, scope: string[]): ts.ObjectLiteralElementLike {
+    let exp: ts.Expression;
+    if (vOn.value && vOn.value.expression) {
+      const vOnExp = vOn.value.expression as AST.VOnExpression;
+      const newScope = scope.concat(vOnScope);
+
+      // body may be undefined
+      const statements = vOnExp.body ? vOnExp.body.map(st => transformStatement(st, code, newScope)) : [];
+
+      const first = statements[0];
+      if (statements.length === 1 && isPathToIdentifier(first)) {
+        // The v-on expression is simple path to a method
+        // e.g. @click="onClick"
+        exp = first.expression;
+      } else {
+        // The v-on has some complex expressions or statements.
+        // Then wrap them with a function so that they can use `$event` and `arguments`.
+        // e.g.
+        //   @click="onClick($event, 'test')"
+        //   @click="value = "foo""
+        exp = setTextRange(
+          ts.createCall(setTextRange(ts.createIdentifier(listenerHelperName), vOn), undefined, [
+            setTextRange(ts.createThis(), vOn),
+            setTextRange(
+              ts.createFunctionExpression(
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                [
+                  setTextRange(
+                    ts.createParameter(
+                      undefined,
+                      undefined,
+                      undefined,
+                      '$event',
+                      undefined,
+                      setTextRange(ts.createTypeReferenceNode('Event', undefined), vOn)
+                    ),
+                    vOn
+                  )
+                ],
+                undefined,
+                setTextRange(ts.createBlock(statements), vOn)
+              ),
+              vOn
+            )
+          ]),
+          vOn
+        );
+      }
+    } else {
+      // There are no statement in v-on value
+      exp = ts.createLiteral(true);
+    }
+
+    return directiveToObjectElement(vOn, exp, code, scope);
+  }
+
+  /**
+   * To transform v-bind and v-on directive
+   */
+  function directiveToObjectElement(
+    dir: AST.VDirective,
+    dirExp: ts.Expression,
+    code: string,
+    scope: string[]
+  ): ts.ObjectLiteralElementLike {
+    const name = dir.key.argument;
+
+    if (name) {
+      if (name.type === 'VIdentifier') {
+        // Attribute name is specified
+        // e.g. v-bind:value="foo"
+        return setTextRange(
+          ts.createPropertyAssignment(setTextRange(ts.createIdentifier(name.name), dir.key), dirExp),
+          dir
+        );
+      } else {
+        // Attribute name is dynamic
+        // e.g. v-bind:[value]="foo"
+
+        // Empty expression is invalid. Return empty object spread.
+        if (name.expression === null) {
+          return setTextRange(ts.createSpreadAssignment(setTextRange(ts.createObjectLiteral(), dir)), dir);
+        }
+
+        const propertyName = setTextRange(
+          ts.createComputedPropertyName(parseExpression(name.expression as AST.ESLintExpression, code, scope)),
+          dir.key
+        );
+        return setTextRange(ts.createPropertyAssignment(propertyName, dirExp), dir);
+      }
+    } else {
+      // Attribute name is omitted
+      // e.g. v-bind="{ value: foo }"
+      return setTextRange(ts.createSpreadAssignment(dirExp), dir);
+    }
+  }
+
+  /**
+   * Return directive expression. May include dynamic argument expression.
+   */
+  function transformDirective(dir: AST.VDirective, code: string, scope: string[]): ts.Expression[] {
+    const res: ts.Expression[] = [];
+
+    if (dir.key.argument && dir.key.argument.type === 'VExpressionContainer' && dir.key.argument.expression) {
+      res.push(parseExpression(dir.key.argument.expression as AST.ESLintExpression, code, scope));
+    }
+
+    if (dir.value && dir.value.expression) {
+      res.push(parseExpression(dir.value.expression as AST.ESLintExpression, code, scope));
+    }
+
+    return res;
+  }
+
+  function transformChild(
+    child: AST.VElement | AST.VExpressionContainer | AST.VText,
+    code: string,
+    scope: string[]
+  ): ts.Expression {
+    switch (child.type) {
+      case 'VElement':
+        return transformElement(child, code, scope);
+      case 'VExpressionContainer':
+        // Never appear v-for / v-on expression here
+        const exp = child.expression as AST.ESLintExpression | null;
+        return exp ? parseExpression(exp, code, scope) : ts.createLiteral('');
+      case 'VText':
+        return ts.createLiteral(child.value);
+    }
+  }
+
+  function transformStatement(statement: AST.ESLintStatement, code: string, scope: string[]): ts.Statement {
+    if (statement.type !== 'ExpressionStatement') {
+      console.error('Unexpected statement type:', statement.type);
+      return ts.createStatement(ts.createLiteral(''));
+    }
+
+    return setTextRange(ts.createStatement(parseExpression(statement.expression, code, scope)), statement);
+  }
+
+  function parseExpression(expression: AST.ESLintExpression, code: string, scope: string[]): ts.Expression {
+    const [start, end] = expression.range;
+    const expStr = code.slice(start, end);
+    return parseExpressionImpl(expStr, start, scope);
+  }
+
+  function parseParams(
+    params: AST.ESLintPattern[],
+    code: string,
+    scope: string[]
+  ): ts.NodeArray<ts.ParameterDeclaration> {
+    const start = params[0].range[0];
+    const end = params[params.length - 1].range[1];
+    const paramsStr = code.slice(start, end);
+    // Wrap parameters with an arrow function to extract them as ts parameter declarations.
+    const arrowFnStr = '(' + paramsStr + ') => {}';
+
+    // Decrement the offset since the expression now has the open parenthesis.
+    const exp = parseExpressionImpl(arrowFnStr, start - 1, scope) as ts.ArrowFunction;
+    return exp.parameters;
+  }
+
+  function parseExpressionImpl(exp: string, offset: number, scope: string[]): ts.Expression {
+    // Add parenthesis to deal with object literal expression
+    const wrappedExp = '(' + exp + ')';
+    const source = ts.createSourceFile('/tmp/parsed.ts', wrappedExp, ts.ScriptTarget.Latest);
+    const statement = source.statements[0];
+
+    if (!statement || !ts.isExpressionStatement(statement)) {
+      console.error('Unexpected statement kind:', statement.kind);
+      return ts.createLiteral('');
+    }
+
+    ts.forEachChild(statement, function next(node) {
+      // Decrement offset for added parenthesis
+      ts.setTextRange(node, {
+        pos: offset - 1 + node.pos,
+        end: offset - 1 + node.end
+      });
+      ts.forEachChild(node, next);
+    });
+
+    const parenthesis = statement.expression as ts.ParenthesizedExpression;
+    return injectThis(parenthesis.expression, scope);
+  }
+
+  function injectThis(exp: ts.Expression, scope: string[]): ts.Expression {
+    let res;
+    if (ts.isIdentifier(exp)) {
+      if (scope.indexOf(exp.text) < 0) {
+        res = ts.createPropertyAccess(ts.setTextRange(ts.createThis(), exp), exp);
+      } else {
+        return exp;
+      }
+    } else if (ts.isPropertyAccessExpression(exp)) {
+      res = ts.createPropertyAccess(injectThis(exp.expression, scope), exp.name);
+    } else if (ts.isElementAccessExpression(exp)) {
+      res = ts.createElementAccess(
+        injectThis(exp.expression, scope),
+        // argumentExpression cannot be undefined in the latest TypeScript
+        injectThis(exp.argumentExpression!, scope)
+      );
+    } else if (ts.isPrefixUnaryExpression(exp)) {
+      res = ts.createPrefix(exp.operator, injectThis(exp.operand, scope));
+    } else if (ts.isPostfixUnaryExpression(exp)) {
+      res = ts.createPostfix(injectThis(exp.operand, scope), exp.operator);
+    } else if (exp.kind === ts.SyntaxKind.TypeOfExpression) {
+      // Manually check `kind` for typeof expression
+      // since ts.isTypeOfExpression is not working.
+      res = ts.createTypeOf(injectThis((exp as ts.TypeOfExpression).expression, scope));
+    } else if (ts.isDeleteExpression(exp)) {
+      res = ts.createDelete(injectThis(exp.expression, scope));
+    } else if (ts.isVoidExpression(exp)) {
+      res = ts.createVoid(injectThis(exp.expression, scope));
+    } else if (ts.isBinaryExpression(exp)) {
+      res = ts.createBinary(injectThis(exp.left, scope), exp.operatorToken, injectThis(exp.right, scope));
+    } else if (ts.isConditionalExpression(exp)) {
+      res = ts.createConditional(
+        injectThis(exp.condition, scope),
+        injectThis(exp.whenTrue, scope),
+        injectThis(exp.whenFalse, scope)
+      );
+    } else if (ts.isCallExpression(exp)) {
+      res = ts.createCall(
+        injectThis(exp.expression, scope),
+        exp.typeArguments,
+        exp.arguments.map(arg => injectThis(arg, scope))
+      );
+    } else if (ts.isParenthesizedExpression(exp)) {
+      res = ts.createParen(injectThis(exp.expression, scope));
+    } else if (ts.isObjectLiteralExpression(exp)) {
+      res = ts.createObjectLiteral(exp.properties.map(p => injectThisForObjectLiteralElement(p, scope)));
+    } else if (ts.isArrayLiteralExpression(exp)) {
+      res = ts.createArrayLiteral(exp.elements.map(e => injectThis(e, scope)));
+    } else if (ts.isSpreadElement(exp)) {
+      res = ts.createSpread(injectThis(exp.expression, scope));
+    } else if (ts.isArrowFunction(exp) && !ts.isBlock(exp.body)) {
+      res = ts.createArrowFunction(
+        exp.modifiers,
+        exp.typeParameters,
+        exp.parameters,
+        exp.type,
+        exp.equalsGreaterThanToken,
+        injectThis(exp.body, scope.concat(flatMap(exp.parameters, collectScope)))
+      );
+    } else if (ts.isTemplateExpression(exp)) {
+      const injectedSpans = exp.templateSpans.map(span => {
+        return ts.setTextRange(ts.createTemplateSpan(injectThis(span.expression, scope), span.literal), span);
+      });
+
+      res = ts.createTemplateExpression(exp.head, injectedSpans);
+    } else {
+      return exp;
+    }
+    return ts.setTextRange(res, exp);
+  }
+
+  function injectThisForObjectLiteralElement(
+    el: ts.ObjectLiteralElementLike,
+    scope: string[]
+  ): ts.ObjectLiteralElementLike {
+    let res;
+    if (ts.isPropertyAssignment(el)) {
+      const name = !ts.isComputedPropertyName(el.name)
+        ? el.name
+        : ts.createComputedPropertyName(injectThis(el.name.expression, scope));
+
+      res = ts.createPropertyAssignment(ts.setTextRange(name, el.name), injectThis(el.initializer, scope));
+    } else if (ts.isShorthandPropertyAssignment(el)) {
+      res = ts.createPropertyAssignment(el.name, injectThis(el.name, scope));
+    } else if (ts.isSpreadAssignment(el)) {
+      res = ts.createSpreadAssignment(injectThis(el.expression, scope));
+    } else {
+      return el;
+    }
+    return ts.setTextRange(res, el);
+  }
+
+  /**
+   * Collect newly added variable names from function parameters.
+   * e.g.
+   * If the function parameters look like following:
+   *   (foo, { bar, baz: qux }) => { ... }
+   * The output should be:
+   *   ['foo', 'bar', 'qux']
+   */
+  function collectScope(param: ts.ParameterDeclaration | ts.BindingElement): string[] {
+    const binding = param.name;
+    if (ts.isIdentifier(binding)) {
+      return [binding.text];
+    } else if (ts.isObjectBindingPattern(binding)) {
+      return flatMap(binding.elements, collectScope);
+    } else if (ts.isArrayBindingPattern(binding)) {
+      const filtered = binding.elements.filter(ts.isBindingElement);
+      return flatMap(filtered, collectScope);
+    } else {
+      return [];
+    }
+  }
+
+  /**
+   * Return `true` if the statement is a simple path to the identifier.
+   * Examples of `simple path`:
+   *   foo
+   *   this.foo.bar
+   *   list[1]
+   *   record['key']
+   */
+  function isPathToIdentifier(statement: ts.Statement): statement is ts.ExpressionStatement {
+    if (ts.isExpressionStatement(statement)) {
+      const exp = statement.expression;
+      return ts.isIdentifier(exp) || ts.isPropertyAccessExpression(exp);
+    } else {
+      return false;
+    }
+  }
+
+  function isVAttribute(node: AST.VAttribute | AST.VDirective): node is AST.VAttribute {
+    return !node.directive;
+  }
+
+  function isVBind(node: AST.VAttribute | AST.VDirective): node is AST.VDirective {
+    return node.directive && node.key.name.name === 'bind';
+  }
+
+  function isVOn(node: AST.VAttribute | AST.VDirective): node is AST.VDirective {
+    return node.directive && node.key.name.name === 'on';
+  }
+
+  function isVFor(node: AST.VAttribute | AST.VDirective): node is AST.VDirective {
+    return node.directive && node.key.name.name === 'for';
+  }
+
+  function isVSlot(node: AST.VAttribute | AST.VDirective): node is AST.VDirective {
+    return node.directive && (node.key.name.name === 'slot' || node.key.name.name === 'slot-scope');
+  }
+
+  function flatMap<T extends ts.Node, R>(list: ReadonlyArray<T>, fn: (value: T) => R[]): R[] {
+    return list.reduce<R[]>((acc, item) => {
+      return acc.concat(fn(item));
+    }, []);
+  }
+
+  function setTextRange<T extends ts.TextRange>(range: T, location: AST.HasLocation): T {
+    return ts.setTextRange(range, {
+      pos: location.range[0],
+      end: location.range[1]
+    });
+  }
+}
diff --git a/server/src/modes/template/index.ts b/server/src/modes/template/index.ts
index edd485e1e4..549dbecd15 100644
--- a/server/src/modes/template/index.ts
+++ b/server/src/modes/template/index.ts
@@ -12,7 +12,7 @@ import { findDocumentLinks } from './services/htmlLinks';
 import { findDocumentSymbols } from './services/htmlSymbolsProvider';
 import { htmlFormat } from './services/htmlFormat';
 import { parseHTMLDocument } from './parser/htmlParser';
-import { doValidation, createLintEngine } from './services/htmlValidation';
+import { doESLintValidation, createLintEngine } from './services/htmlValidation';
 import { findDefinition } from './services/htmlDefinition';
 import { getTagProviderSettings, IHTMLTagProvider } from './tagProviders';
 import { getEnabledTagProviders } from './tagProviders';
@@ -48,7 +48,7 @@ export function getVueHTMLMode(
     },
     doValidation(document) {
       const embedded = embeddedDocuments.get(document);
-      return doValidation(embedded, lintEngine);
+      return doESLintValidation(embedded, lintEngine);
     },
     doComplete(document: TextDocument, position: Position) {
       const embedded = embeddedDocuments.get(document);
diff --git a/server/src/modes/template/services/htmlDefinition.ts b/server/src/modes/template/services/htmlDefinition.ts
index d2e4b631d1..9b30be1431 100644
--- a/server/src/modes/template/services/htmlDefinition.ts
+++ b/server/src/modes/template/services/htmlDefinition.ts
@@ -19,7 +19,7 @@ export function findDefinition(
   }
 
   function getTagDefinition(tag: string, range: Range, open: boolean): Definition {
-    tag = tag.toLowerCase(); 
+    tag = tag.toLowerCase();
 
     if (vueFileInfo && vueFileInfo.componentInfo.childComponents) {
       for (const cc of vueFileInfo.componentInfo.childComponents) {
diff --git a/server/src/modes/template/services/htmlValidation.ts b/server/src/modes/template/services/htmlValidation.ts
index 2c2398c97e..e6110bc9ad 100644
--- a/server/src/modes/template/services/htmlValidation.ts
+++ b/server/src/modes/template/services/htmlValidation.ts
@@ -15,7 +15,7 @@ function toDiagnostic(error: Linter.LintMessage): Diagnostic {
   };
 }
 
-export function doValidation(document: TextDocument, engine: CLIEngine): Diagnostic[] {
+export function doESLintValidation(document: TextDocument, engine: CLIEngine): Diagnostic[] {
   const rawText = document.getText();
   // skip checking on empty template
   if (rawText.replace(/\s/g, '') === '') {
diff --git a/server/src/modes/template/services/vueInterpolationCompletion.ts b/server/src/modes/template/services/vueInterpolationCompletion.ts
index d6bb0a6b4b..b1dbe5b7dd 100644
--- a/server/src/modes/template/services/vueInterpolationCompletion.ts
+++ b/server/src/modes/template/services/vueInterpolationCompletion.ts
@@ -24,7 +24,6 @@ export function shouldDoInterpolationComplete(text: string, relativeOffset: numb
 }
 
 export function doVueInterpolationComplete(vueFileInfo: VueFileInfo): CompletionList {
-
   const result: CompletionList = {
     isIncomplete: false,
     items: []
diff --git a/server/src/modes/template/tagProviders/htmlTags.ts b/server/src/modes/template/tagProviders/htmlTags.ts
index b8676454a5..89cc70e659 100644
--- a/server/src/modes/template/tagProviders/htmlTags.ts
+++ b/server/src/modes/template/tagProviders/htmlTags.ts
@@ -874,7 +874,8 @@ export function getHTML5TagProvider(): IHTMLTagProvider {
 
   return {
     getId: () => 'html5',
-    collectTags: (collector: (tag: string, label: string | MarkupContent) => void) => collectTagsDefault(collector, HTML_TAGS),
+    collectTags: (collector: (tag: string, label: string | MarkupContent) => void) =>
+      collectTagsDefault(collector, HTML_TAGS),
     collectAttributes: (tag: string, collector: AttributeCollector) => {
       collectAttributesDefault(tag, collector, HTML_TAGS, globalAttributes);
       eventHandlers.forEach(handler => {
diff --git a/server/src/modes/template/test/hover.test.ts b/server/src/modes/template/test/hover.test.ts
index 7eee498aab..5d6c3d9284 100644
--- a/server/src/modes/template/test/hover.test.ts
+++ b/server/src/modes/template/test/hover.test.ts
@@ -19,15 +19,15 @@ const html = hoverDSL({
 });
 
 suite('HTML Hover', () => {
-  test('Attribute', function () {
-    html`<div a|ria-atomic="true"></div>`.hasNothing();
-    html`<component inli|ne-template></component>`.hasHoverAt(
-      'treat inner content as its template rather than distributed content',
-      11
-    );
-    html`<div :v|-if="true"></div>`.hasHoverAt(
-      'Conditionally renders the element based on the truthy\\-ness of the expression value\\.',
-      5
-    );
+  test('Attribute', function() {
+    // prettier-ignore
+    html`<div a|ria-atomic="true"></div>`
+      .hasNothing();
+    // prettier-ignore
+    html`<component inli|ne-template></component>`
+      .hasHoverAt('treat inner content as its template rather than distributed content', 11);
+    // prettier-ignore
+    html`<div :v|-if="true"></div>`
+      .hasHoverAt('Conditionally renders the element based on the truthy\\-ness of the expression value\\.', 5);
   });
 });
diff --git a/server/src/types.ts b/server/src/types.ts
index a63558728e..01e16bc359 100644
--- a/server/src/types.ts
+++ b/server/src/types.ts
@@ -6,8 +6,8 @@ export interface RefactorAction {
   fileName: string;
   formatOptions: any;
   textRange: {
-      pos: number;
-      end: number;
+    pos: number;
+    end: number;
   };
   refactorName: string;
   actionName: string;
diff --git a/server/test/mocha.opts b/server/test/mocha.opts
index 838e90334f..07c26137bc 100644
--- a/server/test/mocha.opts
+++ b/server/test/mocha.opts
@@ -6,4 +6,4 @@
 ./dist/modes/template/test
 ./dist/modes/style/stylus/test
 ./dist/modes/test/
-./dist/modes/script/
+./dist/modes/script/test
diff --git a/server/yarn.lock b/server/yarn.lock
index 8cf7bee06b..07875cec4c 100644
--- a/server/yarn.lock
+++ b/server/yarn.lock
@@ -213,7 +213,20 @@
   resolved "https://registry.yarnpkg.com/@starptech/webparser/-/webparser-0.8.10.tgz#2bb6f362e93d8731beb4676c2f46d6100406f46f"
   integrity sha512-6dGJKF/ZFJSuSL200CTZIvCRqgIwkq3Ye0h83XksbuELC1G/eg520Es8ZxfE+N/oe5JYmOM3iLEt1yXKTYFpFQ==
 
-"@types/eslint@^4.16.5":
+"@types/eslint-scope@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.0.tgz#4792816e31119ebd506902a482caec4951fabd86"
+  integrity sha512-O/ql2+rrCUe2W2rs7wMR+GqPRcgB6UiqN5RhrR5xruFlY7l9YLMn0ZkDzjoHLeiFkR8MCQZVudUuuvQ2BLC9Qw==
+  dependencies:
+    "@types/eslint" "*"
+    "@types/estree" "*"
+
+"@types/eslint-visitor-keys@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
+  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
+
+"@types/eslint@*", "@types/eslint@^4.16.5":
   version "4.16.6"
   resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-4.16.6.tgz#96d4ecddbea618ab0b55eaf0dffedf387129b06c"
   integrity sha512-GL7tGJig55FeclpOytU7nCCqtR143jBoC7AUdH0DO9xBSIFiNNUFCY/S3KNWsHeQJuU3hjw/OC1+kRTFNXqUZQ==
@@ -1351,7 +1364,7 @@ espree@^4.1.0:
     acorn-jsx "^5.0.0"
     eslint-visitor-keys "^1.0.0"
 
-espree@^5.0.1:
+espree@^5.0.0, espree@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"
   integrity sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==
@@ -4629,6 +4642,18 @@ vue-eslint-parser@^5.0.0:
     esquery "^1.0.1"
     lodash "^4.17.11"
 
+vue-eslint-parser@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-6.0.3.tgz#e8b4748a8c63c72889341a8a2e48c33e58d1c9d3"
+  integrity sha512-f2jZQojTLyZmuDLhCybJ8qIicfZfC6PmO7dEubZ0U/0tQ4dweRFuB0RpbbaHeMUfVFSYiKexbiemkze/h3/6SA==
+  dependencies:
+    debug "^4.1.1"
+    eslint-scope "^4.0.0"
+    eslint-visitor-keys "^1.0.0"
+    espree "^5.0.0"
+    esquery "^1.0.1"
+    lodash "^4.17.11"
+
 vue-onsenui-helper-json@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/vue-onsenui-helper-json/-/vue-onsenui-helper-json-1.0.2.tgz#b8c900fe3f89ba6a318335de73a55dee99a1846e"
diff --git a/test/lsp/definition/basic.test.ts b/test/lsp/definition/basic.test.ts
index 9431d12b62..5cf2bed3f0 100644
--- a/test/lsp/definition/basic.test.ts
+++ b/test/lsp/definition/basic.test.ts
@@ -23,7 +23,7 @@ describe('Should find definition', () => {
 
   it('finds definition for Vue#data', async () => {
     const vueOptionsDtsUri = getDocUri('node_modules/vue/types/options.d.ts');
-    await testDefinition(docUri, position(20, 2), sameLineLocation(vueOptionsDtsUri, 58, 2, 6));
+    await testDefinition(docUri, position(20, 2), sameLineLocation(vueOptionsDtsUri, 73, 2, 6));
   });
 
   it('finds definition for imported Vue files', async () => {
diff --git a/test/lsp/diagnostics/helper.ts b/test/lsp/diagnostics/helper.ts
index 3d3d9e7db6..f7c6912402 100644
--- a/test/lsp/diagnostics/helper.ts
+++ b/test/lsp/diagnostics/helper.ts
@@ -19,20 +19,19 @@ export async function testDiagnostics(docUri: vscode.Uri, expectedDiagnostics: v
     );
   });
 
-  function isEqualDiagnostic(d1: vscode.Diagnostic, d2: vscode.Diagnostic) {
-    const sourcesAreEqual = d1.source ? d1.source === d2.source : true;
+  function isEqualDiagnostic(ed: vscode.Diagnostic, ad: vscode.Diagnostic) {
+    const sourcesAreEqual = ed.source ? ed.source === ad.source : true;
 
     // Disable until https://github.com/Microsoft/vscode/issues/71556 is resolved
     // const tagsAreEqual = d1.tags ? _.isEqual(d1.tags, d2.tags) : true;
     const tagsAreEqual = true;
 
+    // Only check beginning equality as TS's long messages are ever-changing
+    const messaagesAreEqual =
+      ed.message.length === ad.message.length ? ed.message === ad.message : ad.message.startsWith(ed.message);
+
     return (
-      d1.severity === d2.severity &&
-      // Only check beginning equality as TS's long messages are ever-changing
-      d1.message.slice(0, 40) === d2.message.slice(0, 40) &&
-      d1.range.isEqual(d2.range) &&
-      tagsAreEqual &&
-      sourcesAreEqual
+      ed.severity === ad.severity && messaagesAreEqual && ed.range.isEqual(ad.range) && tagsAreEqual && sourcesAreEqual
     );
   }
 }
diff --git a/test/lsp/fixture/client/templateDiagnostics/class.vue b/test/lsp/fixture/client/templateDiagnostics/class.vue
new file mode 100644
index 0000000000..4e7db34992
--- /dev/null
+++ b/test/lsp/fixture/client/templateDiagnostics/class.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="test" :class="{ foo: true }">Test</div>
+</template>
diff --git a/test/lsp/fixture/client/templateDiagnostics/directive-dynamic-argument.vue b/test/lsp/fixture/client/templateDiagnostics/directive-dynamic-argument.vue
new file mode 100644
index 0000000000..889eeb3345
--- /dev/null
+++ b/test/lsp/fixture/client/templateDiagnostics/directive-dynamic-argument.vue
@@ -0,0 +1,25 @@
+<template>
+  <div
+    :[propName]="value"
+    :[notExist]="value"
+    @[notExist]="listener"
+    v-test:[notExist]
+  ></div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return {
+      propName: 'title',
+      value: 'Test'
+    }
+  },
+
+  methods: {
+    listener(): void {}
+  }
+})
+</script>
diff --git a/test/lsp/fixture/client/templateDiagnostics/directive.vue b/test/lsp/fixture/client/templateDiagnostics/directive.vue
new file mode 100644
index 0000000000..4d2a5ff872
--- /dev/null
+++ b/test/lsp/fixture/client/templateDiagnostics/directive.vue
@@ -0,0 +1,16 @@
+<template>
+  <div v-show="foo || bar">v-show test</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return {
+      foo: false
+    }
+  }
+})
+</script>
+
diff --git a/test/lsp/fixture/client/templateDiagnostics/expression.vue b/test/lsp/fixture/client/templateDiagnostics/expression.vue
new file mode 100644
index 0000000000..537e069c56
--- /dev/null
+++ b/test/lsp/fixture/client/templateDiagnostics/expression.vue
@@ -0,0 +1,15 @@
+<template>
+  <p>{{ messaage }}</p>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  data() {
+    return {
+      message: 'Hello'
+    };
+  }
+});
+</script>
diff --git a/test/lsp/fixture/client/templateDiagnostics/object-literal.vue b/test/lsp/fixture/client/templateDiagnostics/object-literal.vue
new file mode 100644
index 0000000000..a7740ab65e
--- /dev/null
+++ b/test/lsp/fixture/client/templateDiagnostics/object-literal.vue
@@ -0,0 +1,18 @@
+<template>
+  <p :class="{
+    foo: foo,
+    bar: bar
+  }">Hello</p>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return {
+      foo: true
+    }
+  }
+})
+</script>
diff --git a/test/lsp/fixture/client/templateDiagnostics/style.vue b/test/lsp/fixture/client/templateDiagnostics/style.vue
new file mode 100644
index 0000000000..763418abaa
--- /dev/null
+++ b/test/lsp/fixture/client/templateDiagnostics/style.vue
@@ -0,0 +1,3 @@
+<template>
+  <div style="font-size: 12px;" :style="{ fontWeight: 'bold' }">Test</div>
+</template>
diff --git a/test/lsp/fixture/client/templateDiagnostics/v-for.vue b/test/lsp/fixture/client/templateDiagnostics/v-for.vue
new file mode 100644
index 0000000000..753a239203
--- /dev/null
+++ b/test/lsp/fixture/client/templateDiagnostics/v-for.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <p v-for="(item, i) in list" :key="i">{{ item + i }}</p>
+    <p v-for="(value, key, i) in obj" :key="key">
+      <span>{{ value + key + i }}</span>
+      <span>{{ notExists }}</span>
+    </p>
+    <p v-for="i in 10" :key="i">
+      {{ i }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  data() {
+    return {
+      list: ['foo', 'bar'],
+      obj: {
+        foo: 'foo',
+        bar: 'bar'
+      }
+    };
+  }
+});
+</script>
diff --git a/test/lsp/fixture/client/templateDiagnostics/v-on.vue b/test/lsp/fixture/client/templateDiagnostics/v-on.vue
new file mode 100644
index 0000000000..f6acdf7cdc
--- /dev/null
+++ b/test/lsp/fixture/client/templateDiagnostics/v-on.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <!-- Providing no errors -->
+    <button @click="eventTest($event)">Event Test</button>
+    <button @click="argumentsTest(arguments)">Arguments Test</button>
+    <button @click="eventTest">Reference Test</button>
+    <button @click="test = 123">Expression Test</button>
+
+    <!-- Providing errors -->
+    <button @click="passString(123)">Invalid Argument Type</button>
+    <button @click="test = 'test'">Invalid Update Type</button>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return {
+      test: 0
+    }
+  },
+
+  methods: {
+    eventTest(event: Event): void {},
+    argumentsTest(args: IArguments): void {},
+    passString(str: string): void {}
+  }
+})
+</script>
diff --git a/test/lsp/fixture/package.json b/test/lsp/fixture/package.json
index 0c960e4b46..822e1f5f69 100644
--- a/test/lsp/fixture/package.json
+++ b/test/lsp/fixture/package.json
@@ -41,7 +41,7 @@
     "element-ui": "^2.4.5",
     "lodash": "^4.17.4",
     "quasar-framework": "^0.17.12",
-    "vue": "^2.5.3",
+    "vue": "^2.6.10",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },
diff --git a/test/lsp/fixture/yarn.lock b/test/lsp/fixture/yarn.lock
index 25d69ab39c..99af603229 100644
--- a/test/lsp/fixture/yarn.lock
+++ b/test/lsp/fixture/yarn.lock
@@ -1613,10 +1613,10 @@ vue-template-compiler@^2.5.3:
     de-indent "^1.0.2"
     he "^1.1.0"
 
-vue@^2.5.3:
-  version "2.5.9"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.9.tgz#b2380cd040915dca69881dafd121d760952e65f7"
-  integrity sha512-9B9XBpCtj8y5eJFrspIcKxIWt+lG9FMdF8qgyOlUeOIvcS4xSAvcARygbzHA6Pi0KWFj4BvxjtWbuPVWRx/wuA==
+vue@^2.6.10:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
+  integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
 
 vuex@^3.0.1:
   version "3.0.1"
diff --git a/test/lsp/references/basic.test.ts b/test/lsp/references/basic.test.ts
index 88de2a0768..c61f00167b 100644
--- a/test/lsp/references/basic.test.ts
+++ b/test/lsp/references/basic.test.ts
@@ -10,6 +10,8 @@ describe('Should find references', () => {
     await activateLS();
     await showFile(docUri);
     await sleep(FILE_LOAD_SLEEP_TIME);
+    // Wait a bit more for references to load
+    await sleep(FILE_LOAD_SLEEP_TIME);
   });
 
   it('finds references for this.msg', async () => {
@@ -31,7 +33,7 @@ describe('Should find references', () => {
   it('finds references for Vue#data', async () => {
     const vueOptionsDtsUri = getDocUri('node_modules/vue/types/options.d.ts');
     await testReferences(docUri, position(21, 2), [
-      sameLineLocation(vueOptionsDtsUri, 58, 2, 6),
+      sameLineLocation(vueOptionsDtsUri, 73, 2, 6),
       sameLineLocation(docUri, 21, 2, 6)
     ]);
   });
diff --git a/test/lsp/templateDiagnostics/basic.test.ts b/test/lsp/templateDiagnostics/basic.test.ts
new file mode 100644
index 0000000000..19f0bdedc9
--- /dev/null
+++ b/test/lsp/templateDiagnostics/basic.test.ts
@@ -0,0 +1,115 @@
+import * as vscode from 'vscode';
+import { activateLS, showFile, sleep, FILE_LOAD_SLEEP_TIME } from '../helper';
+import { getDocUri } from '../util';
+import { sameLineRange } from '../../lsp-ts-28/util';
+import { testDiagnostics } from '../diagnostics/helper';
+
+describe('template-diag Should find diagnostics in <template> region', () => {
+  const docUri = getDocUri('client/templateDiagnostics/expression.vue');
+
+  before('activate', async () => {
+    await activateLS();
+    await showFile(docUri);
+    await sleep(FILE_LOAD_SLEEP_TIME);
+  });
+
+  const tests: TemplateDiagnosticTest[] = [
+    {
+      file: 'expression.vue',
+      diagnostics: [
+        {
+          range: sameLineRange(1, 8, 16),
+          severity: vscode.DiagnosticSeverity.Error,
+          message: "Property 'messaage' does not exist on type"
+        }
+      ]
+    },
+    {
+      file: 'v-for.vue',
+      diagnostics: [
+        {
+          range: sameLineRange(5, 15, 24),
+          severity: vscode.DiagnosticSeverity.Error,
+          message: "Property 'notExists' does not exist on type"
+        }
+      ]
+    },
+    {
+      file: 'object-literal.vue',
+      diagnostics: [
+        {
+          range: sameLineRange(3, 9, 12),
+          severity: vscode.DiagnosticSeverity.Error,
+          message: "Property 'bar' does not exist on type"
+        }
+      ]
+    },
+    {
+      file: 'v-on.vue',
+      diagnostics: [
+        {
+          range: sameLineRange(9, 31, 34),
+          severity: vscode.DiagnosticSeverity.Error,
+          message: "Argument of type '123' is not assignable to parameter of type 'string'"
+        },
+        {
+          range: sameLineRange(10, 20, 24),
+          severity: vscode.DiagnosticSeverity.Error,
+          message: `Type '"test"' is not assignable to type 'number'`
+        }
+      ]
+    },
+    {
+      file: 'class.vue',
+      diagnostics: []
+    },
+    {
+      file: 'style.vue',
+      diagnostics: []
+    },
+    {
+      file: 'directive.vue',
+      diagnostics: [
+        {
+          range: sameLineRange(1, 22, 25),
+          severity: vscode.DiagnosticSeverity.Error,
+          message: "Property 'bar' does not exist on type"
+        }
+      ]
+    },
+    {
+      file: 'directive-dynamic-argument.vue',
+      diagnostics: [
+        {
+          range: sameLineRange(3, 6, 14),
+          severity: vscode.DiagnosticSeverity.Error,
+          message: "Property 'notExist' does not exist on type"
+        },
+        {
+          range: sameLineRange(4, 6, 14),
+          severity: vscode.DiagnosticSeverity.Error,
+          message: "Property 'notExist' does not exist on type"
+        },
+        {
+          range: sameLineRange(5, 12, 20),
+          severity: vscode.DiagnosticSeverity.Error,
+          message: "Property 'notExist' does not exist on type"
+        }
+      ]
+    }
+  ];
+
+  tests.forEach(t => {
+    it(`Shows template diagnostics for ${t.file}`, async () => {
+      const docUri = getDocUri(`client/templateDiagnostics/${t.file}`);
+      await showFile(docUri);
+      await sleep(FILE_LOAD_SLEEP_TIME);
+      await testDiagnostics(docUri, t.diagnostics);
+    });
+  });
+});
+
+interface TemplateDiagnosticTest {
+  file: string;
+  diagnostics: vscode.Diagnostic[];
+}