Visual Studio 代码：Paperscript

Question

（对不起我的英语水平）你知道任何 ext 或什么来给 paperscript 代码上色吗？

paperscript off colors example

Answer 1

因为您的编辑器无法识别 text/paperscript MIME 类型，所以它不知道要对其应用什么语法突出显示。

为了避免这种情况，最好的办法是将您的 paperscript 代码存储在一个扩展名为 .js 的单独文件中。然后您的编辑器将自动应用正确的 JS 语法突出显示。

index.html

<script type="text/paperscript" canvas="myCanvas" src="index.js"></script>

index.js

// exactly the same code you had inline before
for (var x = 0; x < 1000; x += 100) {

    for (var y = 0; y < 1000; y += 100) {

        var myCircle = new Path.Circle(new Point(x, y), 10);
        myCircle.fillColor = 'purple';

    }
}

Answer 2

此处提出了关于 text/babel 的类似问题：https://github.com/Microsoft/vscode/issues/11781

您要做的是找到默认的 VSCode html.json 文件并进行小的编辑

在 Windows 上会是这样的：C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\html\syntaxes\html.json

在 Mac 上，您必须在应用程序文件夹中找到 VSCode 应用程序，然后右键单击 'Show package contents' 并导航至 /Contents/Resources/app/extensions/html/syntaxes/html.json

你应该找到这样的代码块（搜索 javascript）

{
  "begin": "\G",
  "end": "(?i:(?=/?>|type(?=[\s=])(?!\s*=\s*('|\"|)(text/(javascript|ecmascript|babel)|application/((x-)?javascript|ecmascript|babel)|module)[\s\"'>])))",
  "name": "meta.tag.metadata.script.html",
  "patterns": [
    {
      "include": "#tag-stuff"
    }
  ]
},

像这样将 paperscript 添加到正则表达式中

{
  "begin": "\G",
  "end": "(?i:(?=/?>|type(?=[\s=])(?!\s*=\s*('|\"|)(text/(javascript|ecmascript|babel|paperscript)|application/((x-)?javascript|ecmascript|babel|paperscript)|module)[\s\"'>])))",
  "name": "meta.tag.metadata.script.html",
  "patterns": [
    {
      "include": "#tag-stuff"
    }
  ]
},

保存 html.json 并重新启动 VSCode 然后你就可以开始了。

我已在 https://github.com/textmate/html.tmbundle/issues 提出请求，要求默认包含此内容

Answer 3

还没发现问题还没解决，自己也手动修复了

只是想提出在 Windows10 上快速解决此问题的方法，因为他们使用的是用户特定的安装。

您现在搜索的目录比较难找。您正在寻找 C:\Users\{user name here}\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\html\syntaxes\，然后该文件被命名为 html.tmLanguage.json。否则解决方案仍然相似，搜索 javascript 的第一个实例并在其正则表达式中包含 paperscript。对我来说，我找到了这条长线。

"end": "(?ix:\n\t\t\t\t\t\t\t\t\t\t\t\t(?=>\t\t\t\t\t\t\t\t\t\t\t# Tag without type attribute\n\t\t\t\t\t\t\t\t\t\t\t\t  | type(?=[\s=])\n\t\t\t\t\t\t\t\t\t\t\t\t  \t(?!\s*=\s*\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t''\t\t\t\t\t\t\t\t# Empty\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | \"\"\t\t\t\t\t\t\t\t\t#   Values\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | ('|\"|)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttext/\t\t\t\t\t\t\t# Text mime-types\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tjavascript(1\.[0-5])?\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | x-javascript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | jscript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | livescript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | (x-)?ecmascript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | babel\t\t\t\t\t\t# Javascript variant currently\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \t\t\t\t\t\t\t\t#   recognized as such\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t   \t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | application/\t\t\t\t\t# Application mime-types\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \t(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(x-)?javascript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | (x-)?ecmascript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | module\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[\s\"'>]\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t)",

并改成这条长线

"end": "(?ix:\n\t\t\t\t\t\t\t\t\t\t\t\t(?=>\t\t\t\t\t\t\t\t\t\t\t# Tag without type attribute\n\t\t\t\t\t\t\t\t\t\t\t\t  | type(?=[\s=])\n\t\t\t\t\t\t\t\t\t\t\t\t  \t(?!\s*=\s*\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t''\t\t\t\t\t\t\t\t# Empty\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | \"\"\t\t\t\t\t\t\t\t\t#   Values\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | ('|\"|)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttext/\t\t\t\t\t\t\t# Text mime-types\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tjavascript(1\.[0-5])?\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | x-javascript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | jscript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | livescript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | (x-)?ecmascript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | babel\t\t\t\t\t\t# Javascript variant currently\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \t\t\t\t\t\t\t\t#   recognized as such\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t       | paperscript\t\t\t\t\t\t# Javascript variant currently\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \t\t\t\t\t\t\t\t#   recognized as such\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | application/\t\t\t\t\t# Application mime-types\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \t(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(x-)?javascript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | (x-)?ecmascript\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  | module\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  \t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[\s\"'>]\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t)",

我建议在通读文档时打开换行，并尽可能添加 | paperscript。 Microsoft VS Code 似乎没有添加对此 mimetype 的任何支持，但当您想在 HTML 本身中使用 paperscript 语法时，这是解决它的快速而肮脏的方法。

Answer 4

找到相关路径有点棘手，所以对于新用户来说，这是解决方案：

安装VS的标准路径为：

C:\Users\yourusername -> then you need to enter AppData, as default you can't see the folder so you need to go to the windows ribbon and click view -> show hidden.

那么你可以很容易地走下一条路：

C:\Users\yourusername\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\html\syntaxes\html.tmLanguage.json

打开与你的 vs 并搜索第一个 javascript 外观。将其复制到右侧（在它们之间使用 |）并将其从 x-javascript 更改为 paperscript.

应该能帮您解决问题。

Visual Studio 代码：Paperscript

Visual Studio Code: Paperscript

paperjs

visual-studio-code