美文网首页
vscode使用小技巧

vscode使用小技巧

作者: secret123 | 来源:发表于2018-10-20 15:28 被阅读0次

新建,保存和预览文件

新建:在本地新建文件夹(目录),并将其拖至vscode中,再在vscode中对该目录新建相应文件,如html,css,js文件。
保存:按保存或者“ctrl+s”保存文件。平时可将保存状态设置为自动保存
预览:需要预览文件时,右键选择“open in default browser”或者按快捷键:“ALT+B”。(如果右键没有open in default browser,则需要安装插件,左侧边栏第五个按钮打开,在应用商店中搜索open in browser,然后点击安装,再重载窗口)

简写技巧

  1. H5框架简写:
    !+TAB按键 或者 htlm:5+TAB按键
  2. <div></div>简写:
    div+TAB按键
  3. <div class=”red”></div>简写:
    div.red+TAB按键
  4. Class为red的div标签里面包含一个a标签的简写:
    div.red>a+TAB按键 //大于号表示父子关系
  5. 10个Class为red的div标签里面都包含一个a标签的简写:
    div.red*10>a+TAB按键
  6. 10个Class为red的div标签里面都包含一个a标签,a的href标签不同的简写:
    div.red*10>a【href=”#page$”】+TAB按键(不同用$表示)
  7. 10个Class为red的div标签里面都包含一个a标签,a的href标签不同,a中间的文字也不同的简写:
    div.red*10>a【href=”#page$”】{文字$}+TAB按键(不同用$表示)
  8. n个标签,标签之间有文字,文字不同时的简写:
    div{}

快捷键

命令面板:ctrl+shift+p //直接搜索命令然后按回车执行命令
 eg:ctrl+shift+p打开命令面板,搜索open in default browser按回车后即可预览网页效果。
**快速搜索文件:ctrl+p

配置vscode

文件--首选项--设置。
然后在右侧编写你的样式,如果不知道语法,可在搜索框中搜错相应的英文关键字,然后按照左边默认的样式在右边编写你想要的样式

将vscode设置为git的默认编辑器:

方法一: 通过在命令提示符窗口中执行该命令来设置默认的git编辑器:
git config --global core.editor "'D:\Users\10218\AppData\Local\Programs\Microsoft VS Code\Code.exe' -w"
方法二:
如果想在命令行中打开Code,打开~目录下的.bashrc
gedit .bashrc
在最后添加下面一行
alias code='/usr/share/VSCode-linux-x64/Code'
重新打开命令行,输入code就可以打开Visual Studio Code了

相关文章

  • vscode使用小技巧

    新建,保存和预览文件 新建:在本地新建文件夹(目录),并将其拖至vscode中,再在vscode中对该目录新建相应...

  • VSCode 使用技巧

    1. 修改当前行颜色: 1. go to file > Preferences > settings2. type...

  • vscode 使用技巧

    1、注释 单行注释:'ctrl + /’ 多行注释(块注释):'Alt+Shift+A’ 2、使用clg 可以快速...

  • VSCode使用技巧

    VSCode所有的快捷键,都可以进行自定义,只需要通过设置->键盘快捷键方式->搜索快捷键->双击键入自定义快捷方...

  • Vscode使用技巧

    1,npm run lint -- --fix 运行eslint检查代码错误

  • vscode使用技巧

    一、创建新建文件模板: 1.打开vscode,找到用户代码片段 2.在当前工作空间下创建代码片段,也可设置全局代码...

  • vscode 使用技巧

    之前笔者写过几篇关于vscode的文章 鱼和熊掌:VSCode+Vim , VSCode Vim进阶操作,VSC...

  • VSCode 使用技巧

    (一) 插件相关 通用插件 标签自动成对修改Auto Rename Tag 目标文件自动联想AutoFileNa...

  • vscode使用技巧

    1、选中中划线

  • vscode小技巧

    1.使用html:5快速调出h5的模板结构     在提示框中选择html:5即可导入h5的结构模板 2.mar...

网友评论

      本文标题:vscode使用小技巧

      本文链接:https://www.haomeiwen.com/subject/behpzftx.html