Visual Studio Code Plugin

Posted on |



Rich PlantUML support for Visual Studio Code.

Donate by Paypal|Donate by AliPay|PlantUML Document

Notice 1

Python in Visual Studio Code. Working with Python in Visual Studio Code, using the Microsoft Python extension, is simple, fun, and productive. The extension makes VS Code an excellent Python editor, and works on any operating system with a variety of Python interpreters. It leverages all of VS Code's power to provide auto complete. PlantUML README. Rich PlantUML support for Visual Studio Code. Donate by Paypal Donate by AliPay PlantUML Document. Some sensitive config, like java, jar, are potentially utilized by attackers.The lastest release has disabled the workspace/work folder level settings of them by default. VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. VS Code's rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code. This topic explains how to find, install, and manage VS Code extensions from the Visual Studio Code Marketplace. You need to use Visual Studio to write a plug-in. Use these steps to write a basic plug-in. Alternately, you can find the complete plug-in solution files here: Sample: Create a basic plug-in. Create a Visual Studio project for the plug-in. Open Visual Studio and open a new Class Library (.NET Framework) project using.NET Framework 4.6.2.

Some sensitive config, like java, jar, are potentially utilized by attackers. The lastest release has disabled the workspace/work folder level settings of them by default. To enable, you have to explicitly execute the command PlantUML: Toggle Workspace Trust Flag to trust the workspace.

Thanks RyotaK for the report

Notice 2

The server render is now very recommended by this extension, since it's much faster and much easier to setup, while the major weakness has been improved:

  • Enables POST method, you can now render very-large diagrams
  • The extension comes with a new include processor, you won't encounter include problems again.

To make sure you can benifit from this update, make sure your plantuml server enables POST support.

If not, like the official https://www.plantuml.com/plantuml, the extension falls back to use GET, and you may still encounter 414 URI Too Long errors. Setup your own server is recommended.

Features

  • Preview Diagram, Press Alt-D to start PlantUML preview.
    • Auto update.
    • Zoom & scroll support.
    • Multi-Page Diagram support.
    • Instant preview, if diagram's been exported.
    • From local or server.
    • Snap to Border
  • Export Diagrams
    • At cursor, in current file, in whole workspace, in workspace selected.
    • Concurrent export.
    • Generate URLs.
    • Multi-Page Diagram support.
    • From local or server.
    • Image map (cmapx) support.
  • Editing Supports
    • Format PlantUML code. (Deprecated)
    • All type syntax highlight.
    • All type snippets.
    • Basic auto completion & macro signature support
    • Symbol List support.
  • Others
    • Multi-root Workspace Support.
    • MarkDown integrating support. View Demo
    • Extracting source from images support.

Notice: If you use customize plantuml.jar, please update to the latest version to enable Multi-Page Diagram support. (Later than V1.2017.15)

Format PlantUML code is Deprecated. Don't depend on it, use it only when it works right. I had force disable it in auto-format cases (format on save).

Supported Formats

*.wsd, *.pu, *.puml, *.plantuml, *.iuml

How to install

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install plantuml

Requirements

Depend on which render you choose, plugin has diffrerent requirements.

Requirements for PlantUMLServer render

A plantuml server. See Use PlantUML Server as render.

Requirements for Local render

It's necessary to have following installed:

  • Java : Platform for PlantUML running.
  • Graphviz : PlantUML requires it to calculate positions in diagram.

Quick Install for Mac

Quick Install for Windows

For windows user, majkinetor introduced a way to install plantuml and its dependencies easily. Run cmd.exe as Administrator, and run two commands as follow

Plugin has integrated a copy of 'plantuml.jar', you are good to go now. But if you want to use your own jar (maybe a newer version, or with many dependent jars), specify the jar location with setting plantuml.jar.

If you've installed java, but still prompts 'java not installed', please add java bin path to PATH environment variable.

Typical Files Organization

  • Default extension settings works for independent Plantuml projects.
  • If Plantuml files are only part of your project (as documetation), use plantuml.diagramsRoot and plantuml.exportOutDir to setting up the organization, for example:

You'll get export results like:

Include Files Search Logic

Latest version has changed the include files search logic once again.It is possible to configure includepaths now in settings.json.

The new search order is as follows:

  1. The folder of the rendered file
  2. The includepaths as configured in settings.json
  1. The diagramsRoot

The setting includeSearch is not needed anymore, since the folder of the plantuml file and the diagramsRoot are always both in the include path.

To new projects, it's recommended not to rely on diagramsRoot and configure all required includepaths explicitly.

Thanks anotherandi for the brilliant idea and implementation!

Preview Demos

Preview page provides various zoom/pan actions and snap feature:

  • Zoom operations (since version 2.7.0):
    • Zoom to select area
    • Pinch to zoom (TouchPad)
    • Click to zoom in, alt + click to zoom out
    • Ctrl + mouse scroll to zoom in/out
    • Middle mouse button click to toggle zoom
    • Zoom in / zoom out / toggle buttons of the controls bar.
  • Pan operations (since version 2.7.0):
    • Right mouse button drag
    • Two-finger move to pan (TouchPad)
    • Mouse scroll
  • Snap to border (since v2.8.0):
    • Scroll to most bottom/right/top/left, preview will snap to that border.

    e.g. Snap to Bottom is useful while writing long activity diagrams, which helps you keep focus in the latest part in the bottom.

Auto update:

zoom & scroll:

Multi-Page View:

Export Demos

Export diagram:

Generate URLs

Extract Diagram Source

About Format

PlantUML formatter is disabled (since v2.8.3) if editor.formatOnSave is on.Because the formatter is not reliable enough according to user feedbacks.

About Snippets

This plugin integrates all type diagram snippets. They are splitted into 9 sections:

  • diagram: snippets for general diagrams elements.
  • activity: snippets for activity diagrams.
  • class: snippets for class diagrams.
  • component: snippets for component diagrams.
  • state: snippets for state diagrams.
  • usecase: snippets for usecase diagrams.
  • sequence: snippets for sequence diagrams.
  • ui: snippets for salt diagrams.
  • egg: snippets for some funny diagrams, like sudoku, earth.

For exsample, type acife (short version) to trigge following snippet (activity➤if・else):

About Symbol List (List diagrams of file)

Visual Studio Marketplace

Press Ctrl+Shift+O to list all diagrams in the file. You can name the diagram when diagram starts.

@startuml diagram namesudoku@enduml

About Render

Plugin supports two renders: Local and PlantUMLServer.

Local is the default and traditional way. If you care more about export speed, you should try PlantUMLServer.

Advantages and Disadvantages of PlantUMLServer Render

Advantages:

  • 15X times faster export and much quicker preview response.
  • Don't have to set local enviroments if you have a server in your team.
  • You don't need plantuml.exportConcurrency, because it's unlimited in concurrency.

Disadvantages:

  • ~~Cannot render very-large diagrams (414 URI Too Long).~~
  • ~~Cannot render diagrams with !include in it.~~
  • Less format support: png, svg, txt.
  • Some settings are not applicable: plantuml.jar, plantuml.commandArgs, plantuml.jarArgs.

Use PlantUML Server as Render

To render very-large diagrams with include support, please make sure your plantuml server enables POST support.

If not, like the official https://www.plantuml.com/plantuml, the extension falls back to use GET, and you may still encounter 414 URI Too Long errors.

Setup your own server is recommended.

  • You may already have a PlantUML server in your team, find the server address, like: http://192.168.1.100:8080.

  • If don't have one, set up following the instructions, run with Docker is recommended. Find the server address, like: http://localhost:8080, or http://192.168.1.100:8080 which is ready for sharing to your team.

  • Open user setting, and configure like:

Multiple languages support

Translations are welcome. lang.nls.json, package.nls.json

MarkDown integrating

Extensions

@startuml / @enduml is still recommended, so that PlantUML code in Markdown can be managed by other function of this plugin.

Extension Settings

This extension contributes the following settings.

Render Select:

  • plantuml.render: Select diagram render for both export and preview.

PlantUMLServer Render Settings:

  • plantuml.server: PlantUML server to generate UML diagrams on-the-fly.

Local Render Settings:

  • plantuml.java: Java executable location.
  • plantuml.commandArgs: commandArgs allows you add command arguments to java command, such as -DPLANTUML_LIMIT_SIZE=8192.
  • plantuml.jar: Alternate plantuml.jar location. Leave it blank to use integrated jar.
  • plantuml.jarArgs: jarArgs allows you add arguments to plantuml.jar, such as -config plantuml.config.
  • plantuml.includepaths: Specifies the include paths besides source folder and the diagramsRoot.

Export Settings:

  • plantuml.diagramsRoot: Specifies where all diagram files located (relative to workspace folder).
  • plantuml.exportOutDir: Exported workspace diagrams will be organized in this directory (relative path to workspace folder).
  • plantuml.fileExtensions: File extensions that find to export. Especially in workspace settings, you may add your own extensions so as to export diagrams in source code files, like '.java'.
  • plantuml.exportFormat: format to export. default is not set, user may pick one format everytime exports. You can still set a format for it if you don't want to pick.
  • plantuml.exportSubFolder: export diagrams to a folder which has same name with host file.
  • plantuml.exportConcurrency: decides concurrency count when export multiple diagrams.
  • plantuml.exportMapFile: Determine whether export image map (.cmapx) file when export.

Preview Settings:

  • plantuml.previewAutoUpdate: Dedecides if automatically update the preview window.

URL Generating Settings:

  • plantuml.urlFormat: URL format. Leave it blank to pick format everytime you generate a URL.
  • plantuml.urlResult: URL result type. Simple URL or ready for MarkDown use.

Known Issues

Please post and view issues on GitHub

Thanks

Translators

  • Japanese: Kohei Arao, kannkyo
  • Tranditional Chinese: Alan Tsai
  • German: Fabian F.
  • French: Zepmanbc, FlorianKempenich
  • Danish: Mikkel O. Laursen

Donators

Visual Studio Code Plugins Must Have

Thanks for your encouragements!

Claus Appel, 三島木​一磨, 富吉​佑季, 黒田悦成, Jared Birdsall, Suleyman Cabir Ciplak, Malcolm Learner, Сысоев Максим, Gokan Kenichi, anb0s, Lawrence Yarian, Ahmad Ragab, 山田​暁通

Enjoy!

-->

Applies to: SQL Server (all supported versions) - Linux

This article shows how to use the mssql extension for Visual Studio Code to develop SQL Server databases. Because Visual Studio Code is cross-platform, you can use mssql extension on Linux, macOS, and Windows.

Install and start Visual Studio Code

Visual Studio Code is a cross-platform, graphical code editor that supports extensions.

  1. Download and install Visual Studio Code on your machine.

  2. Start Visual Studio Code.

    Note

    If Visual Studio Code does not start when you are connected through an xrdp remote desktop session, see VS Code not working on Ubuntu when connected using XRDP.

Install the mssql extension

The mssql extension for Visual Studio Code lets you connect to a SQL Server, query with Transact-SQL (T-SQL), and view the results.

  1. In Visual Studio Code, select View > Command Palette, or press Ctrl+Shift+P, or press F1 to open the Command Palette.

  2. In the Command Palette, select Extensions: Install Extensions from the dropdown.

  3. In the Extensions pane, type mssql.

  4. Select the SQL Server (mssql) extension, and then select Install.

  5. After the installation completes, select Reload to enable the extension.

Create or open a SQL file

The mssql extension enables mssql commands and T-SQL IntelliSense in the code editor when the language mode is set to SQL.

  1. Select File > New File or press Ctrl+N. Visual Studio Code opens a new Plain Text file by default.

  2. Select Plain Text on the lower status bar, or press Ctrl+K > M, and select SQL from the languages dropdown.

    Note

    If this is the first time you have used the extension, the extension installs supporting SQL Server tools.

If you open an existing file that has a .sql file extension, the language mode is automatically set to SQL.

Connect to SQL Server

Visual Studio Code Plugins

Follow these steps to create a connection profile and connect to a SQL Server.

  1. Press Ctrl+Shift+P or F1 to open the Command Palette.

  2. Type sql to display the mssql commands, or type sqlcon, and then select MS SQL: Connect from the dropdown.

    Note

    A SQL file, such as the empty SQL file you created, must have focus in the code editor before you can execute the mssql commands.

  3. Select the MS SQL: Manage Connection Profiles command.

  4. Then select Create to create a new connection profile for your SQL Server.

  5. Follow the prompts to specify the properties for the new connection profile. After specifying each value, press Enter to continue.

    Connection propertyDescription
    Server name or ADO connection stringSpecify the SQL Server instance name. Use localhost to connect to a SQL Server instance on your local machine. To connect to a remote SQL Server, enter the name of the target SQL Server, or its IP address. To connect to a SQL Server container, specify the IP address of the container's host machine. If you need to specify a port, use a comma to separate it from the name. For example, for a server listening on port 1401, enter <servername or IP>,1401.
    As an alternative, you can enter the ADO connection string for your database here.
    Database name (optional)The database that you want to use. To connect to the default database, don't specify a database name here.
    Authentication TypeChoose either Integrated or SQL Login.
    User nameIf you selected SQL Login, enter the name of a user with access to a database on the server.
    PasswordEnter the password for the specified user.
    Save PasswordPress Enter to select Yes and save the password. Select No to be prompted for the password each time the connection profile is used.
    Profile Name (optional)Type a name for the connection profile, such as localhost profile.

    After you enter all values and select Enter, Visual Studio Code creates the connection profile and connects to the SQL Server.

    Tip

    If the connection fails, try to diagnose the problem from the error message in the Output panel in Visual Studio Code. To open the Output panel, select View > Output. Also review the connection troubleshooting recommendations.

  6. Verify your connection in the lower status bar.

As an alternative to the previous steps, you can also create and edit connection profiles in the User Settings file (settings.json). To open the settings file, select File > Preferences > Settings. For more information, see Manage connection profiles.

Create a SQL database

  1. In the new SQL file that you started earlier, type sql to display a list of editable code snippets.

  2. Select sqlCreateDatabase.

  3. In the snippet, type TutorialDB to replace 'DatabaseName':

  4. Press Ctrl+Shift+E to execute the Transact-SQL commands. View the results in the query window.

    Tip

    You can customize the shortcut keys for the mssql commands. See Customize shortcuts.

Create a table

  1. Delete the contents of the code editor window.

  2. Press Ctrl+Shift+P or F1 to open the Command Palette.

  3. Type sql to display the mssql commands, or type sqluse, and then select the MS SQL: Use Database command.

  4. Select the new TutorialDB database.

  5. In the code editor, type sql to display the snippets, select sqlCreateTable, and then press Enter.

  6. In the snippet, type Employees for the table name.

  7. Press Tab to get to the next field, and then type dbo for the schema name.

  8. Replace the column definitions with the following columns:

  9. Press Ctrl+Shift+E to create the table.

Insert and query

  1. Add the following statements to insert four rows into the Employees table.

    While you type, T-SQL IntelliSense helps you to complete the statements:

    Tip

    The mssql extension also has commands to help create INSERT and SELECT statements. These were not used in the previous example.

  2. Press Ctrl+Shift+E to execute the commands. The two result sets display in the Results window.

View and save the result

  1. Select View > Editor Layout > Flip Layout to switch to a vertical or horizontal split layout.

  2. Select the Results and Messages panel headers to collapse and expand the panels.

    Tip

    You can customize the default behavior of the mssql extension. See Customize extension options.

  3. Select the maximize grid icon on the second result grid to zoom in to those results.

    Note

    The maximize icon displays when your T-SQL script produces two or more result grids.

  4. Open the grid context menu by right-clicking on the grid.

  5. Select Select All.

  6. Open the grid context menu again and select Save as JSON to save the result to a .json file.

  7. Specify a file name for the JSON file.

  8. Verify that the JSON file saves and opens in Visual Studio Code.

If you need to save and run SQL scripts later, for administration or a larger development project, save the scripts with a .sql extension.

Next steps

If you're new to T-SQL, see Tutorial: Write Transact-SQL statements and the Transact-SQL Reference (Database Engine).

For more information on using or contributing to the mssql extension, see the mssql extension project wiki.

Visual Studio Code Plugins For Flutter

For more information on using Visual Studio Code, see the Visual Studio Code documentation.