Giter VIP home page Giter VIP logo

vue-beautify's Introduction

Note: This project is no longer maintained. 注意:这个项目已经不在维护了

vue-beautify for vscode

Features

Beautify Vue code in Visual Studio Code.

preview

Usage

  1. Keyboard Shortcut: ctrl+shift+f ;
  2. Open context menu in vue, choose Beautify Vue ;
  3. Press F1, search Beautify Vue, and click the item.

Indent Option

The vue-beautify's indent option according to the textEditor's indent option, like this:

indent option

Keyboard Shortcut

Use the following to embed a beautify shortcut in keybindings.json. Replace with your preferred key bindings.

    {
      "key": "ctrl+shift+f",          
      "command": "extension.vueBeautify",
      "when": "editorTextFocus && !editorReadonly" 
    }

Github

https://github.com/peakchen90/vue-beautify

vue-beautify's People

Contributors

peakchen90 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vue-beautify's Issues

js代碼的第一行不需要縮進

<script>標籤下面的第一行代碼,我們並不想要縮進,可否給個選項,控制這一點? Hello,we don't want the first line of the javascript code to be indented,could you add a option to config that?

Default keyboard shortcut

I'd suggest removing the default keyboard shortcut, or at least put it on something unused. Ctrl + Shift + F is the MacOS shortcut for global search, took me a minute to find out why my search wasn't working anymore :))
Thank you for your work!

格式化缩进有问题

测试代码:

<template>
    <div class="page-quick-link">
        <div class="page-quick-link-main">
            <button class="quick-link-feedback">
                <div class="icon-service"></div>
                <span>客服</span>
                <QuickResponseCode/>
            </button>
            <button
                class="quick-link-top"
                :class="{'quick-link-top-hidden': !showTop, 'quick-link-top-show': showTop}"
                @click="scrollToTop()">
                <span class="quick-link-top-text">回到<br/>顶部</span>
            <icon
                class="quick-link-top-arrow"
                name="arrow-right"></icon>
            </button>
        </div>
    </div>
</template>

格式化后代码:

<template>
    <div class="page-quick-link">
        <div class="page-quick-link-main">
            <button class="quick-link-feedback">
                    <div class="icon-service"></div>
                    <span>客服</span>
                    <QuickResponseCode/>
                </button>
            <button class="quick-link-top" :class="{'quick-link-top-hidden': !showTop, 'quick-link-top-show': showTop}" @click="scrollToTop()">
                    <span class="quick-link-top-text">回到<br/>顶部</span>
                <icon
                    class="quick-link-top-arrow"
                    name="arrow-right"></icon>
                </button>
        </div>
    </div>
</template>

vscode version: 版本 1.26.1 (1.26.1)
vue-beautify: 最新版本
系统: macos

Cannot activate the extension due to errors

Activating extension 'peakchen90.vue-beautify' failed: vscode.window.showWarningMessage is not a constructor.
_logMessageInConsole @ extensionService.ts:790
_logOrShowMessage @ extensionService.ts:804
(anonymous) @ mainThreadExtensionService.ts:67
(anonymous) @ errors.ts:184
n @ errors.ts:184
$onExtensionActivationError @ mainThreadExtensionService.ts:65
_doInvokeHandler @ rpcProtocol.ts:390
_invokeHandler @ rpcProtocol.ts:375
_receiveRequest @ rpcProtocol.ts:295
_receiveOneMessage @ rpcProtocol.ts:225
_protocol.onMessage.e @ rpcProtocol.ts:100
fire @ event.ts:584
r @ ipc.net.ts:332
e @ ipc.net.ts:339
fire @ event.ts:584
e @ ipc.net.ts:157
_socketDataListener.e @ ipc.net.ts:171
emit @ events.js:182
addChunk @ _stream_readable.js:279
readableAddChunk @ _stream_readable.js:264
Readable.push @ _stream_readable.js:219
onread @ net.js:636

[Extension Host] Here is the error stack: TypeError: vscode.window.showWarningMessage is not a constructor
at activate (c:\Users\Meher.vscode-insiders\extensions\peakchen90.vue-beautify-2.0.4\extension.js:15:5)
at Function._callActivateOptional (c:\Users\Meher\AppData\Local\Programs\Microsoft VS Code Insiders\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:701:21)
at Function._callActivate (c:\Users\Meher\AppData\Local\Programs\Microsoft VS Code Insiders\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:700:704)
at define._doActivateExtension.Promise.all.then.e (c:\Users\Meher\AppData\Local\Programs\Microsoft VS Code Insiders\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:699:895) (at define._activateExtension.s._host.actualActivateExtension.then.t (c:\Users\Meher\AppData\Local\Programs\Microsoft VS Code Insiders\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:442:921))

自动插入空行是在哪里配置的,我想去掉

<el-table :data="optList" stripe style="width: 80%">
	<el-table-column prop="deviceCode" label="设备ID" min-width="100"></el-table-column>
	<el-table-column prop="addtime" label="用户ID" min-width="150"></el-table-column>
	<el-table-column prop="productName" label="所属产品" min-width="180"></el-table-column>
	<el-table-column prop="opt" label="操作" min-width="80"></el-table-column>
</el-table>

格式化后每行都给插入空行,怎么去掉

<el-table :data="optList" stripe style="width: 80%">

	<el-table-column prop="deviceCode" label="设备ID" min-width="100"></el-table-column>

	<el-table-column prop="addtime" label="用户ID" min-width="150"></el-table-column>

	<el-table-column prop="productName" label="所属产品" min-width="180"></el-table-column>

	<el-table-column prop="opt" label="操作" min-width="80"></el-table-column>

</el-table>

覆盖了原生的beautify

将editor.action.formatDocument和vueBeautify.format都设置同一个快捷键之后,在非vue的文件里面,原来的formatDocument不起作用了

It does not work as expected in inner <template> tags.

Steps to reproduce:

  • Create a .vue file.
  • Put the code below:
<template>
    <template class="buggy"></template>
</template>
  • Beautify Vue (Shift + Cmd + F)

Expected:

<template>
    <template class="buggy"></template>
</template>

Actual:

<template>
    <template class="buggy">
</template>

</template>

使用bug

mac/windows 都提示插件存在bug,但是mac上使用基本正常,但是Windows上,就是各种问题,很多空白行,缩进也不对

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.