vscode 插件 与 技巧

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