Visual Studio Code Vuejs Example

| 15-09-2021
[RAND-1-100] Comments

Example

Vue.js Tutorial

I used the version 3 vue-cli template with TypeScript in Vue.js Single-File-Components rather than the guide you have linked, but I had a similar problem. The vue-cli v.3 template ends up outputting TypeScript components' sourcemaps into a '.' Folder (but all under webpack://) while the JavaScript components' sourcemaps end up in a 'src' folder. Setting up the project. Open Visual Studio and create a new project by pressing Ctrl + Shift + N or navigate to File - New - Project.On the left pane select Visual C# -.NET Core and select ASP.NET Core Web Application, name your project netcore-vuejs and click OK.

Studio

Visual Studio Code Vuejs Examples

  • English: ./README_EN.md
  • 中文: ./README.md

Format single file with '.vue' used in 'vscode' editor.（vscode 编辑器格式化插件，格式化单文件“.vue”文件代码）https://marketplace.visualstudio.com/items?itemName=febean.vue-format

如果你有问题或者需求，欢迎来提 issue。 https://github.com/win7killer/vue-format

你的 issue 就是我的原力. 欢迎 STAR && FORK

对 js-beautify 依赖很重，所以大部分都受 js-beautify 限制。理论上 js-beautify 的配置都可以适用。

Features

Requirements

  • js-beautify: https://github.com/beautify-web/js-beautify
  • pug-beautify: https://github.com/vingorius/pug-beautify

Keyboard Shortcuts

  • mac: cmd+ctrl+p
  • win: alt+ctrl+p

Extension Settings

  • 使用js-beautify配置 和 pug-beautify配置
  • indent_size 默认使用 editor.tabSize
KeyExampleDefault
vue-format.html_indent_rootfalsefalse
vue-format.break_attr_limit2-1
vue-format.attr_end_with_gttruetrue
vue-format.format_need['html']['html', 'js', 'css']
vue-format.js-beautify(See the config at front)(See the config at front)
vue-format.pug-beautify{fill_tab: false}{fill_tab: false}

Changelog

U can see the changelog in CHANGELOG.md

Todo List

Some things todo in todo.md