vscode 插件 与 技巧

2023-06-13,,

lit-html
下载量:3 万
在 JavaScript/TypeScript 的文件中,如果有使用到 HTML 标记,lit-html 提供语法高亮和相应的补全支持。 Git History
下载量:332 万
用来查看 git log 或则一个文件的 git 历史,比较不同的分支,commits。 npm
下载量:119万
npm插件可以检查package.json中所定义的npm模块与实际安装的npm模块是否一致:
package.json中定义了,但是实际未安装
package.json中未定义,但是实际安装了
package.json中定义的版本与实际安装的版本不一致 npm Intellisense
下载量:88 万
VSCode 插件可以在导入语句自动补全 npm 模块名称。 Bracket Pair Colorizer
下载量:95万
Bracket Pair Colorizer可以为代码中的匹配的括号自动着色,以不同的颜色进行区分,这样我们可以轻易地辨别某个代码块的开始与结束。

  

1.jQuery Code Snippets -- jQuery 的代码段.
2.C# Outline -- 给C#所有{}代码块加折叠功能.
3.lnline color picker 多种语言代码中的颜色代码直接显示对应的颜色, 直观方便.
4.productivty power tools 功能大全 双击选择某个词后自动高亮整个代码里同样的词.
5.Viasfora -- 很实用的关键字高亮和彩虹括号, 能让代码看起来非常舒心.

2. 字符补全( ♥ 为常用项 )
+ ♥多项:* , 缩写:ul>li*5
css
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> + ♥Class类:. , 缩写:div.top*2(Class类可以多次使用)
css
<div class="top"></div>
<div class="top"></div> 缩写:p.class1.class2.class3
css
<p class="class1 class2 class3"></p> + ♥Id类:# , 缩写:div#top(一个Id类只能使用一次)
css
<div id="top"></div> 缩写:form#search.wide
css
<form id="search" class="wide"></form> + ♥自增符号:$ , 缩写:ul>li.item$*5
css
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul> + ♥子元素:> , 缩写: nav>ul>li
css
<nav>
<ul>
<li></li>
</ul>
</nav> + ♥兄弟元素:+ , 缩写:div+div >p> span+em
css
<div></div>
<div>
<p><span></span><em></em></p>
</div> + 自定义属性:[]
缩写:p[title=”Hello world”]
css
<p title="Hello world"></p> 缩写:td[rowspan=2 colspan=3 title]
css
<td rowspan="2" colspan="3" title=""></td> 缩写:[a=’value1’ b=”value2”](a,b为属性,value为属性值。具体使用见上面的例子)
css
<div a="value1" b="value2"></div> + 文本:{}
缩写:a{Click me}
css
<a href="">Click me</a>

  

目标:

我们希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容。

方法:

打开VSCODE编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,我们输入选择vue后,VSCODE会自动打开一个名字为vue.json的文件,复制以下内容到这个文件中

{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" data () {",
" return {",
" }",
" },",
"",
" components: {},",
"",
" computed: {},",
"",
" mounted: {},",
"",
" methods: {}",
"}",
"",
"</script>",
"<style>",
"</style>",
"",
],
"description": "Log output to console"
}
}

vscode 快捷键 :https://zhuanlan.zhihu.com/p/62913725

leetcode:https://zhuanlan.zhihu.com/p/56226189

vscode 插件 与 技巧的相关教程结束。

《vscode 插件 与 技巧.doc》

下载本文的Word格式文档,以方便收藏与打印。