support vue

CHANGELOG.md

@@ -1,9 +1,11 @@
 # Change Log
 
-All notable changes to the "classnametocss" extension will be documented in this file.
-
-Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
-
-## [Unreleased]
-
-- Initial release
+## [0.0.2] - 2019-05-28 
+### Added
+- support vue  
+
+## [0.0.1] - 2019-05-21
+- support htm/html/jsx/tsx
+
+[0.0.2]: https://github.com/zytjs/classNameToCss/releases/tag/0.0.2
+[0.0.1]: https://github.com/zytjs/classNameToCss/releases/tag/0.0.1  

README.md

@@ -1,24 +1,28 @@
 # IntelliSense for HTML class names in CSS
 
-在css/less/sass文件提供同一目录下，htm/html/jsx/tsx文件中className的智能提示。
+在css/less/sass/stylus文件提供同一目录下，htm/html/jsx/tsx文件中className的智能提示。  
+在vue文件中，会提供本文件class的智能提示。
 
-A Visual Studio Code extension that provides HTML class name completion for the CSS  based on the definitions found in the same directory.
+A Visual Studio Code extension that provides HTML class name completion for the CSS  based on the definitions found in the same directory.  
+It will provide class name of **current** file if in `.vue` file.
 
 ![](https://raw.githubusercontent.com/zytjs/classNameToCss/master/classtocss.gif)  
 
 # Feature
 
 * 在css中提供className的自动补全提示
 
-* Gives you autocompletion in css for html class names in same directory
+* Gives you autocompletion in css for html class names in same directory or current file
 
 # Supported File Extension
 
 * HTML/HTM 
 * JSX/TSX
+* Vue
 * CSS
 * Less
 * Sass
+* Stylus
 
 # Usage
 

package.json

@@ -3,7 +3,7 @@
 	"displayName": "className To Css",
 	"description": "css/less/scss intelliSense from html/jsx/tsx className",
 	"publisher": "zitup",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"icon": "icon.jpg",
 	"engines": {
 		"vscode": "^1.33.0"
@@ -19,9 +19,14 @@
 		"autocomplete",
 		"class",
 		"css",
+		"less",
+		"sass",
+		"scss",
+		"stylus",
 		"html",
 		"jsx",
 		"tsx",
+		"vue",
 		"classtocss",
 		"class to css",
 		"classnametocss",
@@ -30,9 +35,36 @@
 	"activationEvents": [
 		"onLanguage:css",
 		"onLanguage:less",
-		"onLanguage:scss"
+		"onLanguage:scss",
+		"onLanguage:sass",
+		"onLanguage:stylus",
+		"onLanguage:vue"
 	],
 	"main": "./out/extension.js",
+	"contributes": {
+		"languages": [
+			{
+				"id": "vue",
+				"aliases": [
+					"Vue",
+					"vue"
+				],
+				"extensions": [
+					".vue"
+				]
+			},
+			{
+				"id": "stylus",
+				"aliases": [
+					"styl",
+					"stylus"
+				],
+				"extensions": [
+					".styl"
+				]
+			}
+		]
+	},
 	"scripts": {
 		"vscode:prepublish": "yarn run compile",
 		"compile": "tsc -p ./",

src/completion.ts

@@ -1,7 +1,7 @@
 import * as fs from "fs";
 import * as vscode from "vscode";
 
-const fileExtensionArray: string[] = ["htm", "html", "jsx", "tsx"];
+const extensionArray: string[] = ["htm", "html", "jsx", "tsx"];
 const htmMatchRegex: RegExp = /class="[\w-]+"/g;
 const sxMatchRegex: RegExp = /className="[\w-]+"/g;
 
@@ -17,46 +17,41 @@ function provideCompletionItems(
   _token: vscode.CancellationToken,
   _context: vscode.CompletionContext
 ) {
-  /**
-   * 获取当前目录目标文件——htm/html/tsx/jsx
-   */
+  // 获取当前文件路径
   const filePath: string = document.fileName;
-  const dir: string = filePath.slice(0, filePath.lastIndexOf("/"));
-  // ['1.file', '2.tsx', '3.html']
-  const files: string[] = fs.readdirSync(dir);
-  // 筛选目标文件
-  // ['tsx', 'html']
-  const target: string[] = files.filter((item: string) =>
-    fileExtensionArray.includes(item.split(".")[1])
-  );
-  // 读取目标文件，获取class
-  // ['className="a"', 'class="b"']
-  let classNames: string[] = [];
-  target.forEach((item: string) => {
-    const data: string = fs
-      .readFileSync(`${dir}/${item}`, "utf8")
-      .split("\n")
-      .join("");
 
-    // htm/html-->class
-    if (item.includes("htm")) {
-      const result = data.match(htmMatchRegex);
-      if (result) {
-        classNames = classNames.concat(result);
-      }
+  let classNames: string[] = [];
+  // 在vue文件触发
+  if (document.languageId === "vue") {
+    // 读取当前文件
+    const result = getClass(filePath);
+    if (result) {
+      classNames = result;
     }
-    // tsx/jsx-->className
-    if (item.includes("sx")) {
-      const result = data.match(sxMatchRegex);
+  }
+  // 在css类文件触发
+  else {
+    // 获取当前文件夹路径
+    const dir: string = filePath.slice(0, filePath.lastIndexOf("/"));
+    // 读取当前文件夹下的文件名
+    const files: string[] = fs.readdirSync(dir);
+    // 筛选目标文件
+    const target: string[] = files.filter((item: string) =>
+      extensionArray.includes(item.split(".")[1])
+    );
+    // 读取目标文件，获取class
+    target.forEach((item: string) => {
+      const filePath: string = `${dir}/${item}`;
+      const result = getClass(filePath);
       if (result) {
         classNames = classNames.concat(result);
       }
-    }
-  });
+    });
+  }
 
   return classNames.map((item: string) => {
-    // ['"a"']
     const className: string = item.split("=")[1];
+    // 去掉引号
     const field: string = className.slice(1, className.length - 1);
     return new vscode.CompletionItem(
       // 提示内容要带上触发字符，https://github.com/Microsoft/vscode/issues/71662
@@ -66,6 +61,24 @@ function provideCompletionItems(
   });
 }
 
+function getClass(path: string) {
+  const data: string = fs
+    .readFileSync(path, "utf8")
+    .split("\n")
+    .join("");
+
+  let result;
+  // htm/html/vue-->class
+  if (path.includes("htm") || path.includes("vue")) {
+    result = data.match(htmMatchRegex);
+  }
+  // tsx/jsx-->className
+  if (path.includes("sx")) {
+    result = data.match(sxMatchRegex);
+  }
+  return result;
+}
+
 /**
  * @param {*} item
  * @param {*} token
@@ -81,7 +94,10 @@ export default function(context: vscode.ExtensionContext) {
       [
         { scheme: "file", language: "css" },
         { scheme: "file", language: "less" },
-        { scheme: "file", language: "scss" }
+        { scheme: "file", language: "scss" },
+        { scheme: "file", language: "sass" },
+        { scheme: "file", language: "stylus" },
+        { scheme: "file", language: "vue" }
       ],
       {
         provideCompletionItems,