withastro / language-tools Goto Github PK
View Code? Open in Web Editor NEWLanguage tools for Astro
License: MIT License
Language tools for Astro
License: MIT License
Should show errors if the props are incorrect
n/a
This definition can conflict with my own environment's import.meta
definitions. For example:
@types/snowpack-env
vite/types
An example error that I'm seeing:
All declarations of 'hot' must have identical modifiers.js(2687)
Subsequent property declarations must have the same type. Property 'hot' must be of type '{ readonly data: any; accept(): void; accept(cb: (mod: any) => void): void; accept(dep: string, cb: (mod: any) => void): void; accept(deps: readonly string[], cb: (mods: any[]) => void): void; acceptDeps(): never; dispose(cb: (data: any) => void): void; decline(): void; invalidate(): void; on: { ...; }; }', but h
I think it's safe to assume that your environment provides these, and its not the responsibility of the Astro compiler.
Do either of the steps above (for Snowpack or Vite) and then see this error in every compiled Astro file (ex: src/pages/index.astro).
When using the Markdown component and a block like > some text
you get an error message.
Unexpected token. Did you mean `{'>'}` or `>`?js(1382)
<Markdown>
# Example
> Block here
</Markdown>
Type checking is disabled or doesn't work for components inside npm packages.
The Astro VSCode extension should provide type errors for components inside npm packages.
Unused variables aren't highlighted properly
Unused variables should be highlighted with a greyer color that implies that they convey less importance.
Astro v0.21 introduce template literal attributes with the following syntax:
<div atrr=`some ${value}`>
These currently don't have any syntax highlighting.
.astro
fileyarn
Windows
Components are highlighted with the same color as general HTML codes.
Components should be highlighted with a different color.
No response
Emmet doesn't work inside a component
Emmet should work inside components
npm
Mac
When using VSCode, the <!dotype html>
element is not syntax highlighted.
n/a
No response
import logo from "../../public/logo.png";
// Cannot find module '../../public/logo.png' or its corresponding type declarations
npm
mac
Given this component usage:
<WrapChildrenWithText>
<img src="https://placehold.co/400" />
<WrapChildrenWithText>
I would expect this to warn or error if WrapChildrenWithText
did not have a <slot>
defined. Currently, I do not know what will happen other than we aren't providing warnings.
/cc @natemoo-re
No response
https://github.com/snowpackjs/astro-language-tools/runs/3557315484?check_suite_focus=true
Env var DISCORD_WEBHOOK is not defined. Maybe try to set it if you are running the script manually.
๐ explained above
Autocompletion performance is often slow
https://github.com/sveltejs/language-tools/pull/1022/files
npm init astro
using template Using Astro.resolve()
shows errors as it doesn't think Astro.resolve exists.
Just use Astro.resolve
in any file.
yarn
Windows
Currently, autocomplete doesn't work for JavaScript inside the script tags, CSS, and SCSS inside Astro components.,
JavaScript Intellisense now works inside the frontmatter but not inside the script tags. It should work in both of the places. And CSS and SCSS IntelliSense should work inside the style tags.
No response
yarn
Windows
VSCode highlights immutable variables, functions, properties, arrays, etc with a dark blue color and mutable with a lighter blue color.
But the extension enables this highlighting only for the line you declare the immutable variable. But when you reference it in the script, it doesn't get highlighted.
In both the lines where you declare it and where you refer to it, an immutable variable should be highlighted with a dark blue color. And the mutable variables should be highlighted with a light blue color (current color shown in Astro components).
---
// Please view the code in VSCode. Highlighting in GitHub is different from VSCode
// The following variables are immutable and highlighed with a darker blue variant
const { name, description, version } = Astro.props;
// The following references of the immutable variables declared above aren't highlighted with a darker blue variant
const data = { name, description, version };
// The following reference of the data variable isn't highlighted with a darker blue variant
console.log(data);
---
If you don't use semicolons, or specifically if the last statement does not have a semicolon, you will see many errors in the template section.
---
let something = 'value'
---
<div></div>
The div
will show as errors.
We should look into doing this ourselves! Almost all Astro users use the VSCode extension, so format-on-save should then be enabled by default.
Typing ( autocompletes to Astro().
Typing ( shouldn't autocomplete to Astro().
yarn
Windows
The JSX {} dynamic operator isn't higlighted
The JSX {} dynamic operator should be higlighted
No response
yarn
Windows
Emmet support is incomplete in Astro components. Only basic completions are supported.
For example, if I type 'button' in a astro component, emmet only shows 'button' tag completion. But in JSX and HTML, it shows button, button:d, button:disabled, button:r, button:reset, button:s and button:submit tag completion.
Advance completions provide by Emmet should be suppported.
No response
It would be great to be able to cmd+click on absolute paths to resources in /public from within astro components. So, for example, clicking on the path in <img src="/images/hero.svg"/>
would open up /public/images/hero.svg
.
Incorporate into VSCode extension.
No response
npm and yarn
Mac
Linting seems off when using vanilla JS in astro components.
Here's an example page that fetches a dog image and renders it using vanilla JS:
dog.astro
<Layout> <!-- let's say this contains the html head and body elements -->
<div id="dog"></div>
<script type="text/javascript">
/* let's not worry about browser support and just use modern JS */
async function getDog() {
try {
const res = await fetch("https://dog.ceo/api/breeds/image/random");
const data = await res.json();
return data.message;
} catch (error) {
console.log(error);
return null;
}
}
async function renderDog() {
const imgSrc = await getDog();
if (imgSrc) {
const parentElement = document.getElementById("dog");
const imgElement = document.createElement("img");
imgElement.src = imgSrc;
parentElement.appendChild(imgElement);
}
}
renderDog();
</script>
</Layout>
This JS is valid, but here would be the output of astro check
(same as the VSCode linting errors):
src/pages/index.astro:9:6 - Expression expected.
6 try {
~~~
src/pages/index.astro:10:8 - Expression expected.
7 const res = await fetch("https://dog.ceo/api/breeds/image/random");
~~~~~
src/pages/index.astro:13:6 - Unexpected token. Did you mean `{'}'}` or `}`?
10 } catch (error) {
~
src/pages/index.astro:16:6 - Unexpected token. Did you mean `{'}'}` or `}`?
13 }
~
src/pages/index.astro:17:4 - Unexpected token. Did you mean `{'}'}` or `}`?
14 }
~
src/pages/index.astro:19:6 - Expression expected.
16 const imgSrc = await getDog();
~~~~~
src/pages/index.astro:21:8 - Expression expected.
18 const parentElement = document.getElementById("dog");
~~~~~
src/pages/index.astro:25:6 - Unexpected token. Did you mean `{'}'}` or `}`?
22 }
~
src/pages/index.astro:26:4 - Unexpected token. Did you mean `{'}'}` or `}`?
23 }
yarn run check
If a variable is assigned to a custom element's attribute, syntax highlighting is absent for the rest of the file.
<my-element id={ id } />
<p>Syntax highlighting is now broken</p>
This is something I do, when I spend most of my time just reading code, is peeking into the source files for API's to see whats under the hood.
This would also be a nice feature to have with the Astro Language extension, where it would apply to looking up components and functions written in the body of the astro file and in the frontmatter block
I truly dont know enough to make any suggestions regarding a solution for this particular problem,
This is the reference to the VSCode docs that describes the feature in more detail:
https://code.visualstudio.com/docs/editor/editingevolved#_peek
And the reference to the API
https://code.visualstudio.com/api/references/vscode-api#DefinitionProvider
I also noticed that this API could be related to the request snowpackjs/astro#1024 and a bit wider afield where we can define the symbols used in the astro files, this can help with the Outline dialog box in the editor window of VSCode
The types of the imported components aren't updated. I'm getting the same TypeErrors when I update the types of a component's prop.
The types of the imported components should be updated as soon as the user updates them
The following Component is valid.
<XElement @is="div">Hello, world!</XElement>
The following HTML element is also valid:
<custom-element @is="div">Hello, world!</custom-element>
However, the @
prefixed attribute is not picked up by syntax highlighting, and will report the following error:
Identifier expected. js(1003)
This will cause the remainder of the element to be interpreted incorrectly. The following error is reported for the closing of the opening tag:
Unexpected token. Did you mean `{'>'}` or `>`?
npm init astro
using template minimal<custom-element @is="div">Hello, world!</custom-element>
to index.astro
Object keys inside the JSX {} dynamic operator aren't highlighted
Object keys inside the JSX {} dynamic operator should be highlighted properly
npm
Mac
When you have an error in the frontmatter TypeScript, the error is not shown.
---
let one = 'one';
let two = 2;
let three: number = one + two;
---
No response
---
const data = await fetch("url")
// Top-level 'await' expressions are only allowed when the 'module' option is set to 'esnext' or 'system', and the 'target' option is set to 'es2017' or higher
---
fetch
in the component script section.https://open-vsx.org
https://github.com/eclipse/openvsx/wiki/Publishing-Extensions
This should hopefully just be an update to the publishing script for the vs code extension, though that doesn't mean it won't require a bit of work.
There are currently no types for the Astro
global in an .astro
file's frontmatter script.
Additionally, Astro.props
currently must be cast. For example:
export interface Props {
value: string;
}
const { value } = Astro.props as Props;
Astro's Language Server should:
Astro
global into each file.declare
the value of Astro.props
if export interface Props
is detected.No response
No response
yarn
Windows
Hover hint isn't working for Javascript inside script tags.
The VSCode extension should enable hover hints for Javascript inside script tags.
No response
When creating a project that reexports Astro components, it would be nice if the types followinged, for example:
Name.astro
---
export interface Props {
name: string;
}
---
index.ts
import Name from './Name.astro';
export {
Name
};
However, currently the props do not follow through into TypeScript.
Build a TypeScript plugin which allows TypeScript files to consume Astro types.
No response
If you have comments in nested elements it gets confused and thinks there are missing closing tags.
<html>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main"></div>
</div>
</body>
</html>
If you use a doctype it shows as an error.
<!doctype html>
Use any doctype.
yarn
Windows
The VSCode extension doesn't provide any linting in Astro components.
A custom Eslint parser should be set up for lining in the Astro components. It should have three types of linting enabled. First, for Javascript in the frontmatter. Then for HTML in the markup and for Javascript in the script tags. And then for Styling (CSS, SCSS, etc.) in the style tags. If possible, it should also have linting for Markdown inside the Markdown components.
No response
VScode extension doesn't properly add an indentation in .astro files. I shot a small video - https://yadi.sk/i/GgeCFijpPbicUg
See the video above.
Partial<>
isn't being respected for the interface of props of a component. The VSCode extension is marking all the properties as required.
The VSCode extension should check if the interface used for components is wrapped with Partail<>
When using fetchContent
without providing a type parameter it is treated as unknown
in which case accessing variables gives you type errors. We should use any
as the default instead so that there are no type errors. You opt-in to strong typing by providing a type.
const thing = Astro.fetchContent('./something');
const val = thing[0].val;
There's a problem with highlighting unused variables inside a script tag. The issue is if a function gets called in onevent attribute, the function is still marked as unused
A function shouldn't be marked as unused and therefore highlighted with a dim color if gets called in an onevent attribute
astro
are you using?0.21.3
npm
Windows
Syntax highlight doesn't seens to be working on Stylus on 0.21.0 and above, maybe this is a problem with Astro extension? I'm using the popular "Tokyo Night" theme, stylus is installed and it is working as expected functionality wise.
I want to be able to import from packages like:
---
import { Something } from 'some/package';
---
Where the package has a ts/js entry that re-exports from other .astro files.
None
No response
<Component name="name" />
// Type '{ name: string; }' is not assignable to type 'AstroBuiltinProps'.
// Property 'containerSelector' does not exist on type 'AstroBuiltinProps'
export interface Props
Auto commenting using Ctrl + /
key doesn't work inside JSX {} operator. The code gets commented using HTML comments instead of JS comments.
Auto commenting using the Ctrl + /
key should work inside JSX {} operator
Inside VS Code, the F2 keybinding allows for symbols to be renamed throughout the file.
---
import timer from 'timer'
const date = timer()
---
<div>
{date.now()}
</div>
In this instance if we wanted to rename date a current workflow would be to search and replace the terms with the new substituted term, whereas the keybinding prefroms this step for the developer.
I propose that this functionality be provided within the Astro language extension.
Current work around is to do either a grep of the file or use the editors search and replace function
further information about this is found on the VS code Docs here: https://code.visualstudio.com/docs/editor/refactoring#_rename-symbol
This is the API for the 'Rename Provider'
https://code.visualstudio.com/api/references/vscode-api#RenameProvider
I would like to help, but this is so far beyond my mere mortalness
yarn
macOS
When using a tsconfig.json
file such as :
{
"compilerOptions": {
"strict": true,
"alwaysStrict": true
}
}
Visual Studio Code highlights all of the JSX and shows this linting error:
JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
In Discord, Matthew2 suspects this might be a bug with the Astro extension.
https://discord.com/channels/830184174198718474/845451724738265138/895704312544653353
npm init astro --template minimal
using template index.astro
and note the lack of linting warnings.tsconfig.json
sample above.index.astro
.npm
Mac
When the prettier plugin is ready, add it to VSCode automatically.
n/a
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.