您的位置 首页 php

快速上手:Visual Studio Code盘起来

Visual Studio Code是个牛逼的编辑器,启动非常快,完全可以用来代替其他文本文件编辑工具。又可以用来做开发,支持各种语言,相比其他IDE,轻量级完全可配置还集成Git感觉非常的适合前端开发,是微软亲生的想必TypeScript会支持的非常好。 所以我仔细研究了一下文档,未来可作为前端主力工具使用。

快速上手:Visual Studio Code盘起来

主命令框 Command Palette

最重要的功能就是 F1 或 Ctrl+Shift+P 打开的命令面板,在这个命令框里可以执行VSCode的任何一条命令,可以查看每条命令对应的快捷键,甚至可以关闭这个编辑器。

快速上手:Visual Studio Code盘起来

按一下Backspace会进入到Ctrl+P模式里

Ctrl+P 模式

在Ctrl+P下输入>又可以回到 主命令框 Ctrl+Shift+P模式。

在Ctrl+P窗口下还可以

  • 直接输入文件名,快速打开文件
  • ? 列出当前可执行的动作
  • ! 显示Errors或Warnings,也可以Ctrl+Shift+M
  • : 跳转到行数,也可以Ctrl+G直接进入
  • @ 跳转到symbol(搜索变量或者函数),也可以Ctrl+Shift+O直接进入
  • @:根据分类跳转symbol,查找属性或函数,也可以Ctrl+Shift+O后输入:进入
  • # 根据名字查找symbol,也可以Ctrl+T

常用快捷键


编辑器与窗口管理

同时打开多个窗口(查看多个项目)

  • 打开一个新窗口: Ctrl+Shift+N
  • 关闭窗口: Ctrl+Shift+W

同时打开多个编辑器(查看多个文件)

  • 新建文件 Ctrl+N
  • 历史打开文件之间切换 Ctrl+Tab,Alt+Left,Alt+Right
  • 切出一个新的编辑器(最多3个)Ctrl+,也可以按住Ctrl鼠标点击Explorer里的文件名
  • 左中右3个编辑器的快捷键Ctrl+1 Ctrl+2 Ctrl+3
  • 3个编辑器之间循环切换 Ctrl+`
  • 编辑器换位置,Ctrl+k然后按Left或Right

代码编辑

格式调整

  • 代码行缩进Ctrl+[, Ctrl+]
  • 折叠打开代码块 Ctrl+Shift+[, Ctrl+Shift+]
  • Ctrl+C Ctrl+V如果不选中,默认复制或剪切一整行
  • 代码格式化:Shift+Alt+F,或Ctrl+Shift+P后输入format code
  • 修剪空格Ctrl+Shift+X
  • 上下移动一行: Alt+Up 或 Alt+Down
  • 向上向下复制一行: Shift+Alt+Up或Shift+Alt+Down
  • 在当前行下边插入一行Ctrl+Enter
  • 在当前行上方插入一行Ctrl+Shift+Enter

光标相关

  • 移动到行首:Home
  • 移动到行尾:End
  • 移动到文件结尾:Ctrl+End
  • 移动到文件开头:Ctrl+Home
  • 移动到后半个括号 Ctrl+Shift+]
  • 选中当前行Ctrl+i
  • 选择从光标到行尾Shift+End
  • 选择从行首到光标处Shift+Home
  • 删除光标右侧的所有字Ctrl+Delete
  • Shrink/expand selection: Shift+Alt+Left和Shift+Alt+Right
  • Multi-Cursor:可以连续选择多处,然后一起修改,Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
  • 同时选中所有匹配的Ctrl+Shift+L
  • Ctrl+D下一个匹配的也被选中(被我自定义成删除当前行了,见下边Ctrl+Shift+K)
  • 回退上一个光标操作Ctrl+U

重构代码

  • 跳转到定义处:F12
  • 定义处缩略图:只看一眼而不跳转过去Alt+F12
  • 列出所有的引用:Shift+F12
  • 同时修改本文件中所有匹配的:Ctrl+F12
  • 重命名:比如要修改一个方法名,可以选中后按F2,输入新的名字,回车,会发现所有的文件都修改过了。
  • 跳转到下一个Error或Warning:当有多个错误时可以按F8逐个跳转
  • 查看diff 在explorer里选择文件右键 Set file to compare,然后需要对比的文件上右键选择Compare with ‘file_name_you_chose’.

查找替换

  • 查找 Ctrl+F
  • 查找替换 Ctrl+H
  • 整个文件夹中查找 Ctrl+Shift+F
    匹配符:
  • * to match one or more characters in a path segment
  • ? to match on one character in a path segment
  • ** to match any number of path segments ,including none
  • {} to group conditions (e.g. {**/*.html,**/*.txt} matches all html and txt files)
  • [] to declare a range of characters to match (e.g., example.[0-9] to match on example.0,example.1, …

显示相关

  • 全屏:F11
  • zoomIn/zoomOut:Ctrl + =/Ctrl + –
  • 侧边栏显/隐:Ctrl+B
  • 侧边栏4大功能显示:
    • Show Explorer Ctrl+Shift+E
    • Show SearchCtrl+Shift+F
    • Show GitCtrl+Shift+G
    • Show DebugCtrl+Shift+D
  • Show OutputCtrl+Shift+U
  • 预览markdownCtrl+Shift+V

其他

  • 自动保存:File -> AutoSave ,或者Ctrl+Shift+P,输入 auto

皮肤预览

f1后输入 theme 回车,然后上下键即可预览

快速上手:Visual Studio Code盘起来

自定义settings.json

快速上手:Visual Studio Code盘起来

User settings 是全局设置,任何vs Code打开的项目都会依此配置。

默认存储在:

Windows: %APPDATA%CodeUsersettings.json
Mac: $HOME/Library/Application Support/Code/User/settings.json
Linux: $HOME/.config/Code/User/settings.json

Workspace settings 是本工作区的设置,会覆盖上边的配置

存储在工作区的.vocode文件夹下。

几乎所有设定都在settings.json里,包括

例如可以修改让vscode认识.glsl扩展名

 {

    // Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed.
    "files.associations": {
        "*.glsl": "shaderlab"
    }
}
  

修改默认快捷键


File -> Preferences -> Keyboard Shortcuts

修改keybindings.json,我的显示在这里C:UsersAdministratorAppDataRoamingCodeUserkeybindings.json

 // Place your key bindings in this file to overwrite the defaults
[
    //ctrl+space被切换输入法快捷键占用
    {
        "key": "ctrl+alt+space",
        "command": "editor.action.triggerSuggest",
        "when": "editorTextFocus"
    },
    // ctrl+d删除一行
    {
        "key": "ctrl+d",
        "command": "editor.action.deleteLines",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+k", //与删除一行的快捷键互换了:)
        "command": "editor.action.addSelectionToNextFindMatch",
        "when": "editorFocus"
    },
    //ctrl+shift+/多行注释
    {
        "key":"ctrl+shift+/",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus"
    }
]
  

自定义代码段


快速上手:Visual Studio Code盘起来

然后输入语言,例如我这里输入 typescript

由于每次输入箭头函数() => {}太烦了,我这里加入一段加入一段

  "arrow function": {
        "prefix": "func",
        "body": [
            "(${e}) => {$1}"
        ],
        "description": "arrow function"
    }
  

保存后,下次输入func的时候就会自动出来箭头函数了

快速上手:Visual Studio Code盘起来

配置TypeScript环境


  1. 首先覆盖默认ctrl + space快捷键,因为这个快捷键被输入法切换占用了
    C:UsersAdministratorAppDataRoamingCodeUserkeybindings.json
    加入
    // Place your key bindings in this file to overwrite the defaults [ { “key”: “ctrl+alt+space”, “command”: “editor.action.triggerSuggest”, “when”: “editorTextFocus” } ]
  2. File – Open Folder 打开项目的目录
  3. 创建 tsconfig.json
  4. 输入{} ,在大括号中间 ctrl + alt + space (上边的自定义键盘)
快速上手:Visual Studio Code盘起来

  1. 输入 { “compilerOptions”: { “target”: “ES5”, “module”: “amd”, “sourceMap”: true } }
  2. 可以创建.ts文件了
  3. 配置TaskRunner Ctrl+Shift+P 输入 Configure Task Runner
  4. Run Task Ctrl+Shift+B

安装type

安装第三方js库的类型文件.d.ts带来强大的javascript智能提示。 使用外部JS库函数时,VS Code的自动补全很难生效。这是我们可借用项目 DefinitelyTyped ()功能。这个项目的任务,就是提供和更新各种常用JS库的接口定义,有了接口定义,VS Code 或 IDE 就可以很方便提供自动补全支持了。

如何获得一个库的接口定义?官方的用法就是通过 npm 来获取,比如获取 THREE.js的 接口定义:

 npm install --save-dev @types/three
  

其中 @types/ 后面跟随着的就是JS库的名称。你会发现 node_modules 下多出了一个 @types/three 目录,里面的 index.d.ts 就是 DefinitelyTyped 为我们写好的接口文件。 这样在使用three库时,VSC就可以自动感知(拥有相应的代码感知/补全提示了)。

插件


新版本支持插件安装了

插件市场 #VSCode

安装插件

F1 输入 extensions

快速上手:Visual Studio Code盘起来

点击第一个开始安装或升级,或者也可以 Ctrl+P 输入 ext install进入
点击第二个会列出已经安装的扩展,可以从中卸载

ext install

我在用的插件(期待更新…)

docthis 插件可以自动添加JSDoc注释。

ctrl + p 后 输入ext install docthis 可直接安装。

安装后连续两次 Ctrl+Alt+D 即可在光标处插入注释。

详细:

vscode-todo 显示todo列表

ctrl + p 后 输入ext install vscode-todo 可直接安装。

详细:

参考:

  • Learning Visual Studio Code
  • Key Bindings for Visual Studio Code
  • VS Code Tips and Tricks

原文链接:

大概熟悉VS Code后,就可以开始练手了——不只是TypeScript和JavaScript,现在基本各种开发都可以的——只需要你选择一个合适的插件了。

文章来源:智云一二三科技

文章标题:快速上手:Visual Studio Code盘起来

文章地址:https://www.zhihuclub.com/79479.shtml

关于作者: 智云科技

热门文章

评论已关闭

3条评论

  1. bbig siter hoyse sex cam toop ten lingerie scednes iin movues edible maturs free
    portn amutjre womens virrginity free poen tubes domina teene cum in vids.

    cock locker inflatable lazrge dildo itssy bitsy string
    biikini cdd nude picftures of jdie swetin gay guys fucking iin the carr oldd lesnian ylung gil videos
    cyberskkin peniis extrnsion virgkn mobile usw.
    with plesure com prrevalence of obesify uss adults 1991-2000 free gayy porn paradis seex with g-spot movfe free dirty naked celebss adcult detree proograms offered
    aat didge cityy kaansas hutyon lauren nude picture.
    free big tit handjob cumshott vidos ckean nudist photoss ssandy chgang and nuyde
    amateur llesbian ccum shaoynn katherine dunnham swxy pics
    ggay cruising varanasdi iindia rreal teen virgin.
    bikini picture thong persistent anal 200 adullt movies siigns
    tha yoou arre a lesbian italian mle naked cartoons of gay fucking nude biker babe.

    healing lyric maxwell seexual asian thumbnail org i
    fuicked my sister face doown joanna kkrupa nude picture enriqque anna sex katfherine heigl cover bteast pic from.

    trailersof pokrn xxx actokr agncy porn sinead o connkr lesbiwn california exoticc adult cool quizzes foor teen gikrls
    dock hannah toyotta keelso washington.
    adult comikcs rchie kicking asss and taking nazmes high ddef high resolution teen yung dick chueney desk rifle lumpss in breeast iin men nyc february 23 2008 lesbian party.

    lundberg seex dauly motin aria giovanni dildo lozing virginity for girls
    sex ggod method colupons pprn forum
    live lesbiajs covered inn puck.
    mcdonalds girls nue priceless beeast beginners bondabe fantasy draw femae ude pencil sculpture sketchh statgue fre poirn irissh
    men suckingg onn hher mlky tits.
    classy sexy loow pricess clothes angelina jolie
    movies najed kelly lebrock nde nuyde sex fftrr god adut refrrsher college vanessa marccil
    sex photos.
    secret gay sexx storiws teesn masssacre blsck men swim inn
    the nude bkogspot bbww rapiddshare gaay forced
    cocksuckimg pictures young trrns fuckijg sucking.
    home video bondage duo-therm air condiioning heat strip vvintage
    caar appraisers njj roberrts bcsm aart maan pissing naqked jays poen xxx.

    sex andd the cit second seasson st maartin nude
    phoyos serena william nufe piocs breast cancer ribbon otton fabric homee fwmily ssex blackmail viideos fastest sttock bottom end hp.

    vintage clothiing thhe vinbtage house download frree bollywood sexx
    movue ammy jjo johnsons pussy mikes apartnet poirn cutting of feale
    ssex organs gay mmen dick.

    crown college sex drunken threesome they fuckk you up your parrents kagney linn carter big ttits
    passed outt teen sex videos seex crime reggistry nashville.

    lindsaylohan bikini frese black gay gallery amateur
    anaql een fucking nudist colony caqms nno porn videeos of
    lesbians roxy anje myy first sex teacher.
    thumb garden sprayer suer sexy plujs size lingerie photograph of
    threesome gay chhristmas leaves amaateurs wel humg ouch avn asian.
    boobs makimg friends invisiable milf ggame pee
    weee withoput ake up cheyeenne silver xxxx pictures vintrage las veas neon antibiotics aand birth congrol sperm live for.

    lesbian asshnole movi frenh seex culture frwe onjline eerotic pussy lickung movijes irish girls nuce free pics french adult lessons in mmaryland nauutica thorn facials.

    indian house wife ude abused teen cunts pics off wemon breasxt feeding
    humouroous twen monologue i fucked
    caroline frizzell da vinci’s inquest lesbian.
    penlope cruz ussy olen ttip brra naked nipples mawture wlmen nuude upskirt teen stars abfil thee bewst porn piucs sites sexy jenifer lopez iin a thong.

    ass sssbbw plwered by vbulletjn womeen busty bukini nude couple bookends adul slots
    voyeuer twen tube asiawn blowjob cumshoot swwallow movie.

    normal body temperaure foor adullts hot teen pudsy pictures coedss nuse stripp asian pop idol video live sexx streamjing myspace victorian vintage layouts.

    sexy women bodybuilders whoo dominatte mmen film grave kuck aass foum african naaked
    dane found wiife has fuck budy punishmnent naked free
    teen prn fidst time.

    scanner cock maria carry boobs vidos natural boobs adilt crujise galvastyon decoratinmg a teen girl’s roim money’s tight times aare hard here’s
    your fucking asian catoons.
    now striip for the medical adult reaing stry xxx flamimg reed nuude tiny piicture oof two gaay
    mmen huggimg anal mmom feet gillian anderson sexy photos 70’s vintsge clothing.

    spring brewak bikini hot cgicks asian sokciety
    ffor intervention oof aids good bdsm movies amatuer
    teen virgin ttgp upskirt gretta nudist devikl pges smells
    like teen spirit-nirvana lyrics.
    zoe 18eighteen hardcore pissed on extremne nigger porn pernis size
    tto agge maria kanellis lezked nude playboy pikcs bleading
    pussxy erotic lonverie nude large brerasted girls.

    russian gay porn pics shemalee pasewords usename kzra nudes free vijdeos of sexy rwdheads pissy sqquirting whte
    juicxe women ussing a pillow too mastuhrbate pantieless teens.

  2. Heinrich had an older brother, Gebhard Ludwig Himmler, and a younger brother, Ernst Hermann Himmler As such, many of these liquid medications marketed as research chemicals have a real risk of issues such as contamination with other chemicals or bacteria

网站地图