vscode手册
目录
简介
这里记录 vscode 的配置和技巧
技巧
格式化
因为安装了 Prettier 保存时自动格式化代码.
不格式化保存: F1=>format=>不格式化保存
代码片段 snippets
在 .vscode 文件夹创建文件 vue3.code-snippets
{
"Vue模板": {
"scope": "vue",
"prefix": "vvv",
"body": [
"<template>",
"\t<div>",
"\t\tdata",
"\t</div>",
"</template>\n",
"<script setup lang='ts'>",
"defineOptions({",
"\tname: '$1'",
"})",
"</script>\n",
"<style scoped>\n",
"</style>"
],
"description": "Vue模板"
}
}- 当你输入
vvv, 就会自动出现模板 - 默认光标会出现在
$1的位置, 你可以继续添加$2 - 填写完
$1后使用tab键, 会跳转到$2
插件
- 通用
- 文件处理
.env文件高亮 DotENV- toml 文件 https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml
- shell 格式化 shell-format
- yaml https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml
- xml https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml
- vscode-pdf https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf
- nginx https://marketplace.visualstudio.com/items?itemName=ahmadalli.vscode-nginx-conf
- gitignore https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore
- docker
- 文件夹对比 compare folders
- 文件大小 https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize
- todo https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
- task https://marketplace.visualstudio.com/items?itemName=task.vscode-task
- slidev 用 md 做 ppt https://marketplace.visualstudio.com/items?itemName=antfu.slidev
- k8s https://marketplace.visualstudio.com/items?itemName=ms-kubernetes-tools.vscode-kubernetes-tools
- github-actions https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-github-actions
- remote 系列
- 代码截图 https://marketplace.visualstudio.com/items?itemName=jeff-hykin.polacode-2019
- 文件路径 https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete
- 图片展示 https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview
- 项目切换 https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
- 查看二进制 https://marketplace.visualstudio.com/items?itemName=ms-vscode.hexeditor
- 文件处理
- 前端
- live-server https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
- tailwindcss 工具 https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
i18n插件I18n-ally- 让 TS 识别
*.vue文件 Vue (Official) - css 颜色展示 color highlight
- flex 布局展示 https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet
- iconify 图标 https://marketplace.visualstudio.com/items?itemName=antfu.iconify
- 几乎所有 UI 库的代码提示 common-intellisense
- 格式化
- 文件格式化 Prettier
- js 代码质量检查 ESLint
- css 代码质量检查 Stylelint
- oxc 替代 prettier 和 eslint 插件，暂还不支持 css，但通常使用 tailwind 即可 https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode
- 后端
- EditorConfig 配置文件 https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
- 各个语言 go，python，dotnet
- 其他
配置文件
{
"[typescript]": {
"editor.codeActionsOnSave": {
"source.organizeImports": "always"
}
},
"editor.defaultFormatter": "oxc.oxc-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"explorer.confirmDelete": false,
"files.associations": {
"*.json": "jsonc"
},
"files.autoSave": "afterDelay",
"git.autofetch": true,
"git.confirmSync": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"liveServer.settings.donotShowInfoMsg": true,
"oxc.fmt.experimental": true,
"python.venvPath": ".venv",
"typescript.updateImportsOnFileMove.enabled": "always"
}