VSCode 配置
2024-02-23
plugins
code --list-extensions | xargs -L 1 echo code --install-extension
- bradlc.vscode-tailwindcss
- christian-kohler.path-intellisense
- donjayamanne.githistory
- eamodio.gitlens
- esbenp.prettier-vscode
- formulahendry.code-runner
- github.copilot
- github.copilot-chat
- github.vscode-pull-request-github
- helgardrichard.helium-icon-theme
- icrawl.discord-vscode
- mhutchie.git-graph
- ms-azuretools.vscode-docker
- ms-vscode-remote.remote-containers
- ms-vscode.live-server
- prisma.prisma
- simonsiefke.svg-preview
- unifiedjs.vscode-mdx
- yoavbls.pretty-ts-errors
- zolardev.js-runner
snippets
{
// $0 — tab stop final cursor position
// $1, $2 for tab stops — tab stop to specify the cursor location and allow the user to customize the the name of the component
// ${1:label}, ${2:another} for placeholders.
// ${TM_FILENAME_BASE} — variable for getting the current filename
// \t
// /capitalize
// JS & TS import snippets
"Print to console": {
"prefix": "log",
"body": ["console.log($1);", "$2"],
"description": "Log output to console"
},
"JSON stringify": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "jst",
"body": ["<pre>{JSON.stringify($1, null, 2)}</pre>"]
},
"import": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "im",
"body": ["import { $1 } from '$2';"],
"description": "Import a module"
},
"export-all": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "ex",
"body": ["export * from '$2';"],
"description": "Export a module"
},
// React snippets
"React.useState-Snippet": {
"prefix": "state",
"body": ["const [$1, set${1/(.*)/${1:/capitalize}/}] = useState<$2>($3)"],
"description": "useState snippet"
},
"React.useEffect-Snippet": {
"prefix": "effect",
"body": ["useEffect(() => {", " $1", "}, [$2])"],
"description": "useEffect snippet"
},
"React.useRef-Snippet": {
"prefix": "ref",
"body": ["const $1 = useRef<$2>($3)"],
"description": "useRef snippet"
},
"React.useMemo-Snippet": {
"prefix": "memo",
"body": [
"const memoizedValue = useMemo(",
"\t() => ${3:performExpensiveCalculation}(${1:arg1}, ${2:arg2},",
"\t[${1:arg1}, ${2:arg2}]",
")"
],
"description": "useMemo snippet"
},
"React.useCallback-Snippet": {
"prefix": "callback",
"body": ["const $1 = useCallback(($2) => {", " $3", "}, [$4])"],
"description": "useCallback snippet"
},
"React.Typescript-Function-Component": {
"prefix": "fc",
"body": [
"import { FC } from 'react'",
"",
"interface ${TM_FILENAME_BASE}Props {",
"\t$1",
"}",
"",
"const $TM_FILENAME_BASE: FC<${TM_FILENAME_BASE}Props> = ({$2}) => {",
"\treturn <div>$TM_FILENAME_BASE</div>",
"}",
"",
"export default $TM_FILENAME_BASE"
],
"description": "Typescript React Function Component"
},
"React.Typescript-Arrow-Function-Component": {
"prefix": "rfc",
"body": [
"import React from 'react';",
"",
"import styles from './${TM_FILENAME_BASE}.module.scss';",
"",
"interface ${1:${TM_FILENAME_BASE}}Props {",
"\tprop: string;",
"}",
"",
"const ${1:${TM_FILENAME_BASE}} = (props : ${1:${TM_FILENAME_BASE}}Props ) => {",
"",
"\tconst {prop} = props;",
"",
"\treturn (",
"\t\t<div className={styles.root}>",
"\t\t\t{prop}$0",
"\t\t</div>",
"\t);",
"};",
"",
"export default ${1:${TM_FILENAME_BASE}};",
""
],
"description": "Create a React functional component using TypeScript and SCSS modules"
},
"React.Function-Component": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "rfce",
"body": [
"import React from 'react'",
"",
"function ${TM_FILENAME_BASE}() {",
"\treturn <div>${1:${TM_FILENAME_BASE}}${0}</div>",
"}",
"",
"export default ${TM_FILENAME_BASE}"
],
"description": "React function component"
},
"React.Export-Arrow-Function-Component-Default": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "rafc",
"body": [
"import React from 'react'",
"",
"const ${TM_FILENAME_BASE} = () => {",
"\treturn <div>${1:${TM_FILENAME_BASE}}${0}</div>",
"}",
"",
"export default ${TM_FILENAME_BASE}"
],
"description": "React arrow function component"
},
"React.Export-Arrow-Function-Component": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "rafce",
"body": [
"import React from 'react'",
"",
"export const ${TM_FILENAME_BASE} = () => {",
"\treturn <div>${1:${TM_FILENAME_BASE}}${0}</div>",
"}"
],
"description": "React arrow function component export default"
},
"React.Layout-Component": {
"scope": "javascript,typescript,javascriptreact,typescriptreact",
"prefix": "lc",
"body": [
"import React from 'react';",
"",
"const Layout = ({ children }) => {",
" return (",
"\t<>",
"\t\t<${3:Header} />",
"\t\t<${1:Navbar} />",
"\t\t<main>{children}${0}</main>",
"\t\t<${2:Footer} />",
"\t\t</>",
"\t);",
"};",
"",
"export default Layout;"
],
"description": "Export a React Layout Component"
},
// Vue3 snippets
"Vue.body": {
"scope": "javascript,typescript,vue",
"prefix": "<sc",
"body": [
"<script setup lang=\"ts\">",
"const props = defineProps<{",
"\tmodelValue?: boolean,",
"}>()",
"$1",
"</script>",
"",
"<template>",
"\t<div>",
"\t\t<slot/>",
"\t</div>",
"</template>"
]
},
"Vue.template-ref": {
"scope": "javascript,typescript,vue",
"prefix": "tref",
"body": ["const ${1:el} = shallowRef<HTMLDivElement>()"]
},
"Vue.computed": {
"scope": "javascript,typescript,vue",
"prefix": "com",
"body": ["computed(() => { $1 })"]
},
"Vue.watch-effect": {
"scope": "javascript,typescript,vue",
"prefix": "watchE",
"body": ["watchEffect(() => {", "\t$1", "})"]
},
"Vue.if-vitest": {
"scope": "javascript,typescript",
"prefix": "ifv",
"body": [
"if (import.meta.vitest) {",
"\tconst { describe, it, expect } = import.meta.vitest",
"\t${1}",
"}"
]
},
// test snippets
"Test.describe": {
"prefix": "desc",
"body": ["describe('should $1', () => {", "\t$2", "})"],
"description": "describe body"
},
"Test.test": {
"prefix": ["test"],
"body": ["test('should $1', () => {", "\t$2", "})"],
"description": "test body"
},
"Test.it": {
"prefix": ["it"],
"body": ["it('should $1', () => {", "\t$2", "})"],
"description": "test it body"
},
"Test.gwt": {
"prefix": ["gwt"],
"body": [
"describe('test context', () => {",
"\ttest('has no expected errors', {",
"\t\t// given",
" \t\t$0",
" \t\t// when",
"",
" \t\t// then",
"",
"\t});",
"});"
],
"description": "test it body"
},
"Test.snapshot": {
"prefix": ["snapshot"],
"body": [
"import React from 'react'",
"import renderer from 'react-test-renderer'",
"import { $1 } from '../$1'",
"",
"describe('<$1 />', () => {",
"",
" const defaultProps = {}",
" const wrapper = renderer.create(<$1 {...defaultProps} />)",
"",
" test('render', () => {",
" expect(wrapper).toMatchSnapshot()",
" })",
"})"
],
"description": "test snapshot body"
},
// markdown snippets
"Markdown.api-table": {
"scope": "markdown",
"prefix": "table",
"body": [
"<table>",
"<tr>",
"<td width=\"400px\" valign=\"top\">",
"",
"### API",
"",
"Description",
"",
"</td>",
"<td width=\"600px\"><br>",
"",
"```ts",
"// code block",
"```",
"",
"</td>",
"</tr>",
"</table>"
]
}
}