vscode 的使用

一、vscode 快捷键

侧边栏开关 command + B

控制台开关 command + J

全局搜索文件 command + p

文件内搜索 command + F

移到行首/行尾 command + ← / →

当前行上移/下移 option + ↑ / ↓

复制当前行在上方/下方 option + shift + ↑ / ↓

以单词为单位移动 option + ← / →

合并当前行 control + J

选中同样的全部内容 command + shift + L

二、全局搜索命令补充？

几个常见命令

term 显示所有终端，可以给终端命名

view

: 调整到指定行

edt 查看当前打开的标签并提供跳转功能

> 显示并运行命令

三、 vscode的分屏功能

command + \ 编辑器和控制台都可以，快捷键一样

command + 1-9 分屏切换

四、代码片段

代码片段：平常输入一部分内容的时候按回车或者是tab他就能给你补全，这个功能就叫代码片段


log -> console.log('')

switch -> switch (key) {

                  case value:

                    break;

                  default 

                    break;

            }

for -> for (let index = 0; index < array.length; index ++) {

  const element = array[index];

}

自定义代码片段

设置步骤：

1）command + P

> snippet
preferences: configure user snippet 选中
new Global snippet files 选中
输入文件名称，例如js代码片段，回车打开一个新的文件。里面的内容是按照json格式输入的

6）将文中的例子打开，无用的注释去掉，有用的注释打开


{

"Print to console": {

"scope": "javascript,typescript",

"prefix": "log",

"body": [

"console.log('$1');",

"$2"

],

"description": "Log output to console"

}

}

可以看到最外面是一个对象，里面只有一个名为 "Print to console" 的属性。一个属性就代表一个代码片段。现在讲讲文中的这个代码片段。

scope : 设置作用文件，可以扩展 vue，html

prefix：触发代码片段的前缀

body：代码片段主体。其中的 $1,$ 2 为按 tab 键光标依次移动的位置，俗称占位符， ${1:label}。这样就是留有默认值 label。想要多光标就写入数字相同的占位符，例如把$ 2 改为 $1 试试

description：描述这个代码片段的作用,一般用不到，提示信息用最外面的属性即可下面我将上面的改造一下,顺便再加一个：


"Summer的react-类组件": {

"prefix": "mrc",

"body": [

"import * as React from 'react';",

"class ${1:label} extends React.Component {",

" public render() { ",

                    "return (",

              "<div className='${2}'></div>",

                    ")",

                "}",

            "}",

            "export default ${1:label}",

],

"description": "react class Component"

},

"Summer的react-函数组件": {

"prefix": "mrf",

"body": [

"import * as React from 'react';",

            "const ${1:label} = (${2}) => ",

              "(",

                  "<div className='${3}'></div>",

                ")",

            "export default ${1:label}",

],

"description": "react func Component"

}

四、emmet 功能

快捷输出html结构

exp:


div.parent > div.children-first + div.children-two > ul>li*4

1.知道如何生成子标签、同级标签、父标签同级标签的关键符号。 >(子标签), +(同级标签) , ^ (父标签的同级标签)。

例如：div>p+p^div 可描述为 div 有子标签 p ，p 有同级标签 p，p 还有个父级标签的同级标签 div


<div>

        <p></p>

        <p></p>

    </div>

    <div></div>

2.如何给一个元素设置属性、值。属性用中括号[],需要多加注意的是 class , id 这俩个属性可以用 . 和 # 的简写形式。值用{}。例如:div.abc[title=666 index=1]{123} 可描述为: div 的 class 为 abc。定义了俩属性是 title = "666", index = "1" , 值为 123

div.abc.efg.ccc 可描述为 div 的 class 为 abc efg ccc


<div class="abc" title="666" index="1">123</div>

<div class="abc efg ccc"></div>

3.重复某个标签多次用 * 。例如：div*5 可描述为生成 5 个 div 标签

4.迭代值用 $,迭代值在支持的好的 emmet 插件中还能实现更多操作。不过比较小众，就不介绍了。例如：

div.abc$*5 可描述为生成 5 个div 标签并且 class 值依次为 abc1,abc2...abc5

5.添加括号()遍历一组标签,例如：(ul>li*2{$})*2 可描述为生成俩组 ul>li*2{$}, 去掉括号的可描述为 ul 下面有 2 个子标签 li 值分别为 1， 2

五、 css的缩写方式

数值的单位标签可以用首字母 + 数值 + 单位的方式（默认单位是px)

例如：


p10 -> padding: 10px;

pl10 -> padding-left: 10px; 其他三个方向只要把 l 改成 top 的 t ，

right 的 r，bottom 的 b即可

m10 ->margin:10px;

ml10 -> margin-left: 10px;

t10 -> top: 10px;

f10 -> font: 10px;

fw500 ->font-weight: 500;

h10px -> height: 10px;

w10 -> width: 10px;

六、常用的插件

Auto Rename Tag 自动同步双标签
Chinese 语言汉化
ESLint

这个插件需要组合使用，项目必须要支持 eslint 格式化才行，然后将代码保存变为失去焦点保存，所以不符合 eslint 格式的代码自动变成符合 eslint 格式的代码

Open in Browser

html 文件中右键可以选择直接使用浏览器打开

5.Path Intellisense

路径匹配，

6.vetur

vue 重度使用者，没这个插件连个高亮都没有，没有真的不行

7.live-server

这个不是 vscode 插件，可以直接用 npm -g live-server 安装。

开启一个服务，专门用于手机访问静态资源

好用的插件远远不止这一些，像 svg 查看，导入的包大小显示，git 提交的代码提示

vscode 的使用