精华内容
参与话题
问答
  • vscode安装使用教程

    万次阅读 多人点赞 2018-12-11 19:18:48
    一、什么是vscode**     Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义...

    一、什么是vscode**

        Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

    vscode 官网: https://code.visualstudio.com/

    二、Vscode版本

    当前最新版本 1.27 2018年8月
    版本列表:https://code.visualstudio.com/updates/v1_27

    三、Vscode下载

    下载地址:https://code.visualstudio.com/Download

    可下载.zip解压版,下载解压后即可使用。【其是用electron打包的】

    也可下载安装版可执行程序,安装后很多东西都不需要你自己配置了。

    四、汉化vscode

    按f1 搜索 Configore Display Language 设置 zh-cn 关闭软件重启。
    在这里插入图片描述

    注意:
    如果重启后还是英文的,那么在商店查看已安装的插件,把中文插件Chinese(simplified) 重新安装一遍,然后重启软件即可。

    在这里插入图片描述

    汉化成功:
    在这里插入图片描述

    五、几个常用命令说明

    在这里插入图片描述

    注意
    1.Ctrl+shift+F 在文件中查找,可以同时替换。还可以指定在什么文件中,同时指定要排除什么文件等。
    2. 通过快捷键Ctrl+`后可以将命令窗口打开在vscode中,使用起来就比较方便了。
    3.我们安装vscode后,可以直接在任意一个项目目录下,鼠标右键然后将这个项目在服务器上打开。(如果你已经有打开了一个窗口,那么他会打开一个新窗口)

    六、左边图标说明

    在这里插入图片描述

    七、基本使用

    1.直接拖入项目文件夹进入软件
        方式一: 拖入工作区(这样的话,会保留当前以及打开的项目文件夹)

        方式二: 拖入工作区右边的窗口,这样的话会让拖入的窗口覆盖掉原本以及打开的窗口
    (这时vscode会问你是否保存一个文件,用来保存原本工作区信息,以便下次打开此文件)

    备注:对于左侧的文件夹可以直接使用快捷键复制粘贴等。
    2.在vscode里面创建项目文件夹
    在这里插入图片描述

    3.格式化代码
    在代码里面右键菜单,会弹出相应的格式化等功能选项,也有定义引用查找等菜单。

    4.在浏览器中打开网页

    1.以file文件协议形式打开文件

    安装插件:Open HTML in Default Browser
    

    特点

    • 用默认浏览器打开 HTML 文件
    • 在资源管理器中,HTML 文件右键显示 在浏览器中打开 菜单
    • 在编辑器中,HTML 文件右键显示
    • 在浏览器中打开 菜单 可以同时打开多个页面

    我们在工作区项目上右键菜单就能看到在资源管理器中打开文件的选项

    2.以服务器形式打开文件
    方式一:
        安装live server 插件,点击重新加载或者重启vscode,然后鼠标右键就可以在服务器上打开,
    这种模式打开会自动刷新页面。
    方式二:
        1.按下快捷键:Ctrl+` 打开命令行终端,执行cnpm install live-server -g

        2.安装好后每次要运行只需要打开终端后执行一下live-server即可

        3.使用live-server是把整个网站打开到服务器上的。不管你当前定位到哪一个目录,他打开的都是默认的首页文件,如:index.html

        4.如果你根目录下全是文件夹,或者没有index.html等默认首页文件,那么服务器就会显示一些文件夹让你选择。
    如:
    在这里插入图片描述
        5.如果要关闭live-server那么只需要在控制台执行以下ctrl+c,然后输入y确认下即可关闭。
        6.Live-server可以在任意项目根目录下,打开终端窗口,然后输入live-server即可让当前项目在服务器上打开执行
        7.在以服务器打开的模式下,我们更改了文件内容后只要保存下,浏览器就会自动的刷新,而不需要我们显式的在浏览器里面刷新。
    方式三:
        也可以安装http server插件,安装完成后按下f1,然后输入http会看到下面两个选项,选择with current file那个能够创建一个服务器运行当前文件。另外一个会找当前目录下的index.html,然后打开它。
    在这里插入图片描述
    选择一个后,会再让你选择在浏览器里面打开还是vscode里面打开。

    其他
        你也可以全局安装此模块【cnpm install http-server -g 】
    安装到全局后:在终端里面输入hs就可以使用。

    八、插件安装

    安装与卸载

    • 安装: 在左边最下面是哪个图标点击搜索插件进行安装即可。
    • 卸载: 同样的地方找到插件,然后进行卸载即可。

        如果安装了某个插件后无法看到效果,那么请重启下vscode,或者重新加载
    常用插件:

    • HTML Boilerplate
          通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,选中html:5即可生成一个新的网页文件,也可以输入一个感叹号

    • browser-plus
      在编辑器内预览HTML
          通过开启端口(10086)监听当前打开项目的根目录,在编辑器内预览网站,省去了频繁切换浏览器、编辑器看页面效果,修改代码后自动刷新页面。
      使用方法
      Window Ctrl+F1 ,默认10086端口预览网页

    • CSS Peek
          使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。

    • Color Info
          这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。

    • Auto Close Tag
          自动闭合HTML/XML标签

    • Auto Rename Tag
          自动完成另一侧标签的同步修改

    • HTML Snippets
          智能提示HTML标签,以及标签含义JavaScript(ES6) code snippetsES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

    • Path Intellisense
          自动提示文件路径,支持各种快速引入文

    • jQuery Code Snippets
        jQuery代码智能提示

    • Icon Fonts
          这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

    自动编译less文件为css文件:
        安装插件 Easy LESS,保存自动编译,不需要配置(默认编译到当前目录下)
        如果需要编译为不同文件名的css文件,那么在less文件的最上面加上一行注释即可:// out: new-file.css

    展开全文
  • VScode使用教程大全,看完你一定会谢谢我的

    万次阅读 多人点赞 2019-06-21 13:44:56
    作为前端开发的我,之前的开发过程中一直用的是Atom这一款IDE,再配上了好看的主题插件很nice,Atom的界面是真心好看,但是插件装多了你们真的不觉得卡吗,VS Code比Atom更加的流畅,比webstorm更轻量级。...

    作为前端开发的我,之前的开发过程中一直用的是Atom这一款IDE,再配上了好看的主题插件很nice,Atom的界面是真心好看,但是插件装多了你们真的不觉得卡吗,VS CodeAtom更加的流畅,比webstorm更轻量级。一次偶然换的工作后,项目组要求统一IDE,让我了解到了VS Code,这边简单介绍下VS Code日常开发的需求。

    VS Code精选主题

     

     

     

    主题插件安装流程

    首先先简单介绍些主题插件的安装流程:

    第一步,点击扩展商店搜索你要找的插件名称如Atom One Dark Theme,点击安装;

     

     

     

    第二部,安装好了之后只是证明你本地的VS Code上面有这个插件了,还需要将当前使用的主题插件切换成你想要的才行;

    ①点击左下角的设置按钮,进入命令面板;

    ②搜索颜色主题关键字;

     

     

     

    ③点击想要的主题完成切换。

     

     

     

    一个编辑器界面的好看与否,真心挺重要的,之前对atom一直恋恋不舍,完全就是因为它的主题界面太优雅了。下图是笔者配置好的VS Code界面截图,下面推荐几款好看的主题:

     

     

     

    VS Code 主题插件列表(推荐)

    1. One Dark Pro

    One Dark Pro的主题界面效果如下(推荐指数5星) One Dark Pro

     

     

     

    2. Atom One Dark Theme

    Atom One Dark Theme的主题界面效果如下(推荐指数5星) Atom One Dark Theme

     

     

     

    3. Eva Theme

    Eva Theme的主题界面效果如下(推荐指数5星) Eva Theme

     

     

     

    4. Material Palenight Theme

    Material Palenight Theme的主题界面效果如下(推荐指数5星) Material Palenight Theme

     

     

     

    更多Visual Studio Code 主题插件请参考VS Code Downloads

    VS Code精选插件

    VS Code所有的插件都可以在VS Code Downloads插件库中找到,如下图:

     

     

     

    Auto Close Tag

    Auto Close Tag:匹配标签,关闭对应的标签。对于HTML/XML很实用。

    Auto Rename Tag

    Auto Rename Tag:改变标签的时候同时改动开闭合标签;对于HTML/XML很实用。

    HTML CSS Support

    HTML CSS Support : 这个也是HTML必备插件之一。

    CSS Peek

    CSS Peek : html和css中关联css的跳转

    Code Runner

    Code Runner : 代码编译运行看结果,支持众多语言

    Git History

    Git History : 查看git分支提交日志的插件

    Git History Diff

    Git History Diff : 寻找每一个git分支上面提交过的节点,并可以对比差异性。

    Path Autocomplete

    Path Autocomplete : 路径智能补全插件。

    Path Intellisense

    Path Intellisense : 路径智能提示插件。

    beautify

    beautify :良好的拓展性,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用;但是react工程的jsx文件用beautify插件格式化会乱掉,建议不要用

    Prettier - Code formatter

    Prettier - Code formatter : 代码格式化插件,主要针对工程中的JavaScript / TypeScript / CSS

    Prettier Now

    Prettier Now : 支持语言比较全面的代码格式化插件,主要是支持jsx /tsx ,还有sass / less等(问的react工程基本上就是用这2个Prettier插件格式化代码)

    Terminal

    Terminal : vs code 内置的命令行插件,也比较实用。

    Bookmarks

    Bookmarks : 这个插件支持在文件特定的行做标记,更好的提高开发效率。

     

     

     

    Bracket Pair Colorizer

    Bracket Pair Colorizer :很多括号的情况下,这个插件可以做一个颜色的区分,代码一目了然。

     

     

     

    Chinese (Simplified) Language Pack for Visual Studio Code

    Chinese (Simplified) Language Pack for Visual Studio Code : 适用于 VS Code 的中文(简体)语言包。

    filesize

    filesize : 编辑器底部显示当前文件的大小。

    Markdown Preview Enhanced

    Markdown Preview Enhanced : 本地Markdown文档预览插件。

    vscode-icons

    vscode-icons : 一套vs code的图标插件。

    npm

    npm : 不多说npm。

    open-in-browser

    open-in-browser : 一键在浏览器中打开

    Live Server

    Live Server :一键开启本地服务。

    fileheader

    fileheader感觉用得上 新建文件作者注释

     

     

    在自定义设置页面(comd+,),可以设置一些作者信息,然后打开命令面板(comd+shift+P),输入fileheader回车即可

     

     

     

     

     

     

     

    Local History

    Local History个人感觉很有用 本地代码的一个保存日志,在没有git,svn,或者很长时间没有提交过代码的情况下,感觉挺实用,再也不怕代码回滚。

     

     

     

    GitLens -- Git supercharged

    GitLens -- Git supercharged : GitLens能增强Visual Studio代码中内置的Git功能。它帮助您通过Git blame注解和代码镜头直观地显示代码作者,无缝地导航和探索Git存储库,通过强大的比较命令获得有价值的见解。

     

     

     

     

    VS Code常用快捷键

    VS Code的快捷键有很多,需要具体的请仔细参考 VS Code => 左下角设置按钮 => 键盘快捷方式

     

     

     

    我们也可以自定义快捷键,在keybindings.json里面设置覆盖即可

     

     

     

    快捷键完全是个人操作习惯,这里不多介绍,我常用的有这几个:

    打开命令面板    cmd + shift + p / F1
    打开设置页面    cmd + ,
    删除一行        cmd + E(自定义)
    添加书签        cmd + option + k
    代码格式化      control + opiton + B
    复制代码

    VS Code git代码管理实战

    git现在是很常见的代码管理工具,VS Code 也有内置的git插件,当然,要是你觉得不完美,可以安装一些常用的git插件等,简单介绍下VS Code 下git的提交步骤。

     

     

     

    这里我以GitHub上面新建的一个仓库为例,仓库新建后默认分支是master,这里我在GitHub上新建了2个远程分支develop01develop02,当你在VS Code中点击切换到某一个远程分支的时候,VS Code会自动给你创建一个和当前远程分支对应的本地分支,如origin/develop02 对应develop02,如origin/master 对应master,如上图所示。

    现在我们在master分支上面提交代码,

     

     

     

    • 第一步,先暂存要提交的文件
    • 第二步,填下提交日志
    • 第三步,点击对勾按钮完成提交

    提交好了之后还需要拉取git远程分支的代码才能推送。

     

     

     

    • 第四步,拉取远程代码,解决冲突
    • 第五步,推送到远程分支上

    然后就没有然后了?,提交完成。

    假如你因为工作需求的原因,需要在不同的分支上面提交不同的代码,那就涉及到分支的切换了。首先第一步,切换分支之前先提交代码,不然老是有报错日志,切换了分支后,本地的代码也会对应分支改变。

     

     

     

    如上图,master切换成develo01之后,master分支上刚提交的代码成了develo01上对应的代码。

    git提交代码这部分,还可以使用相关git代码管理工具实现呢,如SourceTree、Tower等工具都很好用,这边也整理了一篇文章,欢迎收藏

    你问我答

    1.VS Code 怎么更改默认的设置?

    笔者使用的是mac,使用快捷键 Com + , 打开用户默认设置界面,左边是默认设置,右边是自定义设置,根据个人工作场景而定吧,就像我这边就统一格式化代码缩进4格等,还可以设置忽略一些文件夹等。

    {
        "explorer.confirmDelete": false,
        // 主题
        "workbench.iconTheme": "vscode-icons",
        // 小地图
        "editor.minimap.enabled": true,
        // 主题风格One Dark Pro
        "workbench.colorTheme": "One Dark Pro",
        "window.zoomLevel": 1,
        "extensions.autoUpdate": false,
        // 字体大小
        "editor.fontSize": 13,
        "editor.snippetSuggestions": "top",
        "diffEditor.ignoreTrimWhitespace": true,
        // 设置格式化缩进4格
        "prettier.tabWidth": 4,
        "vetur.format.defaultFormatter.html": "prettier",
        "gitlens.advanced.messages": {
            "suppressShowKeyBindingsNotice": true
        },
        "gitlens.historyExplorer.enabled": true,
        "atomKeymap.promptV3Features": true,
        "editor.multiCursorModifier": "ctrlCmd",
        //粘贴自动格式化
        "editor.formatOnPaste": false,
        //保存自动格式化
        "editor.formatOnSave": false,
        // 用来忽略工程打开的文件夹
        "files.exclude": {
            "**/.vscode": true,
            "**/.DS_Store": true,
            "**/.history":true,
            "**/nbproject":true
        },
        // 用来忽略搜索的文件夹
        "search.exclude": {
            "**/node_modules/**": true,
            "**/bower_components/**": true,
            "**/image/**": true,
            "**/*.xml": true,
            "**/.history/**":true,
            "**/nbproject/**":true,
            "**/vscode/**":true
    
        },
        // 创建和更新代码的头部信息作者
        "fileheader.Author": "Baldwin",
        "fileheader.LastModifiedBy": "Baldwin",
    }
    复制代码

    2.假如我几天没有提交代码了(git),今天突然发现代码youbug,需要还原到昨天版本,VS Code能做到吗?

    能。参考上面的 VS Code插件 Local History

     

    展开全文
  • VSCode详细使用教程

    万次阅读 多人点赞 2019-09-05 03:16:53
    VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。 1.VSCode下载 VSCode下载链接: https://code.visualstudio.com/ 2.VSCode汉化 3...

          VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。

    1.VSCode下载

    VSCode下载链接: https://code.visualstudio.com/

    2.VSCode汉化

    在这里插入图片描述

    3.VSCode常用插件(安装步骤同汉化)

          3.1 Auto Close Tag (自动闭合HTML/XML标签)

    在这里插入图片描述

          3.2 Auto Rename Tag (自动完成另一侧标签的同步修改)

    在这里插入图片描述

          3.3 Beautify (格式化 html ,js,css)

    在这里插入图片描述

          3.4 Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)

    在这里插入图片描述

          3.5 Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)

    在这里插入图片描述

          3.6 ESLint(js语法纠错,可以自定义配置)

    在这里插入图片描述

          3.7 GitLens(方便查看git日志)

    在这里插入图片描述

          3.8 HTML CSS Support (智能提示CSS类名以及id)

    在这里插入图片描述

          3.9 HTML Snippets(智能提示HTML标签,以及标签含义)

    在这里插入图片描述

          3.10 JavaScript(ES6) code snippets(ES6语法智能提示,以及快速输入)

    在这里插入图片描述

          3.11 jQuery Code Snippets(jQuery代码智能提示)

    在这里插入图片描述

          3.12 Markdown Preview Enhanced(实时预览markdown)

    在这里插入图片描述

          3.13 markdownlint(markdown语法纠错)

    在这里插入图片描述

          3.14 Material Icon Theme(vscode图标主题)

    在这里插入图片描述

          3.15 Icon fonts(图标字体)

    在这里插入图片描述

          3.16 open in browser(右键快速在浏览器中打开html文件)

    在这里插入图片描述

          3.17 Path Intellisense(自动提示文件路径)

    在这里插入图片描述

          3.18 React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)

    在这里插入图片描述

          3.19 Vetur(Vue多功能集成插件,错误提示等)

    在这里插入图片描述

          3.20 Class autocomplete for HTML(智能提示HTML class =“”属性)

    在这里插入图片描述

          3.21 npm Intellisense(require 时的包提示)

    在这里插入图片描述

    4.VSCode快捷键

          4.1 左侧是按键,右侧是功能(下同)

    在这里插入图片描述

          4.2 基础编辑

    在这里插入图片描述

          4.3 导航

    在这里插入图片描述

          4.4 搜索和替换

    在这里插入图片描述

          4.5 多光标和选择

    在这里插入图片描述

          4.6 语言编辑

    在这里插入图片描述

          4.7 编辑器管理

    在这里插入图片描述

          4.8 文件管理

    在这里插入图片描述

          4.9 显示

    在这里插入图片描述

          4.10 调试

    在这里插入图片描述

          4.11 集成终端

    在这里插入图片描述

    本文作者:Yaphets.Lee

    转载请注明出处,感谢!

    展开全文
  • vscode 一些基本知识

    千次阅读 2018-10-18 08:52:33
    Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段...VSC中文网:http://www.vscode.o...

    Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

     

    VSC中文网:http://www.vscode.org/

     

    vscode  作为一款逐渐火热的编辑器。它的特点免费、开源、多平台,以及集成git,代码调试,插件丰富等有点,被大家逐渐熟知和认可。

    这里主要说一下前端常用插件。

     

    Auto Rename Tag
      自动重命名配对的HTML / XML标签

    background
      修改背景,设置编辑器界面的背景图片。但是好像现在会出错,具体设置内容在vsc找到插件看详细信息。

    Bootstrap 4 & Font awesome snippets
      bootstrap4和font awesome 快速引用和代码生成。

    Color-Highlight
      在编辑器中高亮显示颜色。

    Color Picker
      代码的颜色选择器。

    Css Peek
      能在源代码中的字符串中找到对应的css(类和ID)。显示在那个css文件里,还有在第几行。

    Csscomb
      css 、less、sass 的代码格式化。

    Debugger for Chrome
      js调试的插件,前端项目在Chrome中运行起来之后,可以直接在VSCode中打断点、查看输出、查看控制台,详细配置见插件说明。

    Document This
      为js文件生成文档的代码注释。

     ESLint
      检查Javascript编程时的语法错误。

    Git Easy
      增加了vscode中自带的git操作,安装后按F1调出控制台,输入git easy [options]完成git操作,代替git bash。

    Git History 
      查看git日志以及图表和详细信息。
      查看文件的历史记录(Git日志)或文件中的行历史(Git Blame)

    Guides
      代码的标签对齐线。

    HTML CSS Class Completion
      为基于工作空间上的CSS文件的HTML类属性提供CSS类名称提示。

    HTML Boilerplate
      提供生成标准HTML样板代码。

    HTML CSS support
      css 自动补齐

    HTML Snippets
      支持HTML5标签提示

    JavaScript (ES6) snippets
       支持JavaScript  ES6 语法

    jQuery Code Snippets
       jq代码段提示。

    JS-CSS-HTML  Formatter
      代码格式化。

    Lodash
      lodash 函数提示。

    Lorem ipsum
      快速填充文本

    Npm Intellisense
      在import语句中自动完成npm模块引入的代码插件。

    open in browser
      在浏览器中打开,安装后在左侧目录中右键点击会出现 open in browser 选项。

    Path Intellisense
      文件路径提示。

    Settings Sync
      编辑器设置同步,包括插件,配置等。

      详情点击=》https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

    VS Code CSS Comments
      css代码注释。

    vscode-browser-plugin
      在编辑器内预览HTML,

      通过开启端口(3000)监听当前打开项目的根目录,在编辑器内预览网站,省去了频繁切换浏览器、编辑器看页面效果,修改代码后自动刷新页面。

    vscode-icons
      文件图标。

    Vue 2 Snippets
       vue 代码提示,高亮。

      (ps:使用其他框架,直接搜就好,像是react,angular,就会出现相关的代码提示和语法支持常用插件)

    主题插件:
      Material-theme;
      monokai-light;
      Monokai++;
      One Dark Theme;
       个人审美不同,大家自己体会并选择。

    以上就是我的前端常用插件,有些插件的功能相互交叉重复,自己可以有选择的安装使用。

     

    以下内容转自:https://zhuanlan.zhihu.com/p/22880087

    vscode常用快捷键:


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

    打开一个新窗口: 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
    显示相关

    全屏:F11
    zoomIn/zoomOut:Ctrl + =/Ctrl + -
    侧边栏显/隐:Ctrl+B
    预览markdown Ctrl+Shift+V
    其他

    自动保存:File -> AutoSave ,或者Ctrl+Shift+P,输入 auto
    --------------------- 
    作者:amyloverice 
    来源:CSDN 
    原文:https://blog.csdn.net/amyloverice/article/details/79388270 
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • VSCode使用总结

    万次阅读 多人点赞 2017-08-12 12:31:39
    VSCode常用功能总结
  • VSCode隐藏node_modules目录

    千次阅读 2017-09-22 17:18:00
    使用VSCode,打开一个工程时,发现node_modules目录包含到工程中了,问题: settings.json配置如下,可以自己定制忽略的文件夹: search.exclude 用来忽略搜索的文件夹 files.exclude 用来忽略工程打开的...
  • vscode如何生成node_modules文件 将vue项目拖入vscode并打开终端 输入yarn serve因为没有node_modules所以会报错 输入 cnpm install 在输入yarn serve
  • 1.安装npm包:rimraf npm install rimraf -g 2.进入项目根目录,再输入指令 rimraf node_modules 3.删除完成
  • 使用VSCode,打开一个工程时,发现node_modules目录包含到工程中了,问题: settings.json配置如下,可以自己定制忽略的文件夹: search.exclude 用来忽略搜索的文件夹 files.exclude 用来忽略工程打开的...
  • 【VS】VS Code安装、配置、使用(windows10 64)

    万次阅读 多人点赞 2018-11-13 18:50:05
    一、VS code 下载和安装 下载地址  VSCodeUserSetup-x64-1.29.0.exe ...对应的扩展插件安装地址:C:\Users\你自己\.vscode\extensions VS Code不会写入任何配置到注册表中。所以这些文件夹可...
  • VSCode使用

    万次阅读 2018-10-26 16:10:45
    安装Visual Studio Code(vscode) 插件: 1.Chinese 2.主题 Super One Dark Theme 3.插件 luaide、Lua Beautify(快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整) ESLint(语法规则...
  • VS Code为什么能这么牛?

    万次阅读 多人点赞 2019-08-22 08:31:00
    作者:李少侠https://zhuanlan.zhihu.com/p/35303567已获转载授权Visual Studio Code(VS Code)近年来获...
  • vscode 中使用 Git :拉取、提交、克隆

    万次阅读 多人点赞 2018-11-13 16:53:15
    PS:转载此文后,网友在评论中提到还有其它方法,不过目前个人尚在研究中,有兴趣的朋友们也可自行一探究竟 ... ------------------------------------------------------------------------- ...
  • VSCODE 打造完美java开发环境

    万次阅读 多人点赞 2018-01-23 11:56:58
    vscode Java 开发环境配置 (此博客已更新, 之前的排版不利于阅读) 使用vscode后,你可能无法忍受 eclipse :) 最后更新时间: 2018-07-01 (博客地址) 系统需安装jdk1.8,配置好环境变量JAVA_HOME 打开vscode,...
  • 配置VScode c语言环境

    万次阅读 多人点赞 2018-08-03 07:16:51
    成成最近用到C语言了,之前比较喜欢用在vscode上面用python调试,今天我参考了一些文章,也尝试了下在vscode上配置c语言的调试,其中包含一些相关的基础知识。 1、在vscode里面下载c/c++官方插件: 2、安装c/c++...
  • VSCode设置中文语言显示

    万次阅读 多人点赞 2018-09-10 14:46:42
    Vscode是一款开源的跨平台编辑器。默认情况下,vscode使用的语言为英文(us),如何将其显示语言修改成中文了? 1)打开vscode工具; 2)使用快捷键组合【Ctrl+Shift+p】,在搜索框中输入“configure display ...
  • VScode 全局搜索功能

    万次阅读 2018-05-23 10:06:20
    最近知道到VScode这个软件,开始试用,总体感觉很不错,就是不能全局搜索,经过了解,是我的配置问题,上网找到了一个解决办法, 在配置文件添加: “search.exclude”: { “system/”: true, “!/system/*/....
  • VSCode下载与安装

    万次阅读 多人点赞 2019-06-27 22:34:28
    (1)点击进入VSCode官网 点击Download for Windows 下载后安装 (2)配置中文插件: ctrl shift +p 输入:Configure Display Language 选择en 点击后会提示重启: 选择Restart重启后如下: 点击左边小方框 后输入...
  • VSCode设置网页代码实时预览

    万次阅读 多人点赞 2018-10-14 21:39:32
    1.VSCode作为一款很不错的开发软件,相比DW更小巧,用来测试前端特别不错,那么我们平时开发网页发现只有写完代码,然后保存,接下来到浏览器中刷新查看效果,然后不停重复,我们发现很多时间就这样浪费到了这三个...
  • vscode 前端常用插件推荐

    万次阅读 多人点赞 2019-01-07 00:09:49
    1. vscode 简介 vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。 当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。 比...

空空如也

1 2 3 4 5 ... 20
收藏数 90,828
精华内容 36,331
关键字:

vscode