astro-vscode 0.18.0 → 0.19.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # astro-vscode
 
+## 0.19.1
+
+### Patch Changes
+
+- 59e8ad6: Update README, disable frontmatter indenting by default
+- fec2817: Improved syntax highlighting, auto-indentation and auto-closing
+- Updated dependencies [729dff5]
+- Updated dependencies [05a48c2]
+- Updated dependencies [fe2d26b]
+  - @astrojs/language-server@0.19.1
+
+## 0.19.0
+
+### Minor Changes
+
+- a97b9a4: Add support for Inlay Hints. Minimum VS Code version supported starting from this update is 1.67.0 (April 2022)
+
+### Patch Changes
+
+- Updated dependencies [a97b9a4]
+  - @astrojs/language-server@0.19.0
+
+## 0.18.1
+
+### Patch Changes
+
+- 666739a: Revert update to latest LSP and inlay hints support
+- Updated dependencies [666739a]
+  - @astrojs/language-server@0.18.1
+
 ## 0.18.0
 
 ### Minor Changes

package/README.md

@@ -2,26 +2,55 @@
 
 > 🧑‍🚀 Not sure what Astro is? See our website at [astro.build](https://astro.build)!
 
-Provides language support for `.astro` files. This extension is powered by the [Astro language server](https://github.com/withastro/language-tools/tree/main/packages/language-server)
+Provides language support for `.astro` files. This extension is powered by the [Astro language server](https://github.com/withastro/language-tools/tree/main/packages/language-server).
 
 ## Features
 
-* [Go to Definition](https://code.visualstudio.com/docs/editor/editingevolved#_go-to-definition)
-* Code hover hints
-* Code completion
-* Function signatures
-* Syntax highlighting
-* Code folding
-* Emmet
+- Syntax & [semantic](https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide) highlighting
+- [Diagnostic messages](https://code.visualstudio.com/docs/editor/editingevolved#_errors-warnings)
+- [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense) completions ([w/ auto-imports](https://code.visualstudio.com/Docs/languages/typescript#_auto-imports))
+- [Emmet completions](https://code.visualstudio.com/docs/editor/emmet) in HTML & CSS
+- Props completions for JSX/TSX, Vue (Composition API only) and Svelte components
+- [Code actions](https://code.visualstudio.com/docs/editor/editingevolved#_code-action) (quick fixes, sort imports etc)
+- [Formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting)
+- [Symbols](https://code.visualstudio.com/docs/editor/editingevolved#_go-to-symbol) ([outline view](https://code.visualstudio.com/docs/getstarted/userinterface#_outline-view), [breadcrumb navigation](https://code.visualstudio.com/docs/editor/editingevolved#_breadcrumbs) etc)
+- [Hover information](https://code.visualstudio.com/Docs/languages/typescript#_hover-information)
+- [Go to Definition](https://code.visualstudio.com/docs/editor/editingevolved#_go-to-definition)
+- [Inlay hints](https://code.visualstudio.com/docs/editor/editingevolved#_inlay-hints)
+- [Code folding](https://code.visualstudio.com/docs/editor/codebasics#_folding)
+
+A TypeScript plugin adding support for importing Astro components inside JavaScript and TypeScript files is also included.
 
 ## Configuration
 
-You can disable most features in the extension by going to your workspace settings page. Under __Extension__ find Astro configuration and uncheck the feature you do not want. For example to disable error messages unselect __TypeScript > Diagnostics: Enable__.
+You can disable most features in the extension by going to your workspace settings page. Under **Extension** find Astro configuration and uncheck the feature(s) you do not want. For example to disable error messages unselect **TypeScript > Diagnostics: Enable** (or in JSON, set `astro.typescript.diagnostics.enabled` to `false`).
+
+Formatting and TypeScript settings can be configured using VS Code's HTML Format settings (`html.format.xxx`) and TypeScript settings (`typescript.xxx`) respectively.
 
 ## Troubleshooting
 
+### Unable to update to latest version
+
+Starting from 0.19.0, the minimum VS Code version supported by this extension is 1.67.0 (April 2022). If using an older version of VS Code, 0.18.1 will be installed instead.
+
+Before submitting an issue, please make sure you're using the latest version of both VS Code and the extension!
+
 ### Cannot find name "Astro" or Property 'env' does not exist on type 'ImportMeta' or Cannot find name "Fragment"
 
-Starting from 0.23.5 version of Astro and the 0.9 version of this extension, typechecking is now done using types that are provided by Astro itself. Therefore, to benefit from those included types, you need to use any version of Astro that is higher or equal to 0.23.5
+Starting from 0.23.5 version of Astro and the 0.9 version of this extension, typechecking is now done using types that are provided by Astro itself. Therefore, to benefit from those included types, you need to use any version of Astro that is higher or equal to 0.23.5.
 
 If you can't upgrade to a newer version of Astro for the moment, you can downgrade the extension to the latest pre 0.9.0 version by right clicking the Astro extension in the sidebar and pressing "Install another version"
+
+### Inlay Hints don't work
+
+Currently, only inlay hints provided by TypeScript are supported. TypeScript inlay hints are disabled by default and needs to be enabled using the settings under the `typescript.inlayHints` namespace, for example, to enable inlay hints for parameter names, you would do the following:
+
+```json
+{
+  "typescript.inlayHints.parameterNames.enabled": "all"
+}
+```
+
+Alternatively, in the GUI this would be in **TypeScript > Inlay Hints > Parameter Names**. Make sure to update the TypeScript settings and not the JavaScript ones, as Astro is TypeScript-only
+
+See [this page](https://code.visualstudio.com/Docs/languages/typescript#_inlay-hints) for more information on the different settings available for inlay hints

package/languages/astro-language-configuration.json

@@ -3,11 +3,9 @@
     "blockComment": ["<!--", "-->"]
   },
   "brackets": [
-    ["---", "---"],
     ["<!--", "-->"],
     ["<", ">"],
-    ["{", "}"],
-    ["(", ")"]
+    ["{", "}"]
   ],
   "autoClosingPairs": [
     { "open": "{", "close": "}" },
@@ -16,13 +14,15 @@
     { "open": "'", "close": "'" },
     { "open": "\"", "close": "\"" },
     { "open": "`", "close": "`" },
-    { "open": "<!--", "close": "-->", "notIn": ["comment", "string"] },
+    { "open": "{/*", "close": " */}", "notIn": ["comment", "string"] },
+    { "open": "<!--", "close": " -->", "notIn": ["comment", "string"] },
     { "open": "/**", "close": " */", "notIn": ["string"] }
   ],
   "autoCloseBefore": ";:.,=}])>` \n\t",
   "surroundingPairs": [
     { "open": "'", "close": "'" },
     { "open": "\"", "close": "\"" },
+    { "open": "`", "close": "`" },
     { "open": "{", "close": "}" },
     { "open": "[", "close": "]" },
     { "open": "(", "close": ")" },
@@ -33,5 +33,36 @@
       "start": "^\\s*<!--\\s*#region\\b.*-->",
       "end": "^\\s*<!--\\s*#endregion\\b.*-->"
     }
+  },
+  "wordPattern": {
+    "pattern": "([^\\-\\s]+-[^\\-\\s]+)|(-?\\d*\\.\\d\\w*)|([^\\`\\~\\-\\!\\@\\$\\^\\&\\*\\(\\)\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:'\"\\,\\.\\<\\>\\/\\s]+)"
+  },
+  "onEnterRules": [
+    {
+      "beforeText": {
+        "pattern": "<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr))([_:\\w][_:\\w\\-.\\d]*)([^/>]*(?!/)>)[^<]*$",
+        "flags": "i"
+      },
+      "afterText": {
+        "pattern": "^<\\/([_:\\w][_:\\w-.\\d]*)\\s*>$",
+        "flags": "i"
+      },
+      "action": {
+        "indent": "indentOutdent"
+      }
+    },
+    {
+      "beforeText": {
+        "pattern": "<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr))([_:\\w][_:\\w\\-.\\d]*)([^/>]*(?!/)>)[^<]*$",
+        "flags": "i"
+      },
+      "action": {
+        "indent": "indent"
+      }
+    }
+  ],
+  "indentationRules": {
+    "increaseIndentPattern": "<(?!\\?|(?:area|base|br|col|frame|hr|html|img|input|keygen|link|menuitem|meta|param|source|track|wbr)\\b|[^>]*\\/>)([-_\\.A-Za-z0-9]+)(?=\\s|>)\\b[^>]*>(?!.*<\\/\\1>)|<!--(?!.*-->)|\\{[^}\"']*$",
+    "decreaseIndentPattern": "^\\s*(<\\/(?!html)[-_\\.A-Za-z0-9]+\\b[^>]*>|-->|\\})"
   }
 }

package/package.json

@@ -2,13 +2,28 @@
   "name": "astro-vscode",
   "displayName": "Astro",
   "description": "Language support for Astro",
+  "categories": [
+    "Programming Languages",
+    "Formatters",
+    "Linters"
+  ],
+  "qna": false,
+  "keywords": [
+    "astro",
+    "node",
+    "typescript",
+    "javascript",
+    "vue",
+    "svelte",
+    "Static site generator"
+  ],
   "icon": "assets/icon.png",
   "type": "commonjs",
   "galleryBanner": {
     "color": "#FFBE2D",
     "theme": "dark"
   },
-  "version": "0.18.0",
+  "version": "0.19.1",
   "author": "withastro",
   "license": "MIT",
   "publisher": "astro-build",
@@ -16,26 +31,28 @@
     "vscode:prepublish": "yarn build",
     "build": "astro-scripts build \"src/**/*.ts\" && tsc -p tsconfig.json",
     "dev": "astro-scripts dev \"src/**/*.ts\"",
-    "test": "node ./test/runTest.js"
+    "test": "yarn run test:vscode && yarn run test:grammar",
+    "test:vscode": "node ./test/runTest.js",
+    "test:grammar": "node ./test/grammar/test.mjs",
+    "update-grammar-snapshots": "node ./test/grammar/test.mjs --updateSnapshot"
   },
   "engines": {
-    "vscode": "^1.56.0"
+    "vscode": "^1.67.0"
   },
   "activationEvents": [
     "onLanguage:astro",
     "workspaceContains:astro.config.*"
   ],
   "dependencies": {
-    "@astrojs/language-server": "0.18.0",
+    "@astrojs/language-server": "0.19.1",
     "@astrojs/ts-plugin": "0.2.1",
-    "vscode-languageclient": "^8.0.0"
+    "vscode-languageclient": "^8.0.1"
   },
   "devDependencies": {
-    "@types/glob": "^7.2.0",
-    "@types/vscode": "^1.56.0",
+    "@types/vscode": "^1.67.0",
     "@vscode/test-electron": "^2.1.3",
-    "astro-scripts": "file:../../scripts",
-    "glob": "^7.2.0"
+    "vscode-tmgrammar-test": "^0.1.1",
+    "astro-scripts": "file:../../scripts"
   },
   "main": "./dist/index.js",
   "browser": "./dist/index.js",
@@ -211,13 +228,15 @@
         },
         "astro.format.indentFrontmatter": {
           "type": "boolean",
-          "default": true,
-          "title": "Formatting: Indent the frontmatter by one level of indentation"
+          "default": false,
+          "title": "Formatting: Indent frontmatter",
+          "description": "Indent the formatter by one level of indentation"
         },
         "astro.format.newLineAfterFrontmatter": {
           "type": "boolean",
           "default": true,
-          "title": "Formatting: Add a line return between the frontmatter and the template"
+          "title": "Formatting: Add line return after the frontmatter",
+          "description": "Add a line return between the frontmatter and the template"
         }
       }
     },
@@ -252,6 +271,7 @@
           "source.stylus": "stylus",
           "source.js": "javascript",
           "source.ts": "typescript",
+          "source.json": "json",
           "source.tsx": "typescriptreact"
         }
       },

package/syntaxes/astro.tmLanguage.json

@@ -68,25 +68,64 @@
       ]
     },
     "astro:component": {
-      "name": "meta.tag.component.astro",
-      "begin": "(</?)([$A-Z_][^/?!\\s<>]*|[^/?!\\s<>.]+\\.[^/?!\\s<>]+)\\b",
-      "beginCaptures": {
-        "1": {
-          "name": "punctuation.definition.tag.begin.astro"
-        },
-        "2": {
-          "name": "entity.name.tag.astro support.class.component.astro"
-        }
-      },
-      "end": "(/?>)",
-      "endCaptures": {
-        "1": {
-          "name": "punctuation.definition.tag.end.astro"
-        }
-      },
       "patterns": [
         {
-          "include": "#astro:attribute"
+          "name": "meta.tag.component.astro astro.component.raw",
+          "begin": "(<)([$A-Z_][^/?!\\s<>]*|[^/?!\\s<>.]+\\.[^/?!\\s<>]+)(.+is:raw.*?)(>)",
+          "end": "(</)([$A-Z_][^/?!\\s<>]*|[^/?!\\s<>.]+\\.[^/?!\\s<>]+)(?=\\s|/?>)(>)",
+          "beginCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.begin.astro"
+            },
+            "2": {
+              "name": "entity.name.tag.astro support.class.component.astro"
+            },
+            "3": {
+              "patterns": [
+                {
+                  "include": "#astro:attribute"
+                }
+              ]
+            },
+            "4": {
+              "name": "punctuation.definition.tag.end.astro"
+            }
+          },
+          "endCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.begin.astro"
+            },
+            "2": {
+              "name": "entity.name.tag.astro support.class.component.astro"
+            },
+            "3": {
+              "name": "punctuation.definition.tag.end.astro"
+            }
+          },
+          "contentName": "source.unknown"
+        },
+        {
+          "name": "meta.tag.component.astro",
+          "begin": "(</?)([$A-Z_][^/?!\\s<>]*|[^/?!\\s<>.]+\\.[^/?!\\s<>]+)\\b",
+          "beginCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.begin.astro"
+            },
+            "2": {
+              "name": "entity.name.tag.astro support.class.component.astro"
+            }
+          },
+          "end": "(/?>)",
+          "endCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.end.astro"
+            }
+          },
+          "patterns": [
+            {
+              "include": "#astro:attribute"
+            }
+          ]
         }
       ]
     },
@@ -131,6 +170,47 @@
         }
       },
       "patterns": [
+        {
+          "comment": "Treat script tag with application/ld+json as JSON. This needs to be higher than is:raw since it's a very possible situation to have is:raw on a JSON script tag",
+          "begin": "\\G(?=\\s*[^>]*?type\\s*=\\s*(['\"]|)(?i:application/ld\\+json)\\1)",
+          "end": "(?=</|/>)",
+          "patterns": [
+            {
+              "begin": "(?<=>)(?!</)",
+              "end": "(?=</)",
+              "contentName": "source.json",
+              "patterns": [{ "include": "source.json" }]
+            },
+            { "include": "#html:tag-attributes" }
+          ]
+        },
+        {
+          "comment": "Treat script tag with JS-compatible types as JS",
+          "begin": "\\G(?=\\s*[^>]*?type\\s*=\\s*(['\"]|)(?i:module|(?:text/javascript|text/partytown|application/node|application/javascript))\\1)",
+          "end": "(?=</|/>)",
+          "patterns": [
+            {
+              "begin": "(?<=>)(?!</)",
+              "end": "(?=</)",
+              "contentName": "source.js",
+              "patterns": [{ "include": "source.js" }]
+            },
+            { "include": "#html:tag-attributes" }
+          ]
+        },
+        {
+          "comment": "Treat anything with an unknown type as unknown",
+          "begin": "\\G(?=\\s*[^>]*?type\\s*=\\s*(['\"]|)\\1)",
+          "end": "(?=</|/>)",
+          "patterns": [
+            {
+              "begin": "(?<=>)(?!</)",
+              "end": "(?=</)",
+              "name": "source.unknown"
+            },
+            { "include": "#html:tag-attributes" }
+          ]
+        },
         {
           "begin": "\\G(?=\\s*[^>]*?lang\\s*=\\s*(['\"]|)(?i:jsx?|javascript)\\1)",
           "end": "(?=</|/>)",
@@ -367,6 +447,41 @@
     },
     "html:element": {
       "patterns": [
+        {
+          "name": "astro.element.raw",
+          "begin": "(<)([^/?!\\s<>]+)(.+is:raw.*?)(>)",
+          "end": "(</)([^/?!\\s<>]+)(?=\\s|/?>)(>)",
+          "beginCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.begin.html"
+            },
+            "2": {
+              "name": "entity.name.tag.html"
+            },
+            "3": {
+              "patterns": [
+                {
+                  "include": "#astro:attribute"
+                }
+              ]
+            },
+            "4": {
+              "name": "punctuation.definition.tag.end.html"
+            }
+          },
+          "endCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.begin.html"
+            },
+            "2": {
+              "name": "entity.name.tag.html"
+            },
+            "3": {
+              "name": "punctuation.definition.tag.end.html"
+            }
+          },
+          "contentName": "source.unknown"
+        },
         {
           "name": "meta.tag.any.$2.start.html",
           "begin": "(<)([^/?!\\s<>]+)(?=\\s|/?>)",
@@ -445,16 +560,16 @@
           "begin": "\\{",
           "beginCaptures": {
             "0": {
-              "name": "punctuation.definition.generic.begin.html"
+              "name": "punctuation.section.embedded.begin.tsx"
             }
           },
           "end": "\\}",
           "endCaptures": {
             "0": {
-              "name": "punctuation.definition.generic.end.html"
+              "name": "punctuation.section.embedded.end.tsx"
             }
           },
-          "name": "expression.embbeded.astro",
+          "name": "expression.embedded.astro",
           "contentName": "source.tsx",
           "patterns": [
             {
@@ -500,10 +615,11 @@
       ]
     },
     "frontmatter": {
+      "comment": "The frontmatter is treated as comments in order to get the \"faded\" look",
       "begin": "\\A(-{3})\\s*$",
       "beginCaptures": {
         "1": {
-          "name": "comment.block.html"
+          "name": "comment"
         }
       },
       "contentName": "source.ts",
@@ -515,7 +631,7 @@
       "end": "(^|\\G)(-{3})|\\.{3}\\s*$",
       "endCaptures": {
         "2": {
-          "name": "comment.block.html"
+          "name": "comment"
         }
       }
     },