Skip to content

Configure Phenoscript VS Code

Sergei Tarasov edited this page Oct 27, 2023 · 3 revisions

Install the Phenoscript VS Code extension

The Phenoscript VS Code extension provides syntax highlighting and snippets for writing Phenoscript descriptions. Here's how to install it.

  1. Open VS Code and click on the Extensions icon in the left-hand sidebar (or press Ctrl+Shift+X on Windows or Cmd+Shift+X on Mac).
  2. In the search bar at the top of the Extensions panel, type in the extension name 'Phenoscript'.
  3. Select the 'Phenoscript' extension from the search results.
  4. Click the "Install" button on the extension's page.
  5. Wait for the installation to complete. This may take a few moments.
  6. After the installation is complete, the extension will be enabled in VS Code and you can start using it. Restarting VS Code may be necessary.

Configure Additional Handy Features for Phenoscript.

A few handy features are available in VS Code that should be set up manually. They will make using Phenoscript more convenient.

1. Disable Word-Based Suggestions in VScode.

By default, VS Code displays any text you have ever entered in your file as snippets in the auto-complete menu. It would be much better to disable this option for Phenoscript .phs files. Here is how to do it.

  1. Open VS Code and press the Ctrl+Shift+P shortcut (or Cmd+Shift+P on macOS) to access the Command Palette. 
  2. In the Command Palette's search bar type “settings.json” and from the drop-down menu select "Open User Settings JSON". It will open a settings.json file that looks like this:
{

"security.workspace.trust.untrustedFiles": "open",

"settingsSync.ignoredSettings": []
}
  1. Add "[phs]": {"editor.wordBasedSuggestions": false }, to the file, so it looks like:
{

"security.workspace.trust.untrustedFiles": "open",

"[phs]": {"editor.wordBasedSuggestions": false },

"settingsSync.ignoredSettings": []
}
  1. Save the settings.json file and restart VS Code. Done!

2. Highlight All Occurrences of Selected Words

This handy feature allows you to quickly find the same words and subwords in the text.

  1. Navigate to VS Code Extensions, type in highlight-icemode extension in the search bar and install it.
  2. Open VS Code and press the Ctrl+Shift+P shortcut (or “Cmd+Shift+P on macOS) to access the Command Palette. 
  3. In the Command Palette's search bar type “settings.json” and from the drop-down menu select "Open User Settings JSON". It will open the settings.json file.
  4. Add the text embedded within this scope "workbench.colorCustomizations": {...}, to the settings.json. So, the final text in the file looks like this:
{

"security.workspace.trust.untrustedFiles": "open",

"[phs]": {"editor.wordBasedSuggestions": false },

"workbench.colorCustomizations": {
    "editor.selectionBackground":
    "#FFFF96", 
    // 'you can set other color'
    "editor.findMatchBackground":
    "#FFFF96", 
    // 'you can set other color'
    "editor.selectionHighlightBackground":
    "#8f0541d4", 
    // 'required important'
    "editor.findMatchHighlightBackground":
    "#00000000", 
    // 'required important'
    "editor.wordHighlightBackground":
    "#00000000", 
    //'required important'
    "editorBracketMatch.border":
    "#FF0000", 
    //'you can set other color'
    "editorBracketMatch.background":
    "#0052cc" 
    // 'you can set other color'
},

"settingsSync.ignoredSettings": []
}
  1. Save the settings.json file. You're done! VS Code may need to be restarted.

Enable Colorful Comments

Enabling colorful comments is a helpful way to visually distinguish various file sections and highlight reviewer suggestions.

  1. To achieve this, you can install the Highlight package and configure your settings.json as previously outlined in the earlier step.
  2. Open VS Code and press the Ctrl+Shift+P shortcut (or “Cmd+Shift+P on macOS) to access the Command Palette. 
  3. In the Command Palette's search bar type “settings.json” and from the drop-down menu select "Open User Settings JSON". It will open the settings.json file.
  4. Add the text embedded within this scope "highlight.regexes": {...}, to the settings.json. So, the final text in the file looks like this:
{

"security.workspace.trust.untrustedFiles": "open",

"[phs]": {"editor.wordBasedSuggestions": false },



"highlight.regexes": {
    "(#// ?OTUName:?)(.*)": {
    "filterLanguageRegex": "phs",
    "decorations": [
        {
        "overviewRulerColor": "#055d60",
        "backgroundColor": "#055d60",
        "color": "#ffffff",
        "fontWeight": "bold"
        },
        {
        "backgroundColor": "#ffcc00",
        "color": "#1f1f1f"
        }
    ]
    },
    "(#// FIXIT:?)(.*)": {
        "filterLanguageRegex": "phs",
        "decorations": [
        {
            "overviewRulerColor": "#d90000",
            "backgroundColor": "#d90000",
            "color": "#1f1f1f",
            "fontWeight": "bold"
        },
        {
            "backgroundColor": "#ff0000",
            "color": "#1f1f1f"
        }
        ]
        },
        "(#// RES:?)(.*)": {
        "filterLanguageRegex": "phs",
        "decorations": [
            {
            "overviewRulerColor": "#1292B2",
            "backgroundColor": "#1292B2",
            "color": "#1f1f1f",
            "fontWeight": "bold"
            },
            {
            "backgroundColor": "#00CCFF",
            "color": "#1f1f1f"
            }
        ]
        },
        "(#/)( .*)": {
        "filterLanguageRegex": "phs",
        "decorations": [
            {
            "overviewRulerColor": "#7DAA23",
            "backgroundColor": "#7DAA23",
            "color": "#1f1f1f",
            "fontWeight": "bold"
            },
            {
            "backgroundColor": "#A6E22E",
            "color": "#1f1f1f"
            }
        ]
        },
    "(?<=^|\\W|_)(#[a-f0-9]{3,4}|#[a-f0-9]{6}|#[a-f0-9]{8}|rgba?\\s*\\([^)]*?\\)|hsla?\\s*\\([^)]*?\\)|aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyanaqua|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|tan|teal|thistle|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen)(?=\\W|_|$)": [
        {
        "rangeBehavior": 1,
        "borderWidth": "1px",
        "borderColor": "$1",
        "borderStyle": "solid"
        }
    ]
},



"settingsSync.ignoredSettings": []
}