feat: h2 snippets package
This commit is contained in:
parent
2d58d8d637
commit
c2cca0df19
16
packages/vscode-snippets/.vscode/launch.json
vendored
Normal file
16
packages/vscode-snippets/.vscode/launch.json
vendored
Normal file
|
@ -0,0 +1,16 @@
|
|||
// A launch configuration that compiles the extension and then opens it inside a new window
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Run Extension",
|
||||
"type": "extensionHost",
|
||||
"request": "launch",
|
||||
"runtimeExecutable": "${execPath}",
|
||||
"args": ["--extensionDevelopmentPath=${workspaceFolder}"]
|
||||
}
|
||||
]
|
||||
}
|
BIN
packages/vscode-snippets/HydrogenLogo.png
Normal file
BIN
packages/vscode-snippets/HydrogenLogo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 19 KiB |
63
packages/vscode-snippets/README.md
Normal file
63
packages/vscode-snippets/README.md
Normal file
|
@ -0,0 +1,63 @@
|
|||
# Hydrogen VSCode Snippets
|
||||
|
||||
## `usq`
|
||||
|
||||
Use `useShopQuery()`
|
||||
|
||||
```ts
|
||||
const {data} = useShopQuery({query: QUERY});
|
||||
```
|
||||
|
||||
## `sq`
|
||||
|
||||
New Storefront query
|
||||
|
||||
```ts
|
||||
import gql from 'graphql-tag';
|
||||
|
||||
const QUERY = gql`
|
||||
query Query {
|
||||
...
|
||||
}
|
||||
`;
|
||||
```
|
||||
|
||||
## `imph`
|
||||
|
||||
Import from hydrogen
|
||||
|
||||
```ts
|
||||
import {...} from '@shopify/hydrogen';
|
||||
```
|
||||
|
||||
## `hp`
|
||||
|
||||
New Hydrogen page
|
||||
|
||||
```tsx
|
||||
function Page {
|
||||
return (
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page;
|
||||
```
|
||||
|
||||
## `ppfv`
|
||||
|
||||
`ProductProviderFragment` variables
|
||||
|
||||
```graphql
|
||||
$country: CountryCode
|
||||
$handle: String!
|
||||
$numProductMetafields: Int = 20
|
||||
$numProductVariants: Int = 250
|
||||
$numProductMedia: Int = 6
|
||||
$numProductVariantMetafields: Int = 10
|
||||
$numProductVariantSellingPlanAllocations: Int = 0
|
||||
$numProductSellingPlanGroups: Int = 0
|
||||
$numProductSellingPlans: Int = 0
|
||||
```
|
40
packages/vscode-snippets/package.json
Normal file
40
packages/vscode-snippets/package.json
Normal file
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "hydrogen-vscode-snippets",
|
||||
"displayName": "@shopify/hydrogen VSCode Snippets",
|
||||
"description": "Snippets for use in @shopify/hydrogen apps",
|
||||
"version": "0.0.0",
|
||||
"publisher": "@shopify",
|
||||
"icon": "HydrogenLogo.png",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"vscode": "^1.28.0"
|
||||
},
|
||||
"categories": [
|
||||
"Snippets"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/Shopify/hydrogen.git",
|
||||
"directory": "packages/snippets"
|
||||
},
|
||||
"contributes": {
|
||||
"snippets": [
|
||||
{
|
||||
"language": "javascript",
|
||||
"path": "./snippets.json"
|
||||
},
|
||||
{
|
||||
"language": "javascriptreact",
|
||||
"path": "./snippets.json"
|
||||
},
|
||||
{
|
||||
"language": "typescript",
|
||||
"path": "./snippets.json"
|
||||
},
|
||||
{
|
||||
"language": "typescriptreact",
|
||||
"path": "./snippets.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
60
packages/vscode-snippets/snippets.json
Normal file
60
packages/vscode-snippets/snippets.json
Normal file
|
@ -0,0 +1,60 @@
|
|||
{
|
||||
"useShopQuery": {
|
||||
"scope": "javascript,typescript,javascriptreact,typescriptreact",
|
||||
"prefix": "usq",
|
||||
"body": ["const {data} = useShopQuery({query: ${2:QUERY}});"],
|
||||
"description": "Use useShopQuery"
|
||||
},
|
||||
"New Storefront query": {
|
||||
"scope": "javascript,typescript,javascriptreact,typescriptreact",
|
||||
"prefix": "sq",
|
||||
"body": [
|
||||
"import gql from 'graphql-tag';",
|
||||
"",
|
||||
"const QUERY = gql`",
|
||||
"\tquery ${1:${TM_FILENAME_BASE/[\\.-]//g}}Query$2 {",
|
||||
"\t\t$3",
|
||||
"\t}",
|
||||
"`"
|
||||
],
|
||||
"description": "New Storefront query"
|
||||
},
|
||||
"importFromHydrogen": {
|
||||
"scope": "javascript,typescript,javascriptreact,typescriptreact",
|
||||
"prefix": "imph",
|
||||
"body": "import { $2 } from '@shopify/hydrogen$0'",
|
||||
"description": "Import from hydrogen"
|
||||
},
|
||||
"New Hydrogen page": {
|
||||
"scope": "javascript,typescript,javascriptreact,typescriptreact",
|
||||
"prefix": "hp",
|
||||
"body": [
|
||||
"function ${1:${TM_FILENAME_BASE/[\\.-]//g}}($2) {",
|
||||
"\treturn (",
|
||||
"\t\t<div>",
|
||||
"\t\t\t$0",
|
||||
"\t\t</div>",
|
||||
"\t)",
|
||||
"}",
|
||||
"",
|
||||
"export default ${1:${TM_FILENAME_BASE/[\\.-]//g}}"
|
||||
],
|
||||
"description": "Create a new Hydrogen Page"
|
||||
},
|
||||
"ProductProviderFragment variables": {
|
||||
"scope": "javascript,typescript,javascriptreact,typescriptreact",
|
||||
"prefix": "ppfv",
|
||||
"body": [
|
||||
"$country: CountryCode",
|
||||
"$handle: String!",
|
||||
"$numProductMetafields: Int = 20",
|
||||
"$numProductVariants: Int = 250",
|
||||
"$numProductMedia: Int = 6",
|
||||
"$numProductVariantMetafields: Int = 10",
|
||||
"$numProductVariantSellingPlanAllocations: Int = 0",
|
||||
"$numProductSellingPlanGroups: Int = 0",
|
||||
"$numProductSellingPlans: Int = 0"
|
||||
],
|
||||
"description": "Output ProductProviderFragment variables"
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue