VS Code —— 介绍如何配置快捷代码片段和一些自用插件
2024-05-15 11:05:39
VS Code —— 介绍如何配置快捷代码片段和一些自用插件
《工欲善其事，必先利其器》—— 既然点进来了，麻烦你看下去，希望你有不一样的收获~
一、配置代码片段
打开 VS Code，输入快捷键 Ctrl + Shift + p，打开面板：
紧接着输入 snippets 关键词，搜索代码片段的配置项，Enter 回车，然后我们选择，新建全局代码片段文件（如果像我那样已经存在文件的，可以直接选择编辑）：
新建（或编辑）之后你会发现，上面有一段注释是教你怎么写代码片段的：
我们可以在这个文件里，根据示例，配置自己想要的代码片段，这里我也直接提供给大家，可以直接复制、保存。大家也可以根据模板配置其他代码片段：
"a vue2 snippet": {"prefix": "vue2","body": ["<template>"," <div class=\"\"></div>","</template>","","<script>","export default {"," data() {"," return {"," "," }"," }","}","</script>","","<style scoped lang=\"\"></style>"],"description": "a vue2 snippet"
},
"a vue3 snippet": {"prefix": "vue3","body": ["<script setup>","</script>","","<template>"," <div class=\"\"></div>","</template>","","<style scoped lang=\"\"></style>"],"description": "a vue3 snippet"
},
"a vue3 snippet with typescript": {"prefix": "vue3-ts","body": ["<script setup lang=\"ts\">","</script>","","<template>"," <div class=\"\"></div>","</template>","","<style scoped lang=\"\"></style>"],"description": "a vue3 snippet with typescript"
}
这样就配置完了。
二、快捷应用
之后我们随便找一个 vue 文件测试一下，输入 vue，会有相应的提示：
是不是瞬间感觉舒服了起来~
三、一些自用插件
这里就简单推荐一下自己本人日常开发中使用的 VS Code 插件吧，大家有需要的可以拿走，理性做个参考就行了哈~
- Any-rule：正则表达式插件
- Auto Close Tag：自动匹配标签
- Auto Rename Tag：自动重命名标签
- Auto Import：自动引入文件
- Bracket Pair Colorization：彩色括号标识
- Code Runner：代码运行插件
- Carbon-now-sh：生成代码块截图插件
- Code Spell Checker：代码拼写检测
- EditorConfig for VS Code：这个就不用多说了吧
- ESLint
- Element-ui-helper：这个是饿了么框架的辅助插件
- Git Lens：行代码溯源插件
- Git Graph：仓库图形化插件
- Git History：仓库提交历史插件
- Github Theme：编辑器主题
- Highlight Matching Tag：标签高亮标识
- Import Cost：引入文件计算大小插件
- JavaScript code snippets
- JavaScript and Typescript Nightly
- Live Server
- Material Icon Theme：文件图标插件
- Open in browser
- Power Mode：输入字数统计插件
- Svelte for VS Code：svelte提示插件
- Tailwind CSS IntelliSense：tailwind框架提示插件
- TODO Highlight：待定高亮插件
- Volar
- VS Code Counter：代码量统计插件
- Version Lens：依赖包版本查看插件
四、File Nesting Config for VS Code
插件库搜索：File Nesting，认准 antfu 开发的插件，安装：
这玩意儿，配置完之后，非常的巴适！
打开 settings.json ，配置下面的选项：
"fileNestingUpdater.autoUpdate": true,"fileNestingUpdater.autoUpdateInterval": 720,"fileNestingUpdater.promptOnAutoUpdate": true,"fileNestingUpdater.upstreamRepo": "antfu/vscode-file-nesting-config","fileNestingUpdater.upstreamBranch": "main","explorer.fileNesting.enabled": true,"explorer.fileNesting.expand": false,"explorer.fileNesting.patterns": {"*.asax": "$(capture).*.cs, $(capture).*.vb","*.ascx": "$(capture).*.cs, $(capture).*.vb","*.ashx": "$(capture).*.cs, $(capture).*.vb","*.aspx": "$(capture).*.cs, $(capture).*.vb","*.bloc.dart": "$(capture).event.dart, $(capture).state.dart","*.c": "$(capture).h","*.cc": "$(capture).hpp, $(capture).h, $(capture).hxx","*.component.ts": "$(capture).component.html, $(capture).component.spec.ts, $(capture).component.css, $(capture).component.scss, $(capture).component.sass, $(capture).component.less","*.cpp": "$(capture).hpp, $(capture).h, $(capture).hxx","*.cs": "$(capture).*.cs","*.cshtml": "$(capture).cshtml.cs","*.csproj": "*.config, *proj.user, appsettings.*, bundleconfig.json","*.css": "$(capture).css.map, $(capture).*.css","*.cxx": "$(capture).hpp, $(capture).h, $(capture).hxx","*.dart": "$(capture).freezed.dart, $(capture).g.dart","*.ex": "$(capture).html.eex, $(capture).html.heex, $(capture).html.leex","*.go": "$(capture)_test.go","*.java": "$(capture).class","*.js": "$(capture).js.map, $(capture).*.js, $(capture)_*.js","*.jsx": "$(capture).js, $(capture).*.jsx, $(capture)_*.js, $(capture)_*.jsx","*.master": "$(capture).*.cs, $(capture).*.vb","*.module.ts": "$(capture).resolver.ts, $(capture).controller.ts, $(capture).service.ts","*.pubxml": "$(capture).pubxml.user","*.resx": "$(capture).*.resx, $(capture).designer.cs, $(capture).designer.vb","*.tex": "$(capture).acn, $(capture).acr, $(capture).alg, $(capture).aux, $(capture).bbl, $(capture).blg, $(capture).fdb_latexmk, $(capture).fls, $(capture).glg, $(capture).glo, $(capture).gls, $(capture).idx, $(capture).ind, $(capture).ist, $(capture).lof, $(capture).log, $(capture).lot, $(capture).out, $(capture).pdf, $(capture).synctex.gz, $(capture).toc, $(capture).xdv","*.ts": "$(capture).js, $(capture).d.ts.map, $(capture).*.ts, $(capture)_*.js, $(capture)_*.ts","*.tsx": "$(capture).ts, $(capture).*.tsx, $(capture)_*.ts, $(capture)_*.tsx","*.vbproj": "*.config, *proj.user, appsettings.*, bundleconfig.json","*.vue": "$(capture).*.ts, $(capture).*.js, $(capture).story.vue","*.xaml": "$(capture).xaml.cs","+layout.svelte": "+layout.ts,+layout.ts,+layout.js,+layout.server.ts,+layout.server.js","+page.svelte": "+page.server.ts,+page.server.js,+page.ts,+page.js ",".clang-tidy": ".clang-format, .clangd, compile_commands.json",".env": "*.env, .env.*, .envrc, env.d.ts",".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",".project": ".classpath","BUILD.bazel": "*.bzl, *.bazel, *.bazelrc, bazel.rc, .bazelignore, .bazelproject, WORKSPACE","CMakeLists.txt": "*.cmake, *.cmake.in, .cmake-format.yaml, CMakePresets.json","I*.cs": "$(capture).cs","artisan": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, server.php, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, webpack.mix.js, windi.config.*","astro.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*","cargo.toml": ".clippy.toml, .rustfmt.toml, cargo.lock, clippy.toml, cross.toml, rust-toolchain.toml, rustfmt.toml","composer.json": ".php*.cache, composer.lock, phpunit.xml*, psalm*.xml","default.nix": "shell.nix","deno.json*": "*.env, .env.*, .envrc, api-extractor.json, env.d.ts, import-map.json, import_map.json, jsconfig.*, tsconfig.*, tsdoc.*","dockerfile": ".dockerignore, docker-compose.*, dockerfile*","flake.nix": "flake.lock","gatsby-config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, gatsby-browser.*, gatsby-node.*, gatsby-ssr.*, gatsby-transformer.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*","gemfile": ".ruby-version, gemfile.lock","go.mod": ".air*, go.sum","go.work": "go.work.sum","mix.exs": ".credo.exs, .dialyzer_ignore.exs, .formatter.exs, .iex.exs, .tool-versions, mix.lock","next.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, next-env.d.ts, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*","nuxt.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*","package.json": ".browserslist*, .circleci*, .codecov, .commitlint*, .cz-config.js, .czrc, .dlint.json, .dprint.json, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lighthouserc.*, .lintstagedrc*, .markdownlint*, .mocha*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .versionrc*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, Procfile, apollo.config.*, appveyor*, ava.config.*, azure-pipelines*, bower.json, build.config.*, commitlint*, crowdin*, cypress.*, dangerfile*, dlint.json, dprint.json, firebase.json, grunt*, gulp*, histoire.config.*, jasmine.*, jenkins*, jest.config.*, karma*, lerna*, lighthouserc.*, lint-staged*, nest-cli.*, netlify*, nodemon*, nx.*, package-lock.json, package.nls*.json, phpcs.xml, playwright.config.*, pm2.*, pnpm*, prettier*, pullapprove*, puppeteer.config.*, pyrightconfig.json, release-tasks.sh, renovate*, rollup.config.*, stylelint*, tslint*, tsup.config.*, turbo*, typedoc*, unlighthouse*, vercel*, vetur.config.*, vitest.config.*, webpack*, workspace.json, xo.config.*, yarn*","pubspec.yaml": ".metadata, .packages, all_lint_rules.yaml, analysis_options.yaml, build.yaml, pubspec.lock, pubspec_overrides.yaml","pyproject.toml": ".pdm.toml, pdm.lock, pyproject.toml","quasar.conf.js": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, quasar.extensions.json, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*","readme*": "authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors*","remix.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, remix.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*","rush.json": ".browserslist*, .circleci*, .codecov, .commitlint*, .cz-config.js, .czrc, .dlint.json, .dprint.json, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lighthouserc.*, .lintstagedrc*, .markdownlint*, .mocha*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .versionrc*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, Procfile, apollo.config.*, appveyor*, ava.config.*, azure-pipelines*, bower.json, build.config.*, commitlint*, crowdin*, cypress.*, dangerfile*, dlint.json, dprint.json, firebase.json, grunt*, gulp*, histoire.config.*, jasmine.*, jenkins*, jest.config.*, karma*, lerna*, lighthouserc.*, lint-staged*, nest-cli.*, netlify*, nodemon*, nx.*, package-lock.json, package.nls*.json, phpcs.xml, playwright.config.*, pm2.*, pnpm*, prettier*, pullapprove*, puppeteer.config.*, pyrightconfig.json, release-tasks.sh, renovate*, rollup.config.*, stylelint*, tslint*, tsup.config.*, turbo*, typedoc*, unlighthouse*, vercel*, vetur.config.*, vitest.config.*, webpack*, workspace.json, xo.config.*, yarn*","shims.d.ts": "*.d.ts","svelte.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, mdsvex.config.js, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*","vite.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*","vue.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*"},
虽然有点多，但是可以拯救你的项目目录不再混乱！效果如下：
整体效果就是这样，希望你会喜欢哟。感谢你的阅读，愿你的未来一片光明~
VS Code —— 介绍如何配置快捷代码片段和一些自用插件相关推荐
- VSCODE 简单配置用户代码片段
利用VSCODE 配置用户代码片段功能,实现自定义生成一段代码的快捷键 例如:生成一个 Vue 实例,每次都要写这些很麻烦,想一键生成 new Vue({el: '#root',data: {}, } ...
- vscode配置用户代码片段（快捷键自定义代码模板）
vscode 配置 用户代码片段入口如下 分享两个我配置的 1.vue 文件代码初始化,有些已经注释了,可以自行调整 {// Place your snippets for Vue here. Eac ...
- lab 常用配置参数 代码片段
1.--leaks 启用内存泄漏检测,并在检测到时向您发出警告 2.代码片段 experiment('getting started with hapi testing,', () => {// ...
- 【基础知识】rubymine设置自定义快捷代码片段
我平常用日志比较多,重复写logger.info很麻烦,想试试rubymine的代码自定义片段功能,但是中文社区的文档根本没有.后来想到其实同是jetbrain产品下的phpstorm应该有解决方案, ...
- webstorm中配置vue代码片段
ctrl+shift+A 输入live 上述红框插入一下代码:<template> #[[$END$]]# </template><script> export d ...
- 将 Visual Studio 的代码片段导出到 VS Code
导语 和原文作者一样,水弟我现在也是使用 VS Code 和 Rider 作为主力开发工具,尤其是 VS Code 可以跨平台,又有丰富的插件支持和多种编程语言支持.当我从 VS 转移到以 VS Co ...
- 在 Visual Studio Code 中添加自定义的代码片段
无论是那个编辑器,如果能够添加一些自定义代码片段,能够大大提升代码的输入效率. 本文介绍如何在 Visual Studio Code 中添加自定义代码片段. 本文内容 Visual Studio Co ...
- 对文本根据特殊字符进行分段代码_如何优雅地配置快应用的代码片段
本文使用 Zhihu On VSCode 创作并发布 作为一名程序员,在编码的过程中,难免会遇到要写些重复性的代码:假如每次都重新码一遍,既浪费了时间,也有伤身体.倘若可以配置一个像快捷键一样,输入简 ...
- 【C语言初级阶段学习1】使用vscode运行C语言，vscode配置环境超详细过程（包括安装vscode和MinGW-W64安装及后续配置使用的详细过程，vscode用户代码片段的使用）[考研专用]
vscode配置c语言环境 前言 一.下载vscode和MinGW-W64和安装过程 1. vscode部分 1.1 vscode下载安装过程 1.2 vscode下载插件 2. MinGW-W64部 ...
- Vscode快捷生成Vue3代码片段｜自定义代码块
目的是输入vue3回车,显示如下代码: 如何设置 : 点击vscode左下角的齿轮 选择配置用户代码片段, 新建,命名为vue3(注:命名为XX之后输入XX回车就可以生成XX对应的模版), 创建内容如 ...
最新文章
- modprobe和insmod区别
- RabbitMQ三种订阅模式
- Java程序员必备：序列化全方位解析
- 日志为什么不入数据库
- sklearn字典特征提取
- 2021牛客暑期多校训练营6 :D Gambling Monster 期望dp + fwt + cdq分治
- Excel 枢纽图(Pivot)快速入门与示例
- [DFS|回溯法] leetcode 17 电话号码的字母组合
- 运维部门工作总结_IT部门运维年终总结报告
- php服务器状态监测,PHP网站状态在线监控源码
- Android四大组件——BroadcastReceiver普通广播、有序广播、拦截广播、本地广播、Sticky广播、系统广播
- 【配准】2020年“基于深度学习的医学影像配准”期刊论文速览（PR,TMI,MIA）
- σ-代数、可测集、测度、可测空间、概率空间、随机变量、概率分布函数
- 惠普omen测试软件,性能测试：高品质体验主流游戏
- 29岁，从绝望崩溃到年入50万：这个技能，决定你5年后的人生！
- 偏倚的主要类型_医学科研中偏倚的分类有哪些？
- intell idea 快速启动设置
- 31.基类的公有成员在派生类中的访问权限由 决定.java_基类的公有成员在派生类中的访问权限由派生方式决定。（)...
- 深入理解flutter的编译原理与优化
- 2023年 ChatGPT 研究报告