In VS Code, go to Code -> Preferences -> Extensions or click on the Extensions icon in the Activity bar. Live sync works for HTML (or other types that are listed among editable types in Pinegrow’s settings) and CSS/SASS/LESS files.

Refresh the page in Pinegrow with Cmd+Alt+R on Mac, Ctrl+Alt+R on Win & Linux.

Open the page in Pinegrow with Cmd+Alt+O on Mac, Ctrl+Alt+O on Win & Linux.

Select an element in Pinegrow with Cmd+Alt+P on Mac, Ctrl+Alt+P on Win & Linux.Use the context menu or keyboard shortcuts to: Navigate the code visuallyĮlements selected in Pinegrow are highlighted in VS Code.

Installation instructions are included:Īll edits are live-synced between VS Code and Pinegrow, without having to save changes first. Watch this 5 min video to see what Pinegrow & VS Code can do together. Now you can use Visual Studio Code and Pinegrow together: code parts that are easier to code in VS Code and use Pinegrow’s powerful visual tools to work with HTML structure, styling, Bootstrap, WordPress, master pages, components and so on.

Extension bootstrap visual studio code