├── test ├── test.md ├── index.js ├── index.ts ├── lkdy.js ├── test.omi ├── test.js ├── extension.test.js └── test.html ├── .gitignore ├── .DS_Store ├── logos ├── 1.png ├── logo.png ├── .DS_Store └── logo2.png ├── .vscodeignore ├── .vscode ├── extensions.json └── launch.json ├── jsconfig.json ├── CHANGELOG.md ├── .eslintrc.json ├── extension.js ├── package.json ├── README.md ├── vsc-extension-quickstart.md └── libs └── index.js /test/test.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode-test/ 3 | *.vsix 4 | webpack -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vueno/master/.DS_Store -------------------------------------------------------------------------------- /logos/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vueno/master/logos/1.png -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | console.log(1); 2 | var bool = true; 3 | console.log(bool); -------------------------------------------------------------------------------- /logos/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vueno/master/logos/logo.png -------------------------------------------------------------------------------- /logos/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vueno/master/logos/.DS_Store -------------------------------------------------------------------------------- /logos/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vueno/master/logos/logo2.png -------------------------------------------------------------------------------- /test/index.ts: -------------------------------------------------------------------------------- 1 | console.log(1); 2 | let bool:boolean = true; 3 | console.log(bool); 4 | -------------------------------------------------------------------------------- /test/lkdy.js: -------------------------------------------------------------------------------- 1 | var str="123abZW863"; 2 | var reg=/ab(?=[A-Z])/; 3 | console.log(str.match(reg)); 4 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | test/** 4 | .gitignore 5 | vsc-extension-quickstart.md 6 | **/jsconfig.json 7 | **/*.map 8 | **/.eslintrc.json 9 | webpack 10 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the extensions.json format 4 | "recommendations": [ 5 | "dbaeumer.vscode-eslint" 6 | ] 7 | } -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es6", 5 | "checkJs": true, /* Typecheck .js files. */ 6 | "lib": [ 7 | "es6" 8 | ] 9 | }, 10 | "exclude": [ 11 | "node_modules" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to the "vueno" extension will be documented in this file. 4 | 5 | Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. 6 | 7 | ## [Unreleased] 8 | 9 | - Initial release -------------------------------------------------------------------------------- /test/test.omi: -------------------------------------------------------------------------------- 1 | 6 | 21 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var _class, _temp; 2 | 3 | import { WeElement, define, h } from "omi"; 4 | const mY = ((_temp = _class = class mY extends WeElement { 5 | render() { 6 | return h("div", null, "1234678910111213"); 7 | } 8 | 9 | install() { 10 | this.data = { 11 | title: "omi" 12 | }; 13 | } 14 | 15 | uninstall() { 16 | let a = "abc"; 17 | } 18 | }), 19 | (_class.css = `p{color:red} 20 | `), 21 | (_class.abc = "123"), 22 | _temp); 23 | define("m-y", mY); 24 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": false, 4 | "commonjs": true, 5 | "es6": true, 6 | "node": true 7 | }, 8 | "parserOptions": { 9 | "ecmaFeatures": { 10 | "jsx": true 11 | }, 12 | "sourceType": "module" 13 | }, 14 | "rules": { 15 | "no-const-assign": "warn", 16 | "no-this-before-super": "warn", 17 | "no-undef": "warn", 18 | "no-unreachable": "warn", 19 | "no-unused-vars": "warn", 20 | "constructor-super": "warn", 21 | "valid-typeof": "warn" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /test/extension.test.js: -------------------------------------------------------------------------------- 1 | /* global suite, test */ 2 | 3 | // 4 | // Note: This example test is leveraging the Mocha test framework. 5 | // Please refer to their documentation on https://mochajs.org/ for help. 6 | // 7 | 8 | // The module 'assert' provides assertion methods from node 9 | const assert = require('assert'); 10 | 11 | // You can import and use all API from the 'vscode' module 12 | // as well as import your extension to test it 13 | // const vscode = require('vscode'); 14 | // const myExtension = require('../extension'); 15 | 16 | // Defines a Mocha test suite to group tests of similar kind together 17 | suite("Extension Tests", function() { 18 | 19 | // Defines a Mocha unit test 20 | test("Something 1", function() { 21 | assert.equal(-1, [1, 2, 3].indexOf(5)); 22 | assert.equal(-1, [1, 2, 3].indexOf(0)); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "runtimeExecutable": "${execPath}", 13 | "args": [ 14 | "--extensionDevelopmentPath=${workspaceFolder}" 15 | ] 16 | }, 17 | { 18 | "name": "Extension Tests", 19 | "type": "extensionHost", 20 | "request": "launch", 21 | "runtimeExecutable": "${execPath}", 22 | "args": [ 23 | "--extensionDevelopmentPath=${workspaceFolder}", 24 | "--extensionTestsPath=${workspaceFolder}/test" 25 | ] 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Eno Yao 7 | 8 | 9 | 10 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /extension.js: -------------------------------------------------------------------------------- 1 | const vscode = require('vscode'); 2 | const { 3 | compileInlineStyle, 4 | createHtml, 5 | createVue, 6 | readFile, 7 | fileType, 8 | } = require('./libs'); 9 | 10 | function activate(context) { 11 | console.log('Congratulations, your extension "vueno" is now active!'); 12 | let disposable = vscode.commands.registerCommand('vueno.helloVueno', function (document) { 13 | vscode.window.showInformationMessage('Hello World!'); 14 | }); 15 | context.subscriptions.push(disposable); 16 | 17 | vscode.workspace.onDidSaveTextDocument(async (document) => { 18 | const { 19 | fileName 20 | } = document 21 | console.log(fileType(fileName)); 22 | const type = fileType(fileName); 23 | switch (type) { 24 | case '.html': 25 | const fileConfig = await readFile(fileName); 26 | const styleConfig = await compileInlineStyle({ 27 | ...fileConfig, 28 | path: fileName 29 | }); 30 | createHtml(styleConfig) 31 | createVue(styleConfig) 32 | console.log(fileConfig, styleConfig); 33 | break; 34 | } 35 | }); 36 | } 37 | 38 | exports.activate = activate; 39 | function deactivate() { } 40 | module.exports = { 41 | activate, 42 | deactivate 43 | } 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vueno", 3 | "displayName": "Vueno", 4 | "description": "HTML file transform Vue file", 5 | "version": "1.1.1", 6 | "author": "Eno Yao", 7 | "publisher": "Wscats", 8 | "icon": "logos/logo2.png", 9 | "engines": { 10 | "vscode": "^1.34.0" 11 | }, 12 | "keywords": [ 13 | "vue", 14 | "eno", 15 | "eno yao", 16 | "yao", 17 | "wscats", 18 | "yjl", 19 | "scss", 20 | "sass", 21 | "lemon", 22 | "laoyao", 23 | "one", 24 | "xie", 25 | "html" 26 | ], 27 | "categories": [ 28 | "Other" 29 | ], 30 | "repository": { 31 | "type": "git", 32 | "url": "https://github.com/Wscats/vueno" 33 | }, 34 | "activationEvents": [ 35 | "*", 36 | "onCommand:vueno.helloVueno" 37 | ], 38 | "main": "./extension.js", 39 | "contributes": { 40 | "commands": [ 41 | { 42 | "command": "vueno.helloVueno", 43 | "title": "Hello Vueno" 44 | } 45 | ] 46 | }, 47 | "scripts": { 48 | "postinstall": "node ./node_modules/vscode/bin/install", 49 | "test": "node ./node_modules/vscode/bin/test", 50 | "build": "vsce package" 51 | }, 52 | "devDependencies": { 53 | "vscode": "^1.1.28", 54 | "eslint": "^5.13.0", 55 | "@types/node": "^10.12.21", 56 | "@types/mocha": "^2.2.42" 57 | }, 58 | "dependencies": { 59 | "jquery": "^3.5.0", 60 | "jsdom": "^15.1.1", 61 | "prettier": "^1.18.2" 62 | } 63 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vueno 2 | 3 | `.html`文件处理为`.vue`文件 4 | 5 | # 贡献者 6 | 7 | | [
Eno Yao](https://github.com/Wscats)| [
Aaron Xie](https://github.com/aaron-xie)| [
DK Lan](https://github.com/dk-lan)|
Xin|
Lemon |
Jing |
Lin | 8 | | - | - | - | - | - | - | - | 9 | 10 | # 使用 11 | 在VSC中打开任何`.html`后缀文件，修改并保存，将自动转换为`.vue`的单文件组件 12 | 13 | 例如有文件`test.html`内容如下: 14 | ```html 15 | 16 | 17 | 18 | 19 | 20 | 21 | Document 22 | 27 | 28 | 29 | 32 |

Eno Yao

33 |

Hello World

34 | 37 | 38 | 39 | ``` 40 | 保存文件后，将在同目录下生成`test.html.vue`文件，内容如下 41 | ```html 42 | 48 | 51 | 56 | ``` 57 | 58 | 例如：我们要仿造美团外卖的网站，你可以打开 https://h5.waimai.meituan.com/login 美团的官网，点击鼠标右键显示网页源代码复制到 `VS Code` 的 `.html` 格式文件中，然后保存就可以生成 `.vue` 后缀的文件了。 59 | 60 | ![demo](logos/1.png) -------------------------------------------------------------------------------- /vsc-extension-quickstart.md: -------------------------------------------------------------------------------- 1 | # Welcome to your VS Code Extension 2 | 3 | ## What's in the folder 4 | 5 | * This folder contains all of the files necessary for your extension. 6 | * `package.json` - this is the manifest file in which you declare your extension and command. 7 | * The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin. 8 | * `extension.js` - this is the main file where you will provide the implementation of your command. 9 | * The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. 10 | * We pass the function containing the implementation of the command as the second parameter to `registerCommand`. 11 | 12 | ## Get up and running straight away 13 | 14 | * Press `F5` to open a new window with your extension loaded. 15 | * Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`. 16 | * Set breakpoints in your code inside `extension.js` to debug your extension. 17 | * Find output from your extension in the debug console. 18 | 19 | ## Make changes 20 | 21 | * You can relaunch the extension from the debug toolbar after changing code in `extension.js`. 22 | * You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. 23 | 24 | ## Explore the API 25 | 26 | * You can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts`. 27 | 28 | ## Run tests 29 | 30 | * Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Extension Tests`. 31 | * Press `F5` to run the tests in a new window with your extension loaded. 32 | * See the output of the test result in the debug console. 33 | * Make changes to `test/extension.test.js` or create new test files inside the `test` folder. 34 | * By convention, the test runner will only consider files matching the name pattern `**.test.js`. 35 | * You can create folders inside the `test` folder to structure your tests any way you want. 36 | 37 | ## Go further 38 | 39 | * [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VSCode extension marketplace. 40 | * Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration). 41 | -------------------------------------------------------------------------------- /libs/index.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const { JSDOM } = require('jsdom'); 3 | const jQuery = require("jquery") 4 | const prettier = require('prettier'); 5 | // 读取源代码html文件 6 | const readFile = (url) => { 7 | return new Promise((resolve, reject) => { 8 | fs.readFile(url, (err, data) => { 9 | if (err) { 10 | reject(err); 11 | } else { 12 | // console.log(data.toString()); 13 | const html = data.toString(); 14 | // 在node环境下生成一个dom 15 | const { window } = new JSDOM(html); 16 | // console.log(window); 17 | const $ = jQuery(window); 18 | resolve({ 19 | $ 20 | }); 21 | } 22 | }) 23 | }) 24 | } 25 | 26 | // 获取内联样式 27 | const compileInlineStyle = (config) => { 28 | return new Promise((resolve, reject) => { 29 | const { 30 | $, 31 | path 32 | } = config 33 | // $('style') 34 | // console.log($('style').eq(0).html()); 35 | let style = ''; 36 | $('style').each((index, item) => { 37 | style += $(item).html(); 38 | console.log($(item).html()); 39 | }); 40 | style = prettier.format(style, { parser: "css" }); 41 | $('style').remove(); 42 | $('script').remove(); 43 | // console.log($('body').html()); 44 | fs.writeFile(`${path}.css`, style, (err) => { 45 | if (err) { 46 | reject(err); 47 | } else { 48 | console.log('写入成功'); 49 | resolve({ 50 | ...config, 51 | style, 52 | template: prettier.format($('body').html(), { parser: "html" }) 53 | }); 54 | } 55 | }); 56 | 57 | }) 58 | } 59 | 60 | const createVue = (config) => { 61 | const { 62 | style, 63 | template, 64 | path 65 | } = config; 66 | console.log(config); 67 | const vue = prettier.format(` 68 | 73 | 78 | 81 | `, { parser: "vue" }); 82 | fs.writeFile(`${path}.vue`, vue, () => { 83 | console.log('write success'); 84 | }) 85 | } 86 | 87 | const createHtml = (config) => { 88 | const { 89 | style, 90 | template, 91 | path 92 | } = config; 93 | console.log(config); 94 | const html = prettier.format(` 95 | 96 | 97 | 98 | 99 | 100 | 101 | Document 102 | 103 | 104 | 105 |
106 | 107 | 113 | 114 | 115 | `, { parser: "html" }); 116 | fs.writeFile(`${path}.html`, html, () => { 117 | console.log('write success'); 118 | }) 119 | } 120 | 121 | // 获取后缀名 122 | const fileType = (filename) => { 123 | const index1 = filename.lastIndexOf("."); 124 | const index2 = filename.length; 125 | const type = filename.substring(index1, index2);//后缀名 126 | return type; 127 | } 128 | 129 | 130 | module.exports = { 131 | compileInlineStyle, 132 | createHtml, 133 | createVue, 134 | readFile, 135 | fileType, 136 | } 137 | 138 | --------------------------------------------------------------------------------