├── .gitignore ├── source ├── icon.png ├── preview.gif └── indent-option.png ├── .vscode ├── settings.json ├── extensions.json └── launch.json ├── .vscodeignore ├── jsconfig.json ├── .eslintrc.json ├── CHANGELOG.md ├── test ├── extension.test.js └── index.js ├── README.md ├── src ├── beautifyHtml.js └── index.js ├── extension.js ├── vsc-extension-quickstart.md ├── package.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | /*.vsix -------------------------------------------------------------------------------- /source/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peakchen90/vue-beautify/HEAD/source/icon.png -------------------------------------------------------------------------------- /source/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peakchen90/vue-beautify/HEAD/source/preview.gif -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | } -------------------------------------------------------------------------------- /source/indent-option.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peakchen90/vue-beautify/HEAD/source/indent-option.png -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | test/** 4 | .gitignore 5 | jsconfig.json 6 | vsc-extension-quickstart.md 7 | .eslintrc.json 8 | -------------------------------------------------------------------------------- /.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 | "lib": [ 6 | "es6" 7 | ] 8 | }, 9 | "exclude": [ 10 | "node_modules" 11 | ] 12 | } -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [release] 2 | 3 | ### 2.0.3: 24 Mar 2017 4 | * Fix bug: If the shortcut key is the same as the vscode built-in shortcut key, in other non-vue files can not work. 5 | 6 | ### 2.0.1: 23 Mar 2017 7 | * Fix bug: If the template's lang attribute is pug or jade, will make it chaotic. 8 | 9 | ### 2.0.0: 17 Mar 2017 10 | * Notice: Now, please install [vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), it has smilar features. 11 | 12 | ### 1.0.5: 16 Mar 2017 13 | * Fix bug: If the style's lang attribute is stylus or sass, will make it chaotic. 14 | 15 | ### 1.0.2: 15 Mar 2017 16 | * Add: `Beautify Vue` menu on vue file. 17 | 18 | ### 1.0.0: 14 Mar 2017 19 | * Add: Format the vue file. -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | { 3 | "version": "0.1.0", 4 | "configurations": [ 5 | { 6 | "name": "Launch Extension", 7 | "type": "extensionHost", 8 | "request": "launch", 9 | "runtimeExecutable": "${execPath}", 10 | "args": ["--extensionDevelopmentPath=${workspaceRoot}" ], 11 | "stopOnEntry": false 12 | }, 13 | { 14 | "name": "Launch Tests", 15 | "type": "extensionHost", 16 | "request": "launch", 17 | "runtimeExecutable": "${execPath}", 18 | "args": ["--extensionDevelopmentPath=${workspaceRoot}", "--extensionTestsPath=${workspaceRoot}/test" ], 19 | "stopOnEntry": false 20 | } 21 | ] 22 | } -------------------------------------------------------------------------------- /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 | var 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 | var vscode = require('vscode'); 14 | var 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 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > ## Note: This project is no longer maintained. 注意：这个项目已经不在维护了 2 | 3 | # vue-beautify for vscode 4 | 5 | ## Features 6 | 7 | Beautify Vue code in Visual Studio Code. 8 | 9 | ![preview](source/preview.gif) 10 | 11 | ## Usage 12 | 13 | 1. Keyboard Shortcut: `ctrl+shift+f` ; 14 | 2. Open context menu in vue, choose `Beautify Vue` ; 15 | 3. Press `F1`, search `Beautify Vue`, and click the item. 16 | 17 | ## Indent Option 18 | 19 | The vue-beautify's indent option according to the textEditor's indent option, like this: 20 | 21 | ![indent option](source/indent-option.png) 22 | 23 | ## Keyboard Shortcut 24 | 25 | Use the following to embed a beautify shortcut in keybindings.json. Replace with your preferred key bindings. 26 | 27 | ```json 28 | { 29 | "key": "ctrl+shift+f", 30 | "command": "extension.vueBeautify", 31 | "when": "editorTextFocus && !editorReadonly" 32 | } 33 | ``` 34 | 35 | ## Github 36 | [https://github.com/peakchen90/vue-beautify](https://github.com/peakchen90/vue-beautify) 37 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | // 2 | // PLEASE DO NOT MODIFY / DELETE UNLESS YOU KNOW WHAT YOU ARE DOING 3 | // 4 | // This file is providing the test runner to use when running extension tests. 5 | // By default the test runner in use is Mocha based. 6 | // 7 | // You can provide your own test runner if you want to override it by exporting 8 | // a function run(testRoot: string, clb: (error:Error) => void) that the extension 9 | // host can call to run the tests. The test runner is expected to use console.log 10 | // to report the results back to the caller. When the tests are finished, return 11 | // a possible error to the callback or null if none. 12 | 13 | var testRunner = require('vscode/lib/testrunner'); 14 | 15 | // You can directly control Mocha options by uncommenting the following lines 16 | // See https://github.com/mochajs/mocha/wiki/Using-mocha-programmatically#set-options for more info 17 | testRunner.configure({ 18 | ui: 'tdd', // the TDD UI is being used in extension.test.js (suite, test, etc.) 19 | useColors: true // colored output from test results 20 | }); 21 | 22 | module.exports = testRunner; -------------------------------------------------------------------------------- /src/beautifyHtml.js: -------------------------------------------------------------------------------- 1 | module.exports = function (str, options) { 2 | options = {}; 3 | return str 4 | // Remove any empty lines at the top of a file. 5 | .replace(/^\s*/g, '') 6 | // Normalize and condense all newlines 7 | // .replace(/(\r\n|\n){2,}/g, '\n') 8 | // fix multiline, Bootstrap-style comments 9 | .replace(/(\s*)()/g, '$1$2\n $1$4$1$5$1$6') 24 | // Bring closing comments up to the same line as closing tag. 25 | .replace(/\s*(