vscode_vscodeusersetup-x64-1 - CSDN
  • 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使用总结

    2017-09-28 23:59:10
    VSCode常用功能总结

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

    简介

    VSCode是微软出的一款轻量级代码编辑器,免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。

    一、设置首选项

    下载安装完成后,打开编辑器,首先要设置主题、字体大小等。

    1. 设置主题

    文件→首选项→颜色主题

    2. 设置字体大小

    文件→首选项→设置,打开了一个setting.json文件,将左边的设置复制到右边进行覆盖生效,所有编辑器的设置都在这里修改。
    这里写图片描述

    二、Emmet插件

    最新版集成了Emmet 2.0,在文件→首选项→设置可以开启或者关闭功能
    这里写图片描述

    三、快捷键

    所有快捷键设置:文件→首选项→键盘快捷方式
    1. 在当前行中间换行到下一行:ctrl+enter
    2. 当光标点击到某一行时,默认选中全行,可以直接复制剪切
    3. 直接删除某一行:shift+delete或者ctrl+shift+k
    4. 多行光标选择:alt+鼠标左键
    5. 自动生成html结构和meta声明:首先输入“!”,然后按tab键
    6. 标签自动补全:tab键
    7. 折叠所有代码:ctrl+k、ctrl+0
    8. 拆分编辑器:ctrl+\
      查找框右边的3个参数分别为:区分大小写,全字匹配,使用正则
    这里写图片描述
    9. 跳转行号:ctrl+G
    10. 添加函数注释:在函数上方输入“/**”,然后点击enter
    这里写图片描述
    11. 格式化:alt+shift+f
    12. 注释:ctrl+/
    13. 全部保存:ctrl+k, 然后只按s一个键
    14. 向上移动一行:alt+↑
    15. 向下移动一行:alt+↓
    16. 向上复制一行:alt+shift+↑
    17. 向下复制一行:alt+shift+↓
    18. 查找:ctrl+F
    19. 替换:ctrl+H
    20. 文件中查找:ctrl+shift+f
    可以在打开的文件夹中搜索所有文件内容
    21. 文件中替换:ctrl+shift+h
    22. 转到定义:F12
    23. 转到实现:ctrl+F12
    24. 打开文件夹:ctrl+k, ctrl+o
    25. 关闭文件夹:ctrl+k, 然后单按一个f
    26. 选中一段代码,通过“ctrl+[”可以左移,“ctrl+]”可以右移

    更多

    更多功能参考官网更新列表介绍:https://code.visualstudio.com/updates

    展开全文
  • 技术是开源的、知识是共享的。 用知识改变命运,让我们的家人过上更好的生活。 1. Codelf 变量命名神器 2、View In Browser ...3、Color Highlight ...成对的彩色括号,让括号拥有独立的颜色,便于区分 ...

    技术是开源的、知识是共享的。
    用知识改变命运,让我们的家人过上更好的生活。

    1. Codelf

    变量命名神器在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    2、View In Browser

    在浏览器里面预览正在编辑的html文件在这里插入图片描述
    在这里插入图片描述

    3、Color Highlight

    高亮显示样式颜色在这里插入图片描述
    在这里插入图片描述

    4、Bracket Pair Colorizer

    成对的彩色括号,让括号拥有独立的颜色,便于区分在这里插入图片描述
    在这里插入图片描述

    5、Highlight Matching Tag

    高亮显示对应的HTML标签以及标识出对应的各种括号在这里插入图片描述
    在这里插入图片描述

    6、Path Intellisense

    在编辑器中输入路径的时候,能自动补全
    在这里插入图片描述

    7、Prettier - Code formatter

    格式化代码
    在这里插入图片描述
    在这里插入图片描述

    8、Auto Close Tag

    自动补全标签
    在这里插入图片描述

    9、Auto Rename Tag

    自动重命名html标签,如修改p标签为a,将自动修改结尾标签p为a
    在这里插入图片描述

    10、HTML Snippets

    智能提示HTML标签,以及标签的含义
    在这里插入图片描述

    11、HTML CSS Support

    在HTML标签上写Class的时候能够智能提示当前所支持的样式在这里插入图片描述

    12、indent-rainbow

    带颜色的缩进
    在这里插入图片描述
    在这里插入图片描述

    13、change-case

    转换命名风格
    在这里插入图片描述
    在这里插入图片描述

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

    2018-10-22 11:15:23
    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

    2019-12-18 15:13:09
    vscode是微软公司开发的一款免费的、开源的、轻量级的、功能强大的、跨平台的代码编辑器。 本课程讲述了vscode的详细使用,和在Python、Java、web前端等领域的开发实战。
  • 方法一: 在 json 文件中添加: // 控制编辑器是否应在键入后自动设置行的格式 "editor.formatOnType": true 方法二: 在设置中搜索format on type,勾选✔该项即可
  • 一.插件 1.已启用 2.禁用 二.setting设置 ...// "window.zoomLevel": 1, // "workbench.editor.enablePreview": false, //关闭rg.exe进程 // "editor.minimap.enabled": false, //关闭快速预览 ...
  • VS CODE开发配置

    2019-04-10 17:28:54
    为了方便团队合作开发管理项目,放弃了轻量快速的sublime,从而走向vscode 一,首先配置自动保存格式化模板 打开应用扩展后, 1)、下载Prettier - Code formatter和ESLint插件,如下图。 2)、下一步File>...
  • VSCode基本配置

    2019-10-05 01:29:49
    功能:保存时自动按ESLint规范格式化代码 + stylus配置(需安装Manta's Stylus Supremacy插件) { "editor.fontSize": 18, "editor.lineHeight": 28, // 设定主题theme "workbench.colorTheme": "Atom One Dark...
  • vscode的设置文件 在vscode的:file 》首选项 》setting 代码如下: { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2...
  • 作者:李少侠https://zhuanlan.zhihu.com/p/35303567已获转载授权Visual Studio Code(VS Code)近年来获...
  • VSCode使用

    2019-03-23 14:46:08
    安装Visual Studio Code(vscode) 插件: 1.Chinese 2.主题 Super One Dark Theme 3.插件 luaide、Lua Beautify(快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整) ESLint(语法规则...
  • 作为前端开发的我,之前的开发过程中一直用的是Atom这一款IDE,再配上了好看的主题插件很nice,Atom的界面是真心好看,但是插件装多了你们真的不觉得卡吗,VS Code比Atom更加的流畅,比webstorm更轻量级。...
  • VSCode详细使用教程

    2019-09-05 05:17:48
    VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。 1.VSCode下载 VSCode下载链接: https://code.visualstudio.com/ 2.VSCode汉化 3...
  • 1.VSCode作为一款很不错的开发软件,相比DW更小巧,用来测试前端特别不错,那么我们平时开发网页发现只有写完代码,然后保存,接下来到浏览器中刷新查看效果,然后不停重复,我们发现很多时间就这样浪费到了这三个...
  • Vscode是一款开源的跨平台编辑器。默认情况下,vscode使用的语言为英文(us),如何将其显示语言修改成中文了? 1)打开vscode工具; 2)使用快捷键组合【Ctrl+Shift+p】,在搜索框中输入“configure display ...
  • 后来发现vscode这个软件,觉得很轻便,而且和之前使用的vs2018风格一样。 在这里对vscode配置Python开发环境做一下记录。 步骤1:安装Python 安装Python的教程网上有很多。直接到官网下载安装就行。 下载链接:...
  • VSCode配置启动Vue项目

    2019-10-09 11:11:27
    下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件。 1、vetur插件的安装 该插件是vue文件基本语法的高亮插件,在插件窗口中输入...
  • vscode中git的配置

    2018-04-12 16:42:47
    不过这就需要你对vscode进行配置。下面我会讲到git的配置与免密码上传github1.vscode中git的配置 首先需要你的电脑上已经安装了git,且window电脑里git添加到环境变量中去了。这样你的电脑就可以使用git了,但是想...
  • vscode最佳配置 配置说明详解 vscode配置内容在最后,已附上 editor是针对vscode的风格设置 例如 tabSize:一个tab等于2个空格,行高为24px workbench是针对vscode的主题设置 例如 iconTheme...
1 2 3 4 5 ... 20
收藏数 80,158
精华内容 32,063
关键字:

vscode