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