diff --git a/extensions/html/server/src/modes/pathCompletion.ts b/extensions/html/server/src/modes/pathCompletion.ts
index 29eaa36c0ea..05429801c40 100644
--- a/extensions/html/server/src/modes/pathCompletion.ts
+++ b/extensions/html/server/src/modes/pathCompletion.ts
@@ -4,20 +4,21 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import { TextDocument, Position, CompletionList, CompletionItemKind } from 'vscode-languageserver-types';
+import { TextDocument, Position, CompletionList, CompletionItemKind, TextEdit } from 'vscode-languageserver-types';
 import { WorkspaceFolder } from 'vscode-languageserver-protocol/lib/protocol.workspaceFolders.proposed';
 import * as path from 'path';
 import * as fs from 'fs';
 import uri from 'vscode-uri';
+import { ICompletionParticipant } from 'vscode-html-languageservice/lib/htmlLanguageService';
 
 export function getPathCompletionParticipant(
 	document: TextDocument,
 	position: Position,
 	result: CompletionList,
 	workspaceFolders: WorkspaceFolder[] | undefined
-) {
+): ICompletionParticipant {
 	return {
-		onHtmlAttributeValue: (tag, attributeName, attributeValue) => {
+		onHtmlAttributeValue: ({ tag, attribute, value, range }) => {
 			const pathTagAndAttribute: { [t: string]: string } = {
 				a: 'href',
 				script: 'src',
@@ -27,35 +28,37 @@ export function getPathCompletionParticipant(
 
 			const isDir = (p: string) => fs.statSync(p).isDirectory();
 
-			if (pathTagAndAttribute[tag] && pathTagAndAttribute[tag] === attributeName) {
-				const currPath = attributeValue.replace(/['"]/g, '');
+			if (pathTagAndAttribute[tag] && pathTagAndAttribute[tag] === attribute) {
+				const currPath = value.replace(/['"]/g, '');
 
-				let resolvedPath;
-				if (currPath.startsWith('/')) {
+				let resolvedDirPath;
+				if (currPath[0] === ('/')) {
 					if (!workspaceFolders || workspaceFolders.length === 0) {
 						return;
 					}
 					for (let i = 0; i < workspaceFolders.length; i++) {
 						if (document.uri.indexOf(workspaceFolders[i].uri) !== -1) {
-							resolvedPath = path.resolve(uri.parse(workspaceFolders[i].uri).fsPath);
+							resolvedDirPath = path.resolve(uri.parse(workspaceFolders[i].uri).fsPath);
 						}
 					}
 				} else {
-					resolvedPath = path.resolve(uri.parse(document.uri).fsPath, '..', currPath);
+					resolvedDirPath = path.resolve(uri.parse(document.uri).fsPath, '..', currPath);
 				}
 
-				if (resolvedPath && isDir(resolvedPath)) {
-					const filesAndFolders = fs.readdirSync(resolvedPath);
+				if (resolvedDirPath && isDir(resolvedDirPath)) {
+					const filesAndFolders = fs.readdirSync(resolvedDirPath);
 					if (!result.items) {
 						result.items = [];
 					}
 					for (let i = 0; i < filesAndFolders.length; i++) {
-						const kind = isDir(path.resolve(resolvedPath, filesAndFolders[i]))
+						const resolvedCompletionItemPath = path.resolve(resolvedDirPath, filesAndFolders[i]);
+						const kind = isDir(resolvedCompletionItemPath)
 							? CompletionItemKind.Folder
 							: CompletionItemKind.File;
 						result.items.push({
 							label: filesAndFolders[i],
-							kind
+							kind,
+							textEdit: TextEdit.replace(range, filesAndFolders[i])
 						});
 					}
 				}