插件篇

Element

除了方便拼写 html 外,还提供向外扩展选择、向内扩展选择、跳转到匹配的标签、包裹选中的 html 代码，需要自己覆盖快捷键

All Autocomplete

这是一个代码提示工具,可以自动解析关键字，比如 html、js、json 这些,省区许多手动拼写的苦恼

Auto Rename Tag

方便修改标签的名字

Bracket Pair Colorizer

高亮匹配的标签

Bracket Select

alt + a 快速选中(),{},[],"",''里面的内容

对于 js,alt + shift + → 扩展选择 alt + shift + ← 减少选择

Chinese (Simplified) Language Pack for Visual Studio Code

汉化 VSCode,很实用

Live Server

单独的 html 文件也可以随着代码的更改在浏览器中自动刷新

Moonlight

高颜值 VSCode 主题插件，在掘金上发的沸点，被问的最多的就是这个问题

Workspace Sidebar

可以切换工作区间,一个工作区间可以同时打开多个关联项目,这样就不用打开多个 VSCode 窗口了，插件安装后，侧边栏会多出一个标志

首先要配置插件读取code-workspace文件的地址

将需要文件添加到当前工作区,然后将当前工作区存储到刚才设置的文件内

这时候点击插件图标，就可以看到刚才保存的工作区了

添加新的工作区一定要把当前工作区关闭，不然会相互影响

Vetur、Prettier

如果是 Vue 就用 Vetur，其它文件用 Prettier

选择格式文件的方式,鼠标右键点击编辑器

鉴于多人协作开发，使用默认的格式化配置就好了

Vetur

自动导入

"vetur.completion.tagCasing": "initial", 设置这个后可以在 tempalte 里面导入类似"CountDown",同时在 script 里也可以自动添加相关语句

script 中也可以自动导入,例如 mapState

警告

"vetur.ignoreProjectWarning": true, 禁止 vetur 弹出警告

Vue Jump to Tag

为以下命令绑定快捷键

extension.jumptotemplate => Ctrl+1

extension.jumptoscript => Ctrl+2

extension.jumptostyle => Ctrl+3

Ctrl+1、Ctrl+2、Ctrl+3 原来绑定的命令作用不大

vue-helper

按下 F12,可以从 <template> 跳转到 <script> 的定义处，比如 data 里面的属性

import "文件夹名" 可以自动导入

alt + x 选中快捷键,可以用于 template、script、style，选择方法时很好用

Vue CSS Peek

按下 F12,可以从 <template> 跳转到 <style> 的定义处

样式不能单独一个文件且要放在最后

打开 settings.json

Ctrl + p,输入">",选择"首选项:打开设置"

右上角有三个图标,最左侧的可以转换到 UI 界面

快捷键

文件=>首选项=>键盘快捷方式

解绑

鼠标右键,选择"删除键绑定"

按键

复制一行: 直接 ctrl+c 就行，光标可在任何位置，没必要用鼠标选中一行

选中相同: Ctrl+d

选中所有相同: Ctrl+Shift+l

回退光标操作: Ctrl+u

文件夹查找: Ctrl+shift+f

多行注释：alt+shift+A

文件资源管理器: Ctrl+shift+e

移动到文档的开头和末尾: Ctrl+Home/End

跳到函数的定义处: f12

跳转到函数的实现处: Ctrl+f12

查看引用: Shift + F12

函数或者变量出现的地方就都会被修改: F2

多行选中: Shift + alt + 鼠标左键

扩展/缩小选择: Shift+Alt+Left 和 Shift+Alt+Right

定义处缩略图: 只看一眼而不跳转过去 Alt+F12

Emment 自定义快捷键

向外扩展选择: ctrl+alt+u

向内扩展选择: ctrl+alt+i

跳转到匹配的标签: ctrl+alt+p

包裹选中的 html 代码: ctrl+alt+w

Markdown

实时预览

Ctrl + p ,输入'>' , 选择'打开侧边预览'

插入本地图片

相对路径

    ![选择格式文件的方式](./image/choose-formatter-plugin.png)

绝对路径

 ![猫](file:///H:/mao/va.mp4)

双屏使用

再也不用一个屏幕分成三列了

ctrl + shift + P

Workspace: Duplicate As Workspace in New Window

jsconfig.json

文档地址:code.visualstudio.com/docs/langua…

vue 项目上增加这个文件,在导入代码的语句处,按下 F12 就可以直接跳转了,注意 vue 文件需要些后缀

基本模板

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

增强前端效率的VSCode使用篇

插件篇